[{"name":"clip-shapes","description":"Collection of CSS Shapes with clean and reusable code.\n\nBased on the\n[The Modern Guide For Making CSS Shapes](https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/)\narticle at Smashing Magazine by Temani Afif.","modules":[{"name":"hexagon","description":"Clipping hexagon"},{"name":"hexagon-alt","description":"Clipping hexagon (alternative version)"},{"name":"octagon","description":"Clipping octagon"},{"name":"star","description":"Clipping star"}]},{"name":"layouts","description":"Common layout patterns using modern techniques like grid and flex. by\n[Óscar Otero](https://oscarotero.com)","modules":[{"name":"basic-grid","description":"A basic grid with auto-fill"},{"name":"break-out-wrapper","description":"Wrapper that allows to add full width elements\n\nInspired by https://css-irl.info/breaking-out-of-a-central-wrapper/"},{"name":"center-body","description":"A basic layout to center in the window all content horizontally and vertically."},{"name":"center-wrapper","description":"Center wrapper inspired from Kevin Powell's \"Start over-engineering your CSS\" (CSS Day 2024)\nhttps://www.youtube.com/watch?v=k_3pRxdv-cI"}]},{"name":"loaders","description":"Collection of CSS pure loaders, from CSS-Tricks serie of articles. By\n[Temani Afif](https://css-tricks.com/author/afiftemani/)","modules":[{"name":"3-dots","description":"Loader with 3 dots\n\nMore info: https://css-tricks.com/single-element-loaders-the-dots/"},{"name":"3-lines","description":"Loader with 3 lines\n\nMore info: https://css-tricks.com/single-element-loaders-the-bars/"}]},{"name":"nice-effects","description":"Collection of basic CSS efects","modules":[{"name":"image-overlay","description":"A way to show a gradient overlay to improve the legibility of the text under a image\n\nMore info: https://www.smashingmagazine.com/2024/01/css-border-image-property/"},{"name":"layered-shadow","description":"Create beautiful shadows by applying different layers\n\nMore info: https://www.joshwcomeau.com/css/designing-shadows/"},{"name":"rounded-tab","description":"Rounded tab\n\nMore info: https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/"},{"name":"text-with-background","description":"A way to use an image instead of plain color to fill a text."}]},{"name":"normalize","description":"Normalize browsers' default style by [Óscar Otero](https://oscarotero.com)","modules":[{"name":"focus-visible","description":"How to show different focus styles depending on whether\nthe element is focused with a keyboard or mouse/touch.\n\nBased on https://css-tricks.com/the-focus-visible-trick/"},{"name":"forms","description":"Normalize CSS for inputs and form-related stuff\n\nSome taken from https://github.com/sindresorhus/modern-normalize"},{"name":"normalize","description":"Generic CSS normalize\n\nSome taken from https://github.com/sindresorhus/modern-normalize"},{"name":"notch","description":"The \"notch\" is the shape that Apple added to the iPhoneX creating\na white bar on de edges. This guide allows to remove that effect\nand extend the webpage to the entire screen.\n\nMore info: https://css-tricks.com/the-notch-and-css/"}]},{"name":"tricks","description":"Collection of CSS tricks and effects\n\nby [Óscar Otero](https://oscarotero.com/)","modules":[{"name":"animated-underline","description":"Hover efect: animated underline\n\nInspired from: https://css-tricks.com/cool-hover-effects-that-use-css-text-shadow/"},{"name":"editable-style","description":"Make your `<style>` block elements visible and editable in your browser\n\nMore info: https://css-tricks.com/books/greatest-css-tricks/editable-style-blocks/"},{"name":"fade-truncation","description":"Multiline text truncation using fade effect\n\nMore info: https://css-tricks.com/recreating-mdns-truncated-text-effect/\nVersion using mask: https://codepen.io/t_afif/pen/jOzamEB"},{"name":"scroll-shadows","description":"Use shadows to reveal scroll with more info\n\nMore info: https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/"},{"name":"transition-height-auto","description":"Transitioning to Height Auto: a solution using grid\n\nMore info: https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/"}]},{"name":"ui-normalize","description":"Normalize browsers' default style for user interfaces and design systems\n\nby [Óscar Otero](https://oscarotero.com)","modules":[{"name":"button","description":"Basic styles to customize a `<button>` element"},{"name":"checkbox","description":"A way to custom-style the `<input type=\"checkbox\">` element"},{"name":"progress","description":"Basic styles to normalize the appearance of the `<progress>` element"},{"name":"radio","description":"A way to custom-style the `<input type=\"radio\">` element"},{"name":"select","description":"A way to custom-style the `<select>` element"},{"name":"slider","description":"A way to custom-style the `<input type=\"range\">` element"},{"name":"switch","description":"A way to create a switch from a `<button role=\"switch\">` element"}]}]