CSS
Magic of CSS & CSS for JS Developers are nice courses. Every Layout is neat overview of most common layouts. Modern CSS Reset, Understanding Layout Algorithms & Defensive CSS are good reads. Ahmad Shadeed's blog is incredible.
Often use these CSS loaders. Open Props are amazing. Trying out new features now from recent State of CSS.
Recently been loving using UnoCSS. Be the browser’s mentor, not its micromanager is a must watch on building responsive websites.
Nice templates
Code
<!-- unset styles -->
all: unset
Notes
- Grid for layout, Flexbox for components
- ID's are unique.
- Each element can have only one ID.
- Each page can have only one element with that ID.
- Classes are NOT unique.
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.
- The DOM is just a tree of objects. CSS selects parts of that tree and applies attributes to those objects. It's all just code, it's just a shorthand for adding a bunch of attributes to a bunch of objects.
- Always design your CSS format from the inside out
- format the elements within their container so that they look correct regardless of the size of the container.
- similarly format those containers within their own containers
- repeat until
<body>is the containers - never use absolute widths (px, in, cm, etc.) for anything
- body tag takes up the whole width and height of the browser screen.
- Hex colors are super common... and inconvenient as heck. Try hsl instead.
- If you make it a rule to always use attributes instead of classes to apply CSS to element states (not variants), you’ll force yourself to make your app more accessible (Similar to React Testing Library). If you’re using CSS-in-JS this also helps create more static styles.
- I feel like negative margins are probably the most under-used layout feature. Layouts become so much more manageable when an element's size in the document flow is decoupled from its visible size on screen.
overflow: clipis faster thanoverflow: hidden- If your site has a dark theme, make sure to set:
:root {color-scheme: dark}So scroll bars are also dark.
Links
- Code Guide - Standards for developing consistent, flexible, and sustainable HTML and CSS.
- CSS Reference - Free visual guide to the most popular CSS properties. (Code)
- CSS Blocks - High performance, maintainable stylesheets.
- Opticss - CSS Optimizer.
- CSS Puns
- Magic of CSS (Code)
- Min - World's smallest (995 bytes) CSS framework.
- Emotion - Performant and flexible CSS-in-JS library.
- Why We Use Styled Components at Decisiv
- The case for CSS modules - Mark Dalgleish
- Michael Chan - Inline Styles: themes, media queries, contexts, & when it's best to use CSS (2015)
- Understanding the CSS box model for inline elements
- astroturf - An "artificial" css-in-js for those that want it all.
- Pesticide - Kill your CSS layout bugs. (Code)
- Spectre - Lightweight, Responsive and Modern CSS Framework.
- Tachyons - Functional CSS for humans.
- CSS Animation 101
- Understanding static and relative positioning
- Tailwind utility-first CSS framework
- CSStype - Strict TypeScript and Flow types for style based on MDN data.
- normalize.css - Modern alternative to CSS resets.
- app-reset.css - Minimal set of reset CSS specifically for web applications.
- Julia Muzafarova CSS Pens
- CSS Modules - Documentation about css-modules.
- nano-css - CSS-in-JS library that you can actually use in production. Motto of nano-css is simple: create the smallest possible CSS-in-JS library and provide all features of any other library through addons.
- Why I Write CSS in JavaScript (2019)
- Styled System - Responsive, theme-based style props for building design systems with React.
- Rebass - React primitive UI components built with styled-system..
- TypeStyle - Making CSS type safe.
- The Three Tenets of Styled System (2019)
- DropCSS - Simple, thorough and fast unused-CSS cleaner.
- CSS Standardization - The State of the Web with Jen Simmons (2019)
- Water.css - Just-add-css collection of styles to make simple websites just a little nicer. (HN)
- Loaders.css - Delightful and performance-focused pure css loading animations.
- Artem Sapegin: Custom CSS is the Path to Inconsistent UI (2018)
- Learn CSS Layout the pedantic way (Code)
- CSSFX - Beautifully simple click-to-copy CSS effects. (Code)
- CSS Working Group Wiki
- CSS Working Group Editor Drafts (Code)
- CSS Houdini - Low-level APIs that exposes parts of the CSS engine. (HN)
- CSS Houdini Experiments
- CSS-Only Chat - Truly monstrous async web chat using no JS whatsoever on the frontend.
- Theme UI - Build consistent, themeable React UIs based on design system constraints and design tokens.
- Nice comment on problems & solutions to writing CSS
- tachyons tldr
- A real-life journey into the opinionated world of 'utility-first' CSS (2018)
- CSS and Scalability (2016)
- cssdb - Comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
- Relearn CSS layout: Every Layout - How to better harness the built-in algorithms that power browsers and CSS. (HN) (Blog)
- Basscss - Low-level CSS Toolkit.
- PurgeCSS - Remove unused css.
- CSS Remedy - Start your project with a remedy for the technical debt of CSS.
- CSS Camera - New way to see a web page with CSS3 3D transform.
- Devices.css - Modern devices in pure CSS.
- clean-css - Fast and efficient CSS optimizer for Node.js platform and any modern browser.
- 25 Days of CSS Animations: Teaching Myself CSS through Motion Design (2019)
- TACHYONS theme editor
- Starter files, final projects and FAQ for Advanced CSS course
- Pure CSS – Lace (HN)
- Pure CSS Drawing Essentials - Top 5 CSS properties I rely on to produce Pure CSS art.
- Artem Sapegin: Say Hello to Box, Flex and Stack: Layouts in the Component Era (2019)
- CSS Utility Classes and "Separation of Concerns" (2017) (HN)
- Роман Дворнов — CSS definition syntax (Russian)
- The Power (and Fun) of Scope with CSS Custom Properties (2019)
- CSS Architecture for Modern JavaScript Applications (2019)
- Browser Default Styles
- The box model is not layout (2019)
- MDN CSS Layout
- Smooth CSS shadows generator
- CSS Layout - Collection of popular layouts and patterns made with CSS. (Code)
- CSS Protips - Collection of tips to help take your CSS skills pro.
- Focus Overlay - Library for creating animated overlays on focused elements.
- Six Questions to Understand the CSS Box Model (2017)
- High-level advice and guidelines for writing sane, manageable, scalable CSS
- CSS Circles (2019)
- CSShake - CSS classes to move your DOM.
- JSS - Authoring tool for CSS which uses JavaScript as a host language.
- List of 300+ CSS properties
- Magical Rainbow Gradients with CSS Houdini and React Hooks (2020)
- Shapy - Gradient shape editor that helps you discover and explore the power of CSS gradients. (Code)
- CSS clip-path maker
- CSS Scroll Shadows - Adjust the controls and see the CSS scroll shadows change. (Code)
- CSS Triangle Generator
- Tint & Shade Generator - Display tints and shades of a given hex color in 10% increments.
- Writing efficient CSS selectors (2011)
- A Modern CSS Reset (2019) (Code)
- The CSS Cascade - How browsers resolve competing CSS styles.
- Intrinsic Sizing In CSS (2020)
- CSS in Real Life blog
- Old CSS, new CSS (2020) (HN)
- Learn CSS Positioning
- CSS Triggers
- Bounce.js - Tool and JS library that lets you create beautiful CSS3 powered animations. (Code)
- Selectors Explained - Translate CSS selectors into plain English. (Code)
- Simpsons in CSS (Code) (HN)
- CSS-Element-Queries - High-speed element dimension/media queries in valid css. (Code)
- Hint.css - Pure CSS tooltip library for your lovely websites. (Code)
- Intrinsic Sizing In CSS (2020)
- CSS Zen Garden (HN)
- CSS3 Patterns Gallery (Code)
- All CSS named colors on a single page (Code)
- CSS Findings From The New Facebook Design (2020)
- MoreToggles.css - Pure CSS library that provides you with a variety of nice-looking toggles. (Code)
- Styling Ordered Lists with CSS Counters (2020)
- postcss-trash-killer - Postcss plugin which wil be remove all unused css.
- Solved with CSS! Logical Styling Based on the Number of Given Elements (2018)
- CSS Doodle - Web component for drawing patterns with CSS. (Code)
- Sakura - Minimal classless css framework / theme.
- Sakura Bookmarklet - Enable Sakura.css on any website.
- Skeleton - Dead Simple, Responsive Boilerplate for Mobile-Friendly Development. (Code)
- Do We Actually Need Specificity In CSS? (2015) (HN)
- The Simplicity of Specificity (2015)
- Concentric-CSS - Standard order for CSS properties that starts at the outer edge of the box model and moves inward.
- Pattern.css - CSS only library to fill your empty background with beautiful patterns. (Code) (HN)
- Watched Box - Easiest way to get working with ResizeObserver and creating container queries with JavaScript.
- Hamburgers - Tasty CSS-animated Hamburgers. (Code)
- Hero Generator - Create a nice hero image for your site or app. (Code)
- PrefaceCSS - CSS Boilerplate for minimalists. (Code)
- You Need to Know CSS - CSS tricks web developers need to know. (Code)
- Pure CSS Landscape - An Evening in Southwold (Video)
- Modern CSS Solutions (Code)
- A Single Div - CSS drawings with only one HTML element. (Code)
- CSSWG meeting minutes
- new.css - Classless CSS framework to write modern websites using only HTML. (Code) (HN) (Night Theme)
- CSS Refresher Notes
- Destyle.css - Opinionated reset stylesheet that provides a clean slate for styling your html. (Code)
- Fast Browser Animations (2020)
- Digital nesting - Devon's collection of custom CSS.
- React CSS Loaders - Collection of pure CSS React loading components. (Code)
- css-select - CSS selector compiler/engine.
- Introducing CSS Scroll Snap Points (2019)
- Ask an expert: Why is CSS . . . the way it is? (HN)
- Glue - Simple command line tool to generate CSS sprites.
- stylis.js - Light–weight CSS Preprocessor.
- An Overview of CSS: An Art, a Science, a Nightmare (2019)
- Basic.css - Classless CSS Starter File. (HN) (Code)
- Tufte CSS - Simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. (Code)
- PurifyCSS - Remove unused CSS. Also works with single-page apps.
- Adding dark mode support (2020)
- SelectorGadget - Point and click CSS selectors. (Code)
- The Mad Magazine Fold-In Effect in CSS (2020) (HN)
- CUBE CSS - CSS methodology that’s orientated towards simplicity, pragmatism and consistency. (Article)
- Awesome CSS Variables
- Critical-ish CSS Extraction (2020)
- 7 CSS properties I had no idea about (2020)
- concrete.css - Simple and to the point CSS microframework. (Web)
- Sass - Extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more.
- Color Theme Switcher (2020)
- CSS Tips for New Devs (2020)
- The Cognitive Complexity of CSS (2020)
- Drop-in Minimal CSS - Overview of barebones drop-in minimal CSS boilerplate frameworks. (Code)
- CSS Road Guide
- paper.css - Lightweight, modern CSS to add some flair to your web-things. (Code)
- Learn CSS From Scratch course
- CSS Design Awards
- The Surprising Things That CSS Can Animate (2020)
- A Complete Guide to Dark Mode on the Web (2020)
- Uncommon CSS Properties (2020)
- 1-Line Layouts - 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be. (Article) (Lobsters)
- The CSS Standardization Process (HN)
- CSS News July 2020
- ZeroDivs - UI editor for single-element CSS illustrations. (HN)
- Style Stage - Modern CSS showcase styled by community contributions. (Code) (Article)
- Learn CSS with CSS For Designers - Practical guide to CSS teaches you everything you need to know and nothing you don’t.
- Things I Wish I’d Known About CSS (HN)
- css-media-vars - Brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS. (HN) (Code)
- Renderization of Conic gradients (2020)
- PostCSS 100vh Fix - PostCSS plugin to fix height/min-height: 100vh on iOS.
- Infinite Scroll without Layout Shifts (2020)
- Centering in CSS: A Complete Guide
- awsm.css - Simple CSS library for semantic HTML markup.
- content-visibility - New CSS property that boosts your rendering performance.
- Nailing the Perfect Contrast Between Light Text and a Background Image (2020)
- The Languages Which Almost Became CSS
- Incomplete List of Mistakes in the Design of CSS
- CSS Specificity calculator
- How I Structure My CSS (for Now) (2020)
- Gradient Magic - Fantastic and Unique CSS Gradients.
- CSS Weekly
- A Lightweight Masonry Solution (2020) (CodePen)
- Enhancing User Experience With CSS Animations
- Make your first CSS art (2020)
- The Thing With Leading in CSS (2020)
- Bahunya - 10KB classless CSS framework with responsive typography, navbar, syntax highlighting, etc. (Web)
- Flowing Text Around Images (Lobsters)
- Debugging CSS - Book with lots of tips and techniques on how to debug CSS the right way with easy and studied methods.
- Learn CSS Centering
- blocks.css - Add some dimension to your page with blocks. (Code)
- Making a Rotating Icon Button in React (2020)
- Finding The Root Cause of a CSS Bug (2020)
- CSS Demystified - Start writing CSS with confidence.
- A Complete Guide to CSS Media Queries (2020)
- Custom bullets with CSS ::marker (2020)
- Easing Functions Cheat Sheet (Code)
- Keyboard-Only Focus
- :focus-visible Is Here (2020)
- In Defense of Utility-First CSS (2018)
- PureCSS Character (Code)
- Balloon.css - CSS tooltips for HTML elements. (Code)
- Blunt - CSS framework strictly for layouts.
- How to Create a Realistic Motion Blur with CSS Transitions (2020)
- Link hover animation (circled)
- min(), max(), and clamp(): three logical CSS functions to use today (2020)
- CSS Buttons - Pure HTML & CSS Buttons For Web Development. (Code)
- The State of CSS (Code)
- CSS Background Patterns
- Manipulating Colors With CSS Variables and HSL (2020)
- CSS for JavaScript Developers - Online course that teaches the fundamentals of CSS for React/Vue devs. (How it was made)
- Custom CSS via Serverless Proxy (2020)
- How to make CSS Animations (2020)
- Everything I Have Done to Make CSS Wizardry Fast
- Simple Start to CSS variables (2020)
- PostCSS CSS Variables - PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation.
- no.css - Tiny CSS framework with almost no classes and some pure CSS effects.
- 16 CSS Secrets to improve Web Designs (2020)
- Hell Yes! CSS! - CSS Zines.
- Easing Gradients - Create and preview your own easing gradients in CSS. (Code)
- CSSTree - Tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations.
- CSS Scan Pro - Re-imagined Devtools for web design.
- The Rules of Margin Collapse (2020)
- CSS Scroll Snap (2020)
- Houdini.how (HN) (Code)
- Panzoom - Library for panning and zooming elements using CSS transforms.
- Centering in CSS (2020) (HN)
- modern-normalize - Normalize browsers' default style.
- PostHTML Inline CSS - PostHTML plugin for inlining CSS to style attrs.
- Simple.css - Classless CSS framework. (Code)
- css-what - CSS selector parser.
- PostCSS Language Support - Support for modern and experimental CSS within Visual Studio Code.
- Custom Properties as State (2021) (HN)
- CSS-Tricks Conferences (Code)
- Natural Selection - Collection of best-practice CSS selectors.
- HStack and VStack in CSS - CSS layout components that (basically) horizontally and vertically stack anything.
- State of CSS 2020
- Awesome CSS Frameworks
- RFS - Unit resizing engine which was initially developed to resize font sizes.
- Understanding Clip Path in CSS (2021)
- Inactive CSS - List of rules for when CSS properties have no effect.
- Classcat - Build a space-separated class attribute quickly.
- CSS: prefers-color-scheme (2021)
- How to select elements that are not children of other elements in CSS (2021)
- Things You Can Do With CSS Today (2021)
- Meanderer - Micro-library for scaling CSS motion path strings.
- SmolCSS - Minimal snippets for modern CSS layouts and components. (Code)
- Fluid typography with CSS clamp (2021)
- CSS Creatures (Code)
- minireset.css - Tiny modern CSS reset. (Web)
- Getting Deep into CSS Shadows
- The Beauty Of Tiny Enhancements In CSS (2021)
- An interactive guide to CSS transitions (2021) (HN)
- Diving into the ::before and ::after Pseudo-Elements (2021)
- AVO: BEM Dialect Using Data Attributes
- The Importance of Learning CSS (2021) (HN)
- CSS Auditing Tools (2021)
- Exploring @property and its Animating Powers (2021)
- Digging Into CSS Logical Properties (2021)
- CSS Generators (2021)
- Debugging layout shifts (2021)
- Charts.css - CSS data visualization framework. (HN) (Code)
- Creating Directionally Lit 3D Buttons with CSS (2021)
- Smooth Shadow - Make a smooth shadow.
- Not Your Typical Horizontal Rules (2021)
- Handling Text Over Images in CSS (2021)
- cool.css - Last CSS framework I'll (hopefully) ever have to build. (Code)
- Animating Underlines with CSS (2021)
- Grid Component - Component that can arrange items according to the type of grids.
- Tools for Auditing CSS (2021)
- Container Queries are actually coming (2021)
- Building a Magical 3D button with HTML and CSS (2021) (HN) (Tweet)
- Dark mode in 5 minutes, with inverted lightness variables (2021)
- How to Improve CSS Performance (2021)
- 100 underline/overlay animations | The ultimate CSS collection (2021)
- My Website is More Responsive Than Yours (2021)
- Say Hello To CSS Container Queries (2021) (Tweet)
- Awesome Container Queries
- Overflow Issues In CSS (2021)
- Float an Element to the Bottom Corner (2021)
- Transition.css - Easy transitions with clip-path. (Code)
- Shortstack - Minimal Rollup + PostCSS modern syntax starter template.
- CSS Tips (2020) (HN)
- CSS Container Query Proposal & Explainer
- CQFill - Polyfill for CSS Container Queries.
- A Complete Guide to Custom Properties (2021)
- Tacit - CSS Framework for Dummies, Without Classes. (Web)
- How to Create Actions for Selected Text With the Selection API (2021)
- Book insights: The New CSS Layout (2021)
- CSS Card with hover animation and mobile fallback (2021)
- CSS Hell - Collection of common CSS mistakes, and how to fix them. (Code)
- Component-level art direction with CSS Container Queries (2021)
- Wallace CLI - Pretty CSS analytics in your terminal.
- No, Utility Classes Aren't the Same As Inline Styles (2021)
- Learn CSS - Evergreen CSS course and reference to level up your web styling expertise. (HN)
- How to Favicon in 2021
- 25 Years of CSS (2021) (HN)
- CSS Container Queries: Use-Cases And Migration Strategies (2021)
- Parsel - Tiny, permissive CSS selector parser. (Web)
- What the heck, z-index? - Exploring stacking contexts, one of the most misunderstood mechanisms in CSS.
- Critical - Extract & Inline Critical-path CSS in HTML pages.
- CSS Layout Generator
- PostCSS Focus - PostCSS plugin to add :focus selector to every :hover for keyboard accessibility.
- CSSBootcamp.com - Structured, Guided, Curriculum for CSS.
- Animate.css - Cross-browser library of CSS animations. (Code)
- Real-world CSS vs. CSS-in-JS performance comparison (2021) (HN)
- Glassmorphism CSS Generator
- Glass UI - CSS UI library based on the glassmorphism design principles.
- Miriam Suzanne - Container Queries & The Future of CSS (2021)
- CSS Café - YouTube
- Keeping it simple with CSS that scales – Andy Bell (2020)
- Trigonometry in CSS and JavaScript: Beyond Triangles (2021)
- What does 100% mean in CSS? (HN)
- 83 Beautiful CSS buttons examples
- Confusing things about CSS still (2021)
- CSS: Avoid horizontal scrolling (2021)
- The Large, Small, and Dynamic Viewports (2021)
- My First CSS (2021) - What I Wish I Knew About CSS When Starting Out As A Frontender. (HN)
- CSS Nesting Module
- CSS areas people struggle with the most (2021)
- Favorite “quick wins” with CSS
- Aligning a Button Label Vertically (2021)
- CSS Foundations Online Workshop - Emma Bostian (2021) (Tweet)
- sanitize.css - CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults. (Web)
- Never remove CSS outlines (2013)
- PaperCSS - Less formal CSS framework. (Code)
- The World of CSS Transforms
- An Interactive Guide to CSS Keyframe Animations
- You want enabling CSS selectors, not disabling ones (2021) (HN)
- Building A Stepper Component (2021)
- Pollen - Library of CSS variables inspired by TailwindCSS. (Docs) (HN)
- Less Absolute Positioning With Modern CSS (2021)
- Grainy Gradients playground - CSS Noise gradient generator. (Code)
- Designing Beautiful Shadows in CSS (2021) (HN)
- Grainy Gradients (2021)
- CSS Container Query Units (2021)
- How I Learnt To Stop Worrying And Love Animating The Box Model (2021)
- Shadow Roots and Inheritance (2021)
- Awesome CSS Learning - Awesome list limited to the best CSS learning resources.
- PostCSS Hover Media Feature - Extracts and wraps rules containing :hover pseudo-classes in @media (hover: hover) {} media queries.
- Simplifying Form Styles With accent-color (2021)
- Dynamic CSS color themes with similar contrasts (2021)
- How To Build An Expandable Accessible Gallery (2021)
- AVIF in CSS - PostCSS plugin to use AVIF in CSS background.
- A Guide To CSS Debugging (2021)
- CSS to XPath
- Conditional Border Radius In CSS (2021)
- Smart CSS Solutions For Common UI Challenges (2021)
- 100 bytes of CSS to look great everywhere to style text
- New Simple and Lighter CSS Reset - Removes all the default styles which we are getting on specific HTML elements except the ‘display’ property. (Web) (Article)
- Pylon - Declarative layout primitives for CSS & HTML. (Code)
- What do I need to read to be a great at CSS? (2021) (HN)
- The strangely difficult problem of drawing a box around text (HN)
- Evaluating Clever CSS Solutions (2021)
- GUI Challenges - YouTube (Code)
- Squircle CSS Houdini - Tiny CSS Houdini module that allows to add a squircle shape to HTML elements.
- CSS Destructured Course
- Improving CSS Architecture with Cascade Layers, Container Queries, Scope, by Miriam Suzanne (2021)
- Complete Guide to CSS Flex and Grid Book
- CSS Tricks to Create that Dark Futuristic Web3 Look (2021)
- Bold on Hover... Without the Layout Shift (2020)
- Reasoning about Declarative Styles (2020)
- CSS Shadow Palette Generator (Article) (HN)
- Layout patterns - Collection of layout patterns built using modern CSS APIs.
- The new responsive design (2021)
- Discover CSS polygon shapes (Code)
- Parallax Powered by CSS Custom Properties (2021)
- 1-Line CSS Layouts (HN)
- Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode (2021) (Article)
- CSSBattle - CSS code-golfing game.
- CSS Animation: translate3d, backdrop-filter and custom tags (2021)
- My Custom CSS Reset (2021) (HN)
- Container Query Polyfill
- parcel-css - CSS parser, transformer, and minifier written in Rust. (Article) (HN)
- Two flexbox & grid behaviors most people don't know about (2021)
- postcss-rs - Fast and 100% API compatible postcss replacer, built in Rust.
- A Handy Little System for Animated Entrances in CSS (2021)
- Responsive Layouts, Fewer Media Queries (2021)
- Popular third-party library everyone's heard of that you style by overriding their CSS/targeting their classes
- Improving performance with Islands Architecture and PostCSS (2021) (Tweet)
- Open Props - CSS custom properties to help accelerate adaptive and consistent design. (Code) (Tweet) (Video) (Video)
- The fundamentals of CSS layout | Workshop (2021)
- img2css - Convert any image to pure CSS. (Code)
- How to implement dragging, constraints, and rubber banding in CSS
- Defensive CSS (2021) (HN)
- NWSAPI - Fast CSS Selectors API Engine.
- Pure CSS content animation
- Responsive iframes with the CSS aspect-ratio property (2021)
- CSS Tokenizer - Tokenize CSS according to the CSS Syntax.
- EsifyCSS - Generates ES modules from CSS.
- zss - CSS layout engine and document renderer, written in Zig.
- Standardizing Focus Styles With CSS Custom Properties (2021)
- Right-to-left Styling in CSS
- Fancy Border Radius Generator - When you use eight values specifying border-radius in CSS, you can build organic looking shapes. (Code)
- Wide variety of animations done using only CSS
- Pico.css - Minimal CSS Framework for semantic HTML. (Code) (HN)
- DoodleCSS - Simple hand drawn HTML/CSS theme. (Code) (HN)
- Consistent, Fluidly Scaling Type and Spacing (2021)
- The State of CSS 2021
- UI Snippets - Collection of UI Snippets. (Code)
- Smoothly Reverting CSS Animations (2021)
- CSS 3D Clouds (Code)
- Dynamic CSS with Custom Properties (aka CSS Variables)
- Styles of text selection (2021)
- CSS Section Separator Generator (Code)
- Stylist - CSS-in-Rust styling solution for WebAssembly Applications.
- Almond.CSS - Collection of CSS styles to make simple websites look nicer and better. (Code)
- Pure CSS device fingerprinting
- Ban Outer CSS Margins from Components (HN) (HN)
- unocss-preset-scalpel - Scalpel Preset for UnoCSS.
- CSS Gradients that avoid the “gray dead zone” (HN)
- A Deep CSS Dive Into Radial And Conic Gradients (2022)
- CSS Speedrun - Small game to test and improve your CSS knowledge. (Code)
- Getting Started With CSS Cascade Layers (2022)
- CSS Polka Dot Generator
- Fancy CSS Borders Using Masks (2022)
- postcss-design-tokens - PostCSS plugin that provides a function to retrieve design tokens expressed in JS or JSON, within CSS.
- Juice - Given HTML, juice will inline your CSS properties into the style attribute.
- Aspect Ratio is Great (2022) (HN)
- cva - Class Variance Authority.
- CSSUI - Collection of interactive UI components in pure CSS.
- Hello, CSS Cascade Layers (2022)
- PostCSS Plugins
- A Complete Guide to CSS Cascade Layers (2022)
- Things the CSS Spec Folks Got Right (2022) (HN)
- Load Awesome - Awesome collection of — Pure CSS — Loaders and Spinners.
- Classless CSS - List of classless CSS themes and frameworks.
- CSS as the back end – introducing Cascading Server Sheets (HN)
- New CSS Features In 2022
- CSS Analytics - Project Wallace
- CSS-Checker - Find and Reduce Similar and Duplicated CSS Scripts.
- Telecss - CSS tokenizer, parser, transformer, written in Rust.
- Taming CSS Variables with Web Inspector | WebKit (2022)
- How we migrated entirely to CSS Modules (2022)
- When or If (2022) (HN)
- CSS Cascade Layers Explained (2022)
- Master Styles - Virtual CSS language with enhanced syntax. (Code)
- Josh Comeau – Secret Mechanisms of CSS (2022)
- Understanding Layout Algorithms in CSS
- Load Config - Autoload Config for PostCSS.
- CSS Contain and Content Visibility
- Microtip - Modern, minimal and accessible CSS tooptips. (Code)
- Avoiding layout shift by putting the CSS in charge (2021) (Tweet)
- Cascade - CSS to sound live coding system.
- PostCSS - Tool for transforming CSS with JavaScript. (Code) (Web Code)
- Rust implementation of CSS Syntax Level 3
- Create a rad loading animation with CSS
- CSS Parent Selector (2022) (Tweet)
- Browser in the Dark: flashlights with CSS and canvas (HN)
- Declarative design (2022)
- Loaders | UI Ball - Modern, tree-shakeable loaders & spinners for React. Made with CSS, HTML and a splash of SVG. (Code)
- The Future of CSS: CSS Toggles (2022)
- Stylify - Library that generates utility-first CSS dynamically based on what you write. (Code)
- CSS GUI - Visual development environment for CSS.
- 18 GitHub Repositories to Become a CSS Master (2022)
- Building a combined CSS-aspect-ratio-grid (2022)
- Turret CSS - Responsive Front-end Framework for Accessible and Semantic Websites. (Code)
- Is .css a bad idea? Is inlining the way forward? (2022)
- Ordering CSS Declarations (2022) (HN)
- Favorite Modern CSS features (2022)
- CSS Stats - Visualize various stats about your CSS. (Code)
- State of CSS 2022 (Tweet) (Video) (Tweet)
- The Surprising Truth About Pixels and Accessibility: should I use pixels or rems? (Tweet)
- First Look At The CSS object-view-box Property (2022) (Tweet)
- Spacing in CSS (2020)
- What new property / value / CSS superpower are you most excited about? (2022)
- CSS: Absolutely positioning things relatively (2022) (HN)
- Min-Max-Value Interpolation - Tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range. (Code)
- global.css - Personal global (Post)CSS file used in all my projects.
- Lesser-Known And Underused CSS Features In 2022
- Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D (2022)
- grass - Near-feature-complete Sass compiler written purely in Rust.
- Stretch - High performance flexbox implementation written in rust.
- 100 Modern CSS Buttons
- Pure CSS image zoom using CSS primitives
- Paper Prototype CSS (2022)
- Moonshine CSS - High-proof atomic CSS framework.
- Star Wars Scene Transition Effects in CSS (2022)
- finder - CSS Selector Generator.
- CSS box-sizing (2022)
- Complex vs Compound Selectors (2022) (Tweet)
- Mobile-First CSS: Is It Time for a Rethink? (2022) (HN)
- Elly Loel CSS Reset (Tweet)
- PostCSS Media Minmax - Writing simple and graceful Media Queries.
- Defensive CSS - Practical CSS and design tips that helps in building future-proof user interfaces. (Twitter) (HN)
- Create Diagonal Layouts Like It's 2020
- Whirl - CSS loading animations with minimal effort. (Code)
- Anthony Fu's 100 days - 100-day project of exploring design, compform, and new things. (Code)
- CSS Value Processing (2020)
- Shader-like holographic effects with CSS (2022) (HN) (Tweet)
- Bramus Van Damme | The CSS Cascade, a deep dive (2022)
- swc/css - SWC CSS binding.
- The CSS behind Figma (2022) (HN)
- Want your layouts to look Great? Try Adding DEPTH (2022)
- CSS Scan - Fast and easy way to check and copy CSS. (HN)
- Figma: Illuminating dark mode (2022) (Tweet)
- Solving “The Dangler” Conundrum with Container Queries and :has() (2022)
- css_parser - CSS Lexer & Parser implementation for Deno.
- Fade-in animation that is not so boring in CSS
- Finer grained control over CSS transforms with individual transform properties (2022)
- Adam Argyle | Oh Snap! (2022) (Tweet)
- Onu-UI - Web glassmorphism components generate by UnoCSS.
- Michelle Barker | Creative CSS Layout (2022) (Slides)
- Puppertino - CSS framework based on Human Guidelines from Apple.