diff --git a/.github/config.yml b/.github/config.yml deleted file mode 100644 index c62bc052d..000000000 --- a/.github/config.yml +++ /dev/null @@ -1,14 +0,0 @@ -# Configuration for request-info - https://github.com/behaviorbot/request-info - -# *Required* Comment to reply with -requestInfoReplyComment: > - We would appreciate it if you could provide us with some more information about this issue/PR! - -# *OPTIONAL* default titles to check against for lack of descriptiveness -# MUST BE ALL LOWERCASE -requestInfoDefaultTitles: - - update readme.md - - updates - -# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given -requestInfoLabelToAdd: needs-more-info diff --git a/.github/lock.yml b/.github/lock.yml deleted file mode 100644 index 197497fe2..000000000 --- a/.github/lock.yml +++ /dev/null @@ -1,35 +0,0 @@ -# Configuration for Lock Threads - https://github.com/dessant/lock-threads - -# Number of days of inactivity before a closed issue or pull request is locked -daysUntilLock: 60 - -# Skip issues and pull requests created before a given timestamp. Timestamp must -# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable -skipCreatedBefore: false - -# Issues and pull requests with these labels will be ignored. Set to `[]` to disable -exemptLabels: [] - -# Label to add before locking, such as `outdated`. Set to `false` to disable -lockLabel: false - -# Comment to post before locking. Set to `false` to disable -lockComment: false - -# Assign `resolved` as the reason for locking. Set to `false` to disable -setLockReason: true - -# Limit to only `issues` or `pulls` -# only: issues - -# Optionally, specify configuration settings just for `issues` or `pulls` -# issues: -# exemptLabels: -# - help-wanted -# lockLabel: outdated - -# pulls: -# daysUntilLock: 30 - -# Repository to extend settings from -# _extends: repo diff --git a/.github/stale.yml b/.github/stale.yml deleted file mode 100644 index 03a77e140..000000000 --- a/.github/stale.yml +++ /dev/null @@ -1,18 +0,0 @@ -# Number of days of inactivity before an issue becomes stale -daysUntilStale: 21 -# Number of days of inactivity before a stale issue is closed -daysUntilClose: 7 -# Issues with these labels will never be considered stale -exemptLabels: - - not-stale - - pinned - - security -# Label to use when marking an issue as stale -staleLabel: false -# Comment to post when marking an issue as stale. Set to `false` to disable -markComment: > - This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. Thank you - for your contributions. -# Comment to post when closing a stale issue. Set to `false` to disable -closeComment: false diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ea42e705d..503f5a5af 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,17 +1,6 @@ # Contribution Guidelines **30 seconds of code** is powered by the community, so feel free to contribute in any way you can to help us! - -## Tools - -Before you begin contributing, you should install the integration-tools globally on your machine: - -```sh -npm install -g @30-seconds/integration-tools -``` - -This will allow you to use our customized tools for all of our content repositories. - ## How you can help - Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements). @@ -23,25 +12,24 @@ Breaking any of these rules will result in your pull request being closed. Pleas - **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners. - **Only modify snippet files**, never modify the generated files in the `snippet_data` directory. -- **Use the integration tools commands** to generate new snippets, ensuring they have the correct name and are in the correct location. +- **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location. - **Follow snippet format exactly**, otherwise your snippets will not be recognized correctly by the tools responsible for publishing them on the website. This includes such things as spacing and empty lines - if you accidentally make a mistake, consult the repository's [snippet template](snippet-template.md). - **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios. ## Snippet creation -After installing the integration tools, you can run the following command: +In order to create a new snippet, you should follow the steps below: -```sh -create-new-snippet -``` - -Replace `` with the name of the snippet you are adding. +- Crate a copy of the [snippet template](snippet-template.md) in the `snippets` directory. +- Change the name of the newly created file to the name of your snippet. +- Edit the file, adding your snippet based on the guidelines. ## Snippet guidelines - Snippets must have all their frontmatter sections (title, tags etc.) filled. - Snippet titles must correspond to the filename and follow the language and repository's naming conventions. - Snippet tags must be comma-separated, contain a primary tag as seen on the website as their first tag and an expertise tag (`beginner`, `intermediate` or `advanced`) as their last tag. +- Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601). - Snippet descriptions must be short and to the point. Explain *what* the snippet does and detail *how* the snippet works and the language features used in it. Snippet description should be written as lists of points (unordered for a few points, ordered otherwise), describing the implemented functionality. - Snippet code and examples must be enclosed in appropriate, language-tagged blocks as shown in the snippet template, be short and use modern techniques and features. Also make sure to test your code before submitting. - If your snippet contains arguments with default parameters, explain what happens if they are omitted when calling the function and what the default case is. Specify default parameters for arguments only if necessary. diff --git a/README.md b/README.md index 3e605cc24..8a2cfa26c 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ [![Logo](/logo.png)](https://30secondsofcode.org/css/p/1) -# 30 seconds of CSS +# 30 seconds of code > Short CSS code snippets for all your development needs * Visit [our website](https://30secondsofcode.org) to view our snippet collection. * Use the [Search page](https://30secondsofcode.org/search) to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up. -* Browse the [CSS Snippet List](https://30secondsofcode.org/css/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag. +* Browse the [CSS Snippet collection](https://30secondsofcode.org/css/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag. * Click on each snippet card to view the whole snippet, including code, explanation and examples. -* You can use the button on the right side of a snippet card to copy the code to clipboard. +* You can use the button at the bottom of a snippet card to view the snippet in Codepen. * If you like the project, give it a star. It means a lot to the people maintaining it. ## Want to contribute? @@ -18,9 +18,9 @@ * If you find a problem with a specific snippet, please [open an issue](https://github.com/30-seconds/30-seconds-of-css/issues/new). * If you find a problem with the website, please [report it in the web repository](https://github.com/30-seconds/30-seconds-web/issues/new). -## Credits & Sponsors +## Credits -* This repository is maintained by the [30-seconds organization on GitHub](https://github.com/30-seconds). +* This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds). * All snippets are licensed under the CC0-1.0 License, unless explicitly stated otherwise. -* Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization. -* Our website is powered by [Netlify](https://www.netlify.com/), [Gatsby](https://www.gatsbyjs.org/), [Travis CI](https://travis-ci.com/) & [GitHub](https://github.com/). +* Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization. +* Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/). diff --git a/logo.png b/logo.png index e1536f79a..a7661d15e 100644 Binary files a/logo.png and b/logo.png differ diff --git a/snippet-template.md b/snippet-template.md index 6e94aded1..bb9ce9ecf 100644 --- a/snippet-template.md +++ b/snippet-template.md @@ -1,6 +1,7 @@ --- title: Snippet Name tags: other,intermediate +firstSeen: 2021-06-13T05:00:00-04:00 --- Explain briefly what the snippet does. diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md index e2207c9e6..935caf06b 100644 --- a/snippets/border-with-top-triangle.md +++ b/snippets/border-with-top-triangle.md @@ -1,6 +1,8 @@ --- title: Border with top triangle tags: visual,beginner +firstSeen: 2019-01-18T12:18:43+02:00 +lastUpdated: 2021-01-07T23:52:15+02:00 --- Creates a content container with a triangle at the top. diff --git a/snippets/bouncing-loader.md b/snippets/bouncing-loader.md index 4a9d0f55b..292098a08 100644 --- a/snippets/bouncing-loader.md +++ b/snippets/bouncing-loader.md @@ -1,6 +1,8 @@ --- title: Bouncing loader tags: animation,intermediate +firstSeen: 2018-03-04T06:24:22+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a bouncing loader animation. diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md index b3c022619..935775f45 100644 --- a/snippets/box-sizing-reset.md +++ b/snippets/box-sizing-reset.md @@ -1,6 +1,8 @@ --- title: Box-sizing reset tags: layout,beginner +firstSeen: 2018-02-27T18:59:09+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Resets the box-model so that `width` and `height` are not affected by `border` or `padding`. diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md index 8e610f103..24debc983 100644 --- a/snippets/button-border-animation.md +++ b/snippets/button-border-animation.md @@ -1,6 +1,8 @@ --- title: Button border animation tags: animation,intermediate +firstSeen: 2019-01-21T18:52:46+02:00 +lastUpdated: 2021-05-24T15:28:52+03:00 --- Creates a border animation on hover. diff --git a/snippets/button-focus-swing-animation.md b/snippets/button-focus-swing-animation.md index 282a8cd8f..89bbee1dc 100644 --- a/snippets/button-focus-swing-animation.md +++ b/snippets/button-focus-swing-animation.md @@ -1,6 +1,8 @@ --- title: Button swing animation tags: animation,intermediate +firstSeen: 2021-05-24T15:28:52+03:00 +lastUpdated: 2021-05-24T15:28:52+03:00 --- Creates a swing animation on focus. diff --git a/snippets/button-hover-fill-animation.md b/snippets/button-hover-fill-animation.md index c0573d75c..cb78d7197 100644 --- a/snippets/button-hover-fill-animation.md +++ b/snippets/button-hover-fill-animation.md @@ -1,6 +1,8 @@ --- title: Button fill animation tags: animation,beginner +firstSeen: 2020-10-08T20:48:11+03:00 +lastUpdated: 2021-04-02T21:34:43+03:00 --- Creates a fill animation on hover. diff --git a/snippets/button-hover-grow-animation.md b/snippets/button-hover-grow-animation.md index 76a6f95a6..764141b61 100644 --- a/snippets/button-hover-grow-animation.md +++ b/snippets/button-hover-grow-animation.md @@ -1,6 +1,8 @@ --- title: Button grow animation tags: animation,beginner +firstSeen: 2021-05-24T15:28:52+03:00 +lastUpdated: 2021-05-24T15:28:52+03:00 --- Creates a grow animation on hover. diff --git a/snippets/button-hover-shrink-animation.md b/snippets/button-hover-shrink-animation.md index 6ab2ed8a5..1883bcac8 100644 --- a/snippets/button-hover-shrink-animation.md +++ b/snippets/button-hover-shrink-animation.md @@ -1,6 +1,8 @@ --- title: Button shrink animation tags: animation,beginner +firstSeen: 2021-05-24T15:28:52+03:00 +lastUpdated: 2021-05-24T15:28:52+03:00 --- Creates a shrink animation on hover. diff --git a/snippets/checkerboard-pattern.md b/snippets/checkerboard-pattern.md index f9f933a8c..1011d1012 100644 --- a/snippets/checkerboard-pattern.md +++ b/snippets/checkerboard-pattern.md @@ -1,6 +1,8 @@ --- title: Checkerboard background pattern tags: visual,intermediate +firstSeen: 2021-01-11T09:51:43+02:00 +lastUpdated: 2021-01-11T09:51:43+02:00 --- Creates a checkerboard background pattern. diff --git a/snippets/circle.md b/snippets/circle.md index d790f2ce6..1747df6e6 100644 --- a/snippets/circle.md +++ b/snippets/circle.md @@ -1,6 +1,8 @@ --- title: Circle tags: visual,beginner +firstSeen: 2018-03-04T08:19:52+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a circular shape with pure CSS. diff --git a/snippets/clearfix.md b/snippets/clearfix.md index fab464576..84c434313 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -1,6 +1,8 @@ --- title: Clearfix tags: layout,beginner +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Ensures that an element self-clears its children. diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md index 4d523521c..7a4f31b00 100644 --- a/snippets/constant-width-to-height-ratio.md +++ b/snippets/constant-width-to-height-ratio.md @@ -1,6 +1,8 @@ --- title: Constant width to height ratio tags: layout,beginner +firstSeen: 2018-02-27T10:45:26+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Ensures that an element with variable `width` will retain a proportionate `height` value. diff --git a/snippets/counter.md b/snippets/counter.md index 4e0f31fdf..b7477afe4 100644 --- a/snippets/counter.md +++ b/snippets/counter.md @@ -1,6 +1,8 @@ --- title: Counter tags: visual,advanced +firstSeen: 2018-03-07T22:12:42+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a custom list counter that accounts for nested list elements. diff --git a/snippets/custom-checkbox.md b/snippets/custom-checkbox.md index 575f9c4fa..2609afd50 100644 --- a/snippets/custom-checkbox.md +++ b/snippets/custom-checkbox.md @@ -1,6 +1,8 @@ --- title: Custom checkbox tags: visual,animation,advanced +firstSeen: 2021-05-16T13:09:15+03:00 +lastUpdated: 2021-05-18T21:41:27+03:00 --- Creates a styled checkbox with animation on state change. diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md index 8215f7055..777d576ec 100644 --- a/snippets/custom-scrollbar.md +++ b/snippets/custom-scrollbar.md @@ -1,6 +1,8 @@ --- title: Custom scrollbar tags: visual,advanced +firstSeen: 2018-03-01T10:34:55+02:00 +lastUpdated: 2021-05-16T13:09:15+03:00 --- Customizes the scrollbar style for elements with scrollable overflow. diff --git a/snippets/custom-text-selection.md b/snippets/custom-text-selection.md index c2aaa99b6..39688ed60 100644 --- a/snippets/custom-text-selection.md +++ b/snippets/custom-text-selection.md @@ -1,6 +1,8 @@ --- title: Custom text selection tags: visual,beginner +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Changes the styling of text selection. diff --git a/snippets/disable-selection.md b/snippets/disable-selection.md index 1652e41e1..013015142 100644 --- a/snippets/disable-selection.md +++ b/snippets/disable-selection.md @@ -1,6 +1,8 @@ --- title: Disable selection tags: interactivity,beginner +firstSeen: 2018-02-26T19:09:58+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Makes the content unselectable. diff --git a/snippets/display-table-centering.md b/snippets/display-table-centering.md index 477d8f1dc..096bac856 100644 --- a/snippets/display-table-centering.md +++ b/snippets/display-table-centering.md @@ -1,6 +1,8 @@ --- title: Display table centering tags: layout,intermediate +firstSeen: 2018-03-30T01:15:54+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Vertically and horizontally centers a child element within its parent element, using `display: table`. diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md index 0767472ac..710047b3f 100644 --- a/snippets/donut-spinner.md +++ b/snippets/donut-spinner.md @@ -1,6 +1,8 @@ --- title: Donut spinner tags: animation,intermediate +firstSeen: 2018-02-27T17:32:35+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a donut spinner that can be used to indicate the loading of content. diff --git a/snippets/drop-cap.md b/snippets/drop-cap.md index 24e770318..d96d80f38 100644 --- a/snippets/drop-cap.md +++ b/snippets/drop-cap.md @@ -1,6 +1,8 @@ --- title: Drop cap tags: visual,beginner +firstSeen: 2018-10-13T07:47:30+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Makes the first letter of the first paragraph bigger than the rest of the text. diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md index 93a60f846..72e27da08 100644 --- a/snippets/dynamic-shadow.md +++ b/snippets/dynamic-shadow.md @@ -1,6 +1,8 @@ --- title: Dynamic shadow tags: visual,intermediate +firstSeen: 2018-03-05T13:51:36+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a shadow similar to `box-shadow` but based on the colors of the element itself. diff --git a/snippets/etched-text.md b/snippets/etched-text.md index 4f8304768..baa92db2d 100644 --- a/snippets/etched-text.md +++ b/snippets/etched-text.md @@ -1,6 +1,8 @@ --- title: Etched text tags: visual,intermediate +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates an effect where text appears to be "etched" or engraved into the background. diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md index 66d513163..f282eb405 100644 --- a/snippets/evenly-distributed-children.md +++ b/snippets/evenly-distributed-children.md @@ -1,6 +1,8 @@ --- title: Evenly distributed children tags: layout,intermediate +firstSeen: 2018-02-28T13:47:02+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Evenly distributes child elements within a parent element. diff --git a/snippets/fit-image-in-container.md b/snippets/fit-image-in-container.md index c38a59917..51c56141b 100644 --- a/snippets/fit-image-in-container.md +++ b/snippets/fit-image-in-container.md @@ -1,6 +1,8 @@ --- title: Fit image in container tags: layout,visual,intermediate +firstSeen: 2018-10-31T08:34:49+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Fits an positions an image appropriately inside its container while preserving its aspect ratio. diff --git a/snippets/flexbox-centering.md b/snippets/flexbox-centering.md index b78a9ac4e..45a5011fc 100644 --- a/snippets/flexbox-centering.md +++ b/snippets/flexbox-centering.md @@ -1,6 +1,8 @@ --- title: Flexbox centering tags: layout,beginner +firstSeen: 2018-03-03T11:57:27+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Horizontally and vertically centers a child element within a parent element using flexbox. diff --git a/snippets/floating-list-titles.md b/snippets/floating-list-titles.md index 487a1935a..3563e2d79 100644 --- a/snippets/floating-list-titles.md +++ b/snippets/floating-list-titles.md @@ -1,6 +1,8 @@ --- title: List with floating section headings tags: visual,advanced +firstSeen: 2020-08-18T15:44:01+03:00 +lastUpdated: 2021-02-05T10:21:38+02:00 --- Creates a list with floating headings for each section. diff --git a/snippets/fluid-typography.md b/snippets/fluid-typography.md index 3f3c1fcc8..2e34914f6 100644 --- a/snippets/fluid-typography.md +++ b/snippets/fluid-typography.md @@ -1,6 +1,8 @@ --- title: Fluid typography tags: visual,intermediate +firstSeen: 2021-05-16T11:23:05+03:00 +lastUpdated: 2021-05-16T11:23:05+03:00 --- Creates text that scales according to the viewport width. diff --git a/snippets/focus-within.md b/snippets/focus-within.md index 42dead83b..88b486da6 100644 --- a/snippets/focus-within.md +++ b/snippets/focus-within.md @@ -1,6 +1,8 @@ --- title: Focus Within tags: visual,interactivity,intermediate +firstSeen: 2018-10-23T03:58:13+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Changes the appearance of a form if any of its children are focused. diff --git a/snippets/full-width.md b/snippets/full-width.md index 6b222a341..da065ffa4 100644 --- a/snippets/full-width.md +++ b/snippets/full-width.md @@ -1,6 +1,8 @@ --- title: Full-width image tags: layout,intermediate +firstSeen: 2021-01-07T10:14:46+02:00 +lastUpdated: 2021-01-07T10:14:46+02:00 --- Creates a full-width image. diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md index 073ef7087..1e0e83a90 100644 --- a/snippets/fullscreen.md +++ b/snippets/fullscreen.md @@ -1,6 +1,8 @@ --- title: Fullscreen tags: visual,advanced +firstSeen: 2019-01-12T13:08:40+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Applies styles to an element when in fullscreen mode. diff --git a/snippets/gradient-text.md b/snippets/gradient-text.md index c9ef1f26f..79b9479f8 100644 --- a/snippets/gradient-text.md +++ b/snippets/gradient-text.md @@ -1,6 +1,8 @@ --- title: Gradient text tags: visual,intermediate +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Gives text a gradient color. diff --git a/snippets/grid-centering.md b/snippets/grid-centering.md index a6d9c6e56..592cdfb51 100644 --- a/snippets/grid-centering.md +++ b/snippets/grid-centering.md @@ -1,6 +1,8 @@ --- title: Grid centering tags: layout,beginner +firstSeen: 2018-03-03T12:13:59+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Horizontally and vertically centers a child element within a parent element using `grid`. diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index 9cc9535bb..1795da92d 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -1,6 +1,8 @@ --- title: Hamburger Button tags: interactivity,intermediate +firstSeen: 2019-10-10T03:49:38+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Displays a hamburger menu which transitions to a cross button on hover. diff --git a/snippets/height-transition.md b/snippets/height-transition.md index af844e334..c0e31cea4 100644 --- a/snippets/height-transition.md +++ b/snippets/height-transition.md @@ -1,6 +1,8 @@ --- title: Height transition tags: animation,intermediate +firstSeen: 2018-03-17T10:53:02+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Transitions an element's height from `0` to `auto` when its height is unknown. diff --git a/snippets/horizontal-scroll-snap.md b/snippets/horizontal-scroll-snap.md index 33a687fca..4005f1a60 100644 --- a/snippets/horizontal-scroll-snap.md +++ b/snippets/horizontal-scroll-snap.md @@ -1,6 +1,8 @@ --- title: Horizontal scroll snap tags: interactivity,intermediate +firstSeen: 2020-08-18T14:25:46+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a horizontally scrollable container that will snap on elements when scrolling. diff --git a/snippets/hover-additional-content.md b/snippets/hover-additional-content.md index 8a60568ae..9cb65702e 100644 --- a/snippets/hover-additional-content.md +++ b/snippets/hover-additional-content.md @@ -1,6 +1,8 @@ --- title: Show additional content on hover tags: visual,intermediate +firstSeen: 2020-08-18T16:40:23+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a card that displays additional content on hover. diff --git a/snippets/hover-pespective.md b/snippets/hover-pespective.md index 8d7131c9d..14041164a 100644 --- a/snippets/hover-pespective.md +++ b/snippets/hover-pespective.md @@ -1,6 +1,8 @@ --- title: Perspective transform on hover tags: animation,intermediate +firstSeen: 2021-05-17T13:58:04+03:00 +lastUpdated: 2021-05-17T13:58:04+03:00 --- Applies a perspective transform with a hover animation to an element. diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index a05102622..d5d68d167 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -2,6 +2,8 @@ title: Hover shadow box animation tags: animation,intermediate unlisted: true +firstSeen: 2018-03-06T23:41:55+02:00 +lastUpdated: 2021-01-04T12:30:40+02:00 --- Creates a shadow box around the text when it is hovered. diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 488f27e04..4ff30cf42 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -1,6 +1,8 @@ --- title: Hover underline animation tags: animation,advanced +firstSeen: 2018-02-28T13:19:22+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates an animated underline effect when the text is hovered over. diff --git a/snippets/image-hover-menu.md b/snippets/image-hover-menu.md index b509e8e24..e181c35c5 100644 --- a/snippets/image-hover-menu.md +++ b/snippets/image-hover-menu.md @@ -1,6 +1,8 @@ --- title: Menu on image hover tags: layout,animation,intermediate +firstSeen: 2020-04-20T19:15:11+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Displays a menu overlay when the image is hovered. diff --git a/snippets/image-hover-rotate.md b/snippets/image-hover-rotate.md index f59a19547..18ba56d42 100644 --- a/snippets/image-hover-rotate.md +++ b/snippets/image-hover-rotate.md @@ -1,6 +1,8 @@ --- title: Image rotate on hover tags: animation,visual,intermediate +firstSeen: 2020-04-20T18:36:11+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a rotate effect for the image on hover. diff --git a/snippets/image-mosaic.md b/snippets/image-mosaic.md index 7a0d1d8b8..6c1e0ff59 100644 --- a/snippets/image-mosaic.md +++ b/snippets/image-mosaic.md @@ -1,6 +1,8 @@ --- title: Responsive image mosaic tags: layout,intermediate +firstSeen: 2020-08-18T17:18:03+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a responsive image mosaic. diff --git a/snippets/image-overlay-hover.md b/snippets/image-overlay-hover.md index 126fed438..6f0b9d10b 100644 --- a/snippets/image-overlay-hover.md +++ b/snippets/image-overlay-hover.md @@ -1,6 +1,8 @@ --- title: Image overlay on hover tags: visual,animation,advanced +firstSeen: 2020-04-20T14:12:33+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Displays an image overlay effect on hover. diff --git a/snippets/input-with-prefix.md b/snippets/input-with-prefix.md index 3f56de2e5..8a1b82d90 100644 --- a/snippets/input-with-prefix.md +++ b/snippets/input-with-prefix.md @@ -1,6 +1,8 @@ --- title: Input with prefix tags: interactivity,visual,intermediate +firstSeen: 2020-10-14T14:16:57+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates an input with a visual, non-editable prefix. diff --git a/snippets/isometric-card.md b/snippets/isometric-card.md index 9fbb41de5..aa6205f19 100644 --- a/snippets/isometric-card.md +++ b/snippets/isometric-card.md @@ -1,6 +1,8 @@ --- title: Isometric card tags: visual,intermediate +firstSeen: 2021-05-17T14:04:52+03:00 +lastUpdated: 2021-05-17T14:04:52+03:00 --- Creates an isometric card. diff --git a/snippets/line-clamp.md b/snippets/line-clamp.md index 7c8723bf0..686d55343 100644 --- a/snippets/line-clamp.md +++ b/snippets/line-clamp.md @@ -1,6 +1,8 @@ --- title: Trim multiline text tags: layout,visual,intermediate +firstSeen: 2021-05-16T20:19:13+03:00 +lastUpdated: 2021-05-16T20:19:13+03:00 --- Limit multiline text to a given number of lines. diff --git a/snippets/masonry-layout.md b/snippets/masonry-layout.md index 3b9a2544f..d7fe47c0d 100644 --- a/snippets/masonry-layout.md +++ b/snippets/masonry-layout.md @@ -1,6 +1,8 @@ --- title: Masonry Layout tags: layout,advanced +firstSeen: 2019-12-11T02:19:05+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a masonry-style layout that is especially useful when working with images. diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md index 31149e7c9..1f77fed32 100644 --- a/snippets/mouse-cursor-gradient-tracking.md +++ b/snippets/mouse-cursor-gradient-tracking.md @@ -1,6 +1,8 @@ --- title: Mouse cursor gradient tracking tags: visual,interactivity,advanced +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2021-01-07T23:52:15+02:00 --- A hover effect where the gradient follows the mouse cursor. diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md index 2fea1b1c8..a2bc6cb73 100644 --- a/snippets/navigation-list-item-hover-and-focus-effect.md +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -1,6 +1,8 @@ --- title: Navigation list item hover and focus effect tags: visual,beginner +firstSeen: 2019-09-19T22:48:57+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a custom hover and focus effect for navigation items, using CSS transformations. diff --git a/snippets/offscreen.md b/snippets/offscreen.md index 4ecd1d11d..e36b9f79d 100644 --- a/snippets/offscreen.md +++ b/snippets/offscreen.md @@ -1,6 +1,8 @@ --- title: Offscreen tags: layout,visual,intermediate +firstSeen: 2018-03-30T18:50:31+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Completely hides an element visually and positionally in the DOM while still allowing it to be accessible. diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md index ebba58921..4568230f6 100644 --- a/snippets/overflow-scroll-gradient.md +++ b/snippets/overflow-scroll-gradient.md @@ -1,6 +1,8 @@ --- title: Overflow scroll gradient tags: visual,intermediate +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled. diff --git a/snippets/polka-dot-pattern.md b/snippets/polka-dot-pattern.md index 122066849..b2f37acb0 100644 --- a/snippets/polka-dot-pattern.md +++ b/snippets/polka-dot-pattern.md @@ -1,6 +1,8 @@ --- title: Polka dot background pattern tags: visual,intermediate +firstSeen: 2021-01-11T09:51:43+02:00 +lastUpdated: 2021-01-11T09:51:43+02:00 --- Creates a polka dot background pattern. diff --git a/snippets/popout-menu.md b/snippets/popout-menu.md index 64fd5845d..c26e96d25 100644 --- a/snippets/popout-menu.md +++ b/snippets/popout-menu.md @@ -1,6 +1,8 @@ --- title: Popout menu tags: interactivity,intermediate +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Reveals an interactive popout menu on hover/focus. diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index 4a1723c32..92dc2f358 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -1,6 +1,8 @@ --- title: Pretty text underline tags: visual,intermediate +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline. diff --git a/snippets/pulse-loader.md b/snippets/pulse-loader.md index 3eb9132f8..e9beac921 100644 --- a/snippets/pulse-loader.md +++ b/snippets/pulse-loader.md @@ -1,6 +1,8 @@ --- title: Pulse loader tags: animation,beginner +firstSeen: 2019-10-05T14:29:36+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a pulse effect loader animation using the `animation-delay` property. diff --git a/snippets/reset-all-styles.md b/snippets/reset-all-styles.md index 1636a855d..f0004f247 100644 --- a/snippets/reset-all-styles.md +++ b/snippets/reset-all-styles.md @@ -1,6 +1,8 @@ --- title: Reset all styles tags: visual,beginner +firstSeen: 2018-02-28T21:51:36+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Resets all styles to default values using only one property. diff --git a/snippets/responsive-layout-sidebar.md b/snippets/responsive-layout-sidebar.md index 8bf39e598..7d77f756a 100644 --- a/snippets/responsive-layout-sidebar.md +++ b/snippets/responsive-layout-sidebar.md @@ -1,6 +1,8 @@ --- title: Responsive layout with sidebar tags: layout,intermediate +firstSeen: 2020-09-16T18:54:56+03:00 +lastUpdated: 2020-09-16T18:54:56+03:00 --- Creates a responsive layout with a content area and a sidebar. diff --git a/snippets/rotating-card.md b/snippets/rotating-card.md index 53763352b..e3d844031 100644 --- a/snippets/rotating-card.md +++ b/snippets/rotating-card.md @@ -1,6 +1,8 @@ --- title: Rotating Card tags: animation,advanced +firstSeen: 2020-10-04T14:10:24+03:00 +lastUpdated: 2021-03-30T15:24:01+03:00 --- Creates a two sided card which rotates on hover. diff --git a/snippets/scroll-progress-bar.md b/snippets/scroll-progress-bar.md index 9e27590b1..78139030f 100644 --- a/snippets/scroll-progress-bar.md +++ b/snippets/scroll-progress-bar.md @@ -1,6 +1,8 @@ --- title: Scroll progress bar tags: animation,visual,intermediate +firstSeen: 2021-05-24T09:42:03+03:00 +lastUpdated: 2021-05-24T09:42:03+03:00 --- Creates a progress bar indicating the scroll percentage of the page. diff --git a/snippets/shape-separator.md b/snippets/shape-separator.md index 1df64f4f2..5a6aa4c5c 100644 --- a/snippets/shape-separator.md +++ b/snippets/shape-separator.md @@ -2,6 +2,8 @@ title: Shape separator tags: visual,intermediate unlisted: true +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2021-01-04T12:30:40+02:00 --- Uses an SVG shape to create a separator between two different blocks. diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md index 2eb262f58..9ff1eca0d 100644 --- a/snippets/sibling-fade.md +++ b/snippets/sibling-fade.md @@ -1,6 +1,8 @@ --- title: Sibling fade tags: interactivity,intermediate +firstSeen: 2018-03-05T10:17:23+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Fades out the siblings of a hovered item. diff --git a/snippets/staggered-animation.md b/snippets/staggered-animation.md index 42d6cfd0a..0902dc4a5 100644 --- a/snippets/staggered-animation.md +++ b/snippets/staggered-animation.md @@ -1,6 +1,8 @@ --- title: Staggered animation tags: animation,advanced +firstSeen: 2020-03-16T12:19:05+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a staggered animation for the elements of a list. diff --git a/snippets/sticky-list-titles.md b/snippets/sticky-list-titles.md index c4bde6e75..566f9f0f9 100644 --- a/snippets/sticky-list-titles.md +++ b/snippets/sticky-list-titles.md @@ -1,6 +1,8 @@ --- title: List with sticky section headings tags: visual,intermediate +firstSeen: 2020-08-18T15:44:01+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a list with sticky headings for each section. diff --git a/snippets/stripes-pattern.md b/snippets/stripes-pattern.md index 1bfccb976..0f6686d92 100644 --- a/snippets/stripes-pattern.md +++ b/snippets/stripes-pattern.md @@ -1,6 +1,8 @@ --- title: Stripes background pattern tags: visual,beginner +firstSeen: 2021-01-11T09:51:43+02:00 +lastUpdated: 2021-01-11T09:51:43+02:00 --- Creates a stripes background pattern. diff --git a/snippets/stylized-quotation-marks.md b/snippets/stylized-quotation-marks.md index fc398e6da..4a6d2a90b 100644 --- a/snippets/stylized-quotation-marks.md +++ b/snippets/stylized-quotation-marks.md @@ -1,6 +1,8 @@ --- title: Stylized quotation marks tags: visual,beginner +firstSeen: 2021-05-16T19:53:02+03:00 +lastUpdated: 2021-05-16T19:53:02+03:00 --- Customizes the style of inline quotation marks. diff --git a/snippets/system-font-stack.md b/snippets/system-font-stack.md index 598503304..97155d02f 100644 --- a/snippets/system-font-stack.md +++ b/snippets/system-font-stack.md @@ -1,6 +1,8 @@ --- title: System font stack tags: visual,beginner +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Uses the native font of the operating system to get close to a native app feel. diff --git a/snippets/text-backdrop-overlay.md b/snippets/text-backdrop-overlay.md index e2002ae29..4909cc6eb 100644 --- a/snippets/text-backdrop-overlay.md +++ b/snippets/text-backdrop-overlay.md @@ -1,6 +1,8 @@ --- title: Image text overlay tags: visual,beginner +firstSeen: 2020-08-18T15:07:32+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Displays a text on top of an image using an overlay. diff --git a/snippets/tile-layout-using-inline-block.md b/snippets/tile-layout-using-inline-block.md index 4eafcd486..af2d8d10e 100644 --- a/snippets/tile-layout-using-inline-block.md +++ b/snippets/tile-layout-using-inline-block.md @@ -1,6 +1,8 @@ --- title: 3-tile layout tags: layout,beginner +firstSeen: 2019-10-02T09:51:59+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Aligns items horizontally using `display: inline-block` to create a 3-tile layout. diff --git a/snippets/toggle-switch.md b/snippets/toggle-switch.md index a92a2fff5..dea62fcc7 100644 --- a/snippets/toggle-switch.md +++ b/snippets/toggle-switch.md @@ -1,6 +1,8 @@ --- title: Toggle switch tags: visual,interactivity,beginner +firstSeen: 2018-10-03T08:55:20+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a toggle switch with CSS only. diff --git a/snippets/transform-centering.md b/snippets/transform-centering.md index f33411827..dbac86181 100644 --- a/snippets/transform-centering.md +++ b/snippets/transform-centering.md @@ -1,6 +1,8 @@ --- title: Transform centering tags: layout,beginner +firstSeen: 2018-03-30T17:59:28+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Vertically and horizontally centers a child element within its parent element using CSS transforms. diff --git a/snippets/triangle.md b/snippets/triangle.md index 23d865d54..80e779b4a 100644 --- a/snippets/triangle.md +++ b/snippets/triangle.md @@ -1,6 +1,8 @@ --- title: Triangle tags: visual,beginner +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2021-01-07T23:52:15+02:00 --- Creates a triangular shape with pure CSS. diff --git a/snippets/truncate-text-multiline.md b/snippets/truncate-text-multiline.md index 866dad5d1..9f2b153fc 100644 --- a/snippets/truncate-text-multiline.md +++ b/snippets/truncate-text-multiline.md @@ -1,6 +1,8 @@ --- title: Truncate multiline text tags: layout,intermediate +firstSeen: 2019-01-17T07:42:44+02:00 +lastUpdated: 2021-01-07T23:52:15+02:00 --- Truncates text that is longer than one line. diff --git a/snippets/truncate-text.md b/snippets/truncate-text.md index 7ab9915aa..18d9dd62a 100644 --- a/snippets/truncate-text.md +++ b/snippets/truncate-text.md @@ -1,6 +1,8 @@ --- title: Truncate text tags: layout,beginner +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Truncates text that is longer than one line, adding an ellipsis at the end (`…`). diff --git a/snippets/typewriter-effect.md b/snippets/typewriter-effect.md index 50633dc78..1aed7692a 100644 --- a/snippets/typewriter-effect.md +++ b/snippets/typewriter-effect.md @@ -1,6 +1,8 @@ --- title: Typewriter effect tags: animation,advanced +firstSeen: 2021-05-24T16:03:40+03:00 +lastUpdated: 2021-05-24T16:03:40+03:00 --- Creates a typewriter effect animation. diff --git a/snippets/vertical-scroll-snap.md b/snippets/vertical-scroll-snap.md index ea8ed5bab..31fdc11c6 100644 --- a/snippets/vertical-scroll-snap.md +++ b/snippets/vertical-scroll-snap.md @@ -1,6 +1,8 @@ --- title: Vertical scroll snap tags: interactivity,intermediate +firstSeen: 2020-08-18T14:25:46+03:00 +lastUpdated: 2020-08-18T14:25:46+03:00 --- Creates a scrollable container that will snap on elements when scrolling. diff --git a/snippets/zebra-striped-list.md b/snippets/zebra-striped-list.md index 2ac0a085a..c5e37793f 100644 --- a/snippets/zebra-striped-list.md +++ b/snippets/zebra-striped-list.md @@ -1,6 +1,8 @@ --- title: Zebra striped list tags: visual,beginner +firstSeen: 2018-10-31T08:19:06+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a striped list with alternating background colors. diff --git a/snippets/zig-zag-pattern.md b/snippets/zig-zag-pattern.md index 6b827b2b8..9c7cc867a 100644 --- a/snippets/zig-zag-pattern.md +++ b/snippets/zig-zag-pattern.md @@ -1,6 +1,8 @@ --- title: Zig zag background pattern tags: visual,advanced +firstSeen: 2021-01-11T09:51:43+02:00 +lastUpdated: 2021-01-11T09:53:16+02:00 --- Creates a zig zag background pattern. diff --git a/snippets/zoomin-zoomout-animation.md b/snippets/zoomin-zoomout-animation.md index 09ae96be2..549808690 100644 --- a/snippets/zoomin-zoomout-animation.md +++ b/snippets/zoomin-zoomout-animation.md @@ -1,6 +1,8 @@ --- title: Zoom in zoom out animation tags: animation,beginner +firstSeen: 2020-10-05T21:42:14+03:00 +lastUpdated: 2021-04-02T21:49:01+03:00 --- Creates a zoom in zoom out animation.