Track Awesome Css Updates Weekly
:art: A curated contents of amazing CSS :)
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 awesome-css-group/awesome-css · ⭐ 5K · 🏷️ Front-End Development
Oct 28 - Nov 03, 2024
Tutorials 🎬 / 2015
- CSS Hands-on Tutorial - Free CSS hands-on tutorial by LabEx.
Oct 14 - Oct 20, 2024
Preprocessors 💊 / Editor's Draft ✒️
- Vanilla Extract - Generate static CSS using Typescript. Write type‑safe, locally scoped classes, variables and themes.
Miscellaneous / Editor's Draft ✒️
- Beautiful CSS box-shadow examples - Curated collection of 93 beautiful CSS box-shadow. Click to copy.
Aug 29 - Sep 04, 2022
Books 📚 / 2015
- Tiny CSS Projects – Improve the way you write CSS as you build 12 tiny projects.
May 02 - May 08, 2022
Tutorials 🎬 / 2015
- All selectors in CSS - All selectors in CSS.
Apr 04 - Apr 10, 2022
Tutorials 🎬 / 2015
- CSS Math Functions - Using CSS Math for responsive design.
Mar 14 - Mar 20, 2022
CSS Working Group / Editor's Draft ✒️
- W3c/csswg-drafts (⭐4.5k) - Mirror of CSS WG Editor Draft repository.
- W3c/css-houdini-drafts (⭐1.8k) - Mirror of Houdini WG Editor repository.
Parsers 🔍 / Editor's Draft ✒️
- Mensch (⭐113) - A decent CSS parser.
Frameworks 🎨 / Editor's Draft ✒️
- AgnosticUI - Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular.
- Inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
- Material-components-web (⭐17k) - Modular and customizable Material Design UI components for the web.
- Tailwindcss (⭐83k) - A utility-first CSS framework for rapid UI development.
- Unsemantic - Fluid grid for mobile, tablet, and desktop.
Reset and Normalize / Editor's Draft ✒️
- Normalize-OpenType (⭐795) - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
- Normalize (⭐52k) - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
- Reset.css - CSS Tools: Reset CSS.
- Reseter.css (⭐1.2k) - A Futuristic CSS Reset/Normalizer. That Redifines Instead Of Preserving.
- Sanitize.css (⭐5.2k) - A set of CSS rules that style with today’s best practices out-of-the-box.
- Unstyle.css (⭐29) - Specialised stylesheet for removing user agent styles, style the web with your baseline.
CSS Development at Large-Scale Websites / Editor's Draft ✒️
Code Style Guidelines 📖 / Editor's Draft ✒️
- Dropbox (S)CSS Style Guide (⭐1.2k) by Dropbox
- Google HTML/CSS Style Guide by Google
- Official Trello CSS Guide by Bobby Grace
- SASS Style Guide by Sass team
Style Guide / Editor's Draft ✒️
- Lighting Design System by Salesforce
- Solid by BuzzFeed
Style Guide Generators 🎰 / Editor's Draft ✒️
Naming conventions & Methodologies 💡 / Editor's Draft ✒️
CSS in JS / Editor's Draft ✒️
CSS Polyfills / Editor's Draft ✒️
- Polyfill.js (⭐296) - A library to make creating CSS polyfills much easier.
- Prefixfree (⭐3.8k) - Break free from CSS prefix hell.
- Fixed-sticky (⭐1.5k) - A CSS position:sticky polyfill.
- Selectivizr (⭐1.7k) - A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
Miscellaneous / Editor's Draft ✒️
- Flexbox Patterns by cjcenizal
- Single Div Project (⭐1.6k) - One
<div>. Many possibilities.
- You Might Not Need JS - CSS alternatives for common JS UI components.
- Xpath-to-selector (⭐11) - Convert xpath to css selector.
Podcasts 📻 / Editor's Draft ✒️
- CSS Podcast - Una Kravets and Adam Argyle,and development.
- Non Breaking Space Show - Seeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX.
- Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front-end web design,hosted by Anna Debenham and Brad Frost.
- Style Guide Podcast - A small batch series of interviews on style guides,art direction,brightest,content strategy,design,Developer Advocates from Google,development,gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
- Syntax - A Tasty Treats Podcast for Web Developers.,typography,web technology
- The Big Web Show - Topics like web publishing,is all about keeping you updated with the latest in Open Source Technology.
- The Changelog - The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast,and more. It's everything web that matters.
Twitter 🛰️ / Editor's Draft ✒️
- Andrey Sitnik - Author of @Autoprefixer, http://easings.net and @PostCSS.
- Ben Briggs - Final year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance.
- Brad Frost - Web designer, speaker, writer, consultant, musician.
- Chris Coyier - Designer @CodePen. Writer @Real_CSS_Tricks.
- Connor Sears - Designer at GitHub.
- Daniel Glazman - W3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine.
- Dave McFarland - Web developer, author of CSS: The Missing Manual, JavaScript & jQuery.
- Donovan Hutchinson - Designer, developer, writer. Occasionally blogs at http://Hop.ie, and currently building @cssanimation.
- Eric Bidelman - Engineer at Google working on Chrome, web components, and Polymer.
- Evangelina Ferreira - Web Designer. Professor at @multimedial_utn HTML5 & CSS Freak. Ocassional Translator.
- Guy Routledge - Front-end dev, Teacher @GA_London, Screencaster at http://www.atozcss.com, property snob, Foodie.
- Heydon Pickering - Moderate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer.
- Jonathan Snook - Designer, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS.
- Kitty Giraudel - Non-binary accessibility & diversity advocate, frontend developer, author.
- L. David Baron - Mozilla developer, CSS and W3C standards diplomat.
- Mark Otto - GitHub and Bootstrap. Formerly at Twitter. Huge nerd.
- Maxime Thirouin - Freelance front-end vigilante, UI/UX developer.
- Natalie Weizenbaum - Trans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang.
- Nicolas Gallagher - Software Engineer at @twitter.
- Paul Lewis - Googler who noodles with code and design.
- Phil Walton - Engineer at Google • Open Source Advocate • Developer • Designer • Writer.
- Remy Sharp - All about CSS sizing units.
- Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
- Scott Jehl - Author of @responsiblerwd, now on sale from @abookapart.
- Simon - UI designer, CSS doodler.
- The Chris Eppstein - Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.
- Una Kravets - Front-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things.
- Zoe M. Gillenwater - Web designer/developer specializing in CSS, RWD, UX, & accessibility.
- 앗킨스 탭 - Literally Jenn Schiffer's Mom.
Videos 📺 / 2015
- Mdo-ular CSS ⌚
30:06- Mark Otto @ jQuery UK.
Books 📚 / 2015
- CSS: The Missing Manual – Really Helpful in Advancing your Design Skills to a whole new Level
- CSS Secrets – Better Solutions to Everyday Web Design Problems
Tutorials 🎬 / 2015
- 30 Seconds of CSS - A curated collection of useful CSS snippets you can understand in 30 seconds or less.
- Community Curated CSS Resources - Top Recommended Resources.
- Flexbox video tutorial - Free video course by Wes Bos to learn flexbox.
- Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS - In-depth intro to OOCSS, BEM, SMACSS, with examples.
- Work With Animations - Inspecting animations.
Feb 28 - Mar 06, 2022
Reset and Normalize / Editor's Draft ✒️
- CSS Checker (⭐578) - Find and Reduce Similar & Duplicated CSS Scripts.
Oct 11 - Oct 17, 2021
Miscellaneous / Editor's Draft ✒️
- GradientArt - An advanced CSS gradient editor with layering, design tools and free cloud storage.
Aug 16 - Aug 22, 2021
Frameworks 🎨 / Editor's Draft ✒️
- Tronic247 Material - A responsive framework based on CSS and some JS while following Material Design guidelines.
Jul 19 - Jul 25, 2021
Code Style Guidelines 📖 / Editor's Draft ✒️
Jul 12 - Jul 18, 2021
Miscellaneous / Editor's Draft ✒️
- Glassmorphism CSS Generator - Generate CSS for glassmorphism.
Twitter 🛰️ / Editor's Draft ✒️
- Zoltán Szőgyényi - Web developer, Co-founder at Themesberg. I'm building Glass UI.
Dec 21 - Dec 27, 2020
Frameworks 🎨 / Editor's Draft ✒️
- Charts.css - CSS data visualization framework.
Aug 17 - Aug 23, 2020
Books 📚 / 2015
- Every Layout: Relearn CSS Layout – Solving responsive layout problems using algorithmic design.
Jul 20 - Jul 26, 2020
Frameworks 🎨 / Editor's Draft ✒️
- Numl - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.
Jul 13 - Jul 19, 2020
Frameworks 🎨 / Editor's Draft ✒️
- Halfmoon - A responsive front-end framework with a built-in dark mode.
Jun 08 - Jun 14, 2020
Videos 📺 / 2019
- Next-Generation Web Styling - Una Kravets & Adam Argyle @ Chrome Dev Summit 2019.
Jun 01 - Jun 07, 2020
Frameworks 🎨 / Editor's Draft ✒️
- Bonsai - A complete Utility First CSS Framework for less than 50kb.
May 18 - May 24, 2020
Style Guide / Editor's Draft ✒️
- Fluent UI (⭐18k) by Microsoft
May 04 - May 10, 2020
Parsers 🔍 / Editor's Draft ✒️
- CSSOM (⭐752) - CSS Object Model implemented in pure JavaScript.
- CSSTree (⭐1.9k) - Detailed CSS parser with syntax validator.
- Gonzales PE (⭐330) - CSS parser with support for preprocessors.
- ParserLib (⭐287) - CSSLint/parser-lib.
- Rework (⭐2.8k) - Plugin framework for CSS preprocessing in Node.js.
- Stylecow (⭐163) - Modern CSS for all browsers.
Preprocessors 💊 / Editor's Draft ✒️
- PostCSS (⭐29k) - Transforming CSS with JS plugins.
- LESS (⭐17k) - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
- Sass (⭐15k) - Mature, stable, and powerful professional-grade CSS extension language.
- STYLIS (⭐1.7k) - Light-weight CSS preprocessor.
- Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.
Frameworks 🎨 / Editor's Draft ✒️
- Bootstrap - The most popular HTML, CSS, and JS framework.
- Bulma - A modern CSS framework based on Flexbox. Also has Sass import for modification.
- Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.
- Chota - A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system.
- Cirrus - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
- Foundation - advanced responsive front-end framework.
- Gralig - A modest, grayish CSS library.
- Hasser CSS (⭐3) - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.
- Materialize - A modern responsive front-end framework based on Material Design.
- Milligram - A minimalist CSS framework.
- Pure.css - A set of small, responsive CSS modules that you can use in every web project.
- Semantic UI - Powerful framework that uses human-friendly HTML.
- Shorthand Framework (⭐256) - Feature rich CSS framework for the new decade.
- Spectre.css - A lightweight, responsive and modern CSS framework.
- Strawberry (⭐73) - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.
- Tachyons - Functional CSS for humans.
- Tacit - CSS framework for dummies with zero skills in graphic design.
- UIkit - A lightweight and modular front-end framework.
- Wing - A Minimal, Lightweight, Responsive framework.
Toolkits 🔧 / Editor's Draft ✒️
- Bourbon - A simple and lightweight mixin library for Sass.
CSS Development at Large-Scale Websites / Editor's Draft ✒️
- CSS at BBC Sport by Shaun Bent
- CSS AT HOOTSUITE by Steve Mynett
- How we do CSS at Ghost by Paul Davis
Code Style Guidelines 📖 / Editor's Draft ✒️
- ThinkUp CSS Style Guide (⭐3.3k) by ThinkUp
- WordPress CSS Coding Standards by WorldPress
Style Guide / Editor's Draft ✒️
- AUI by Atlassian Design
- Design Elements by lonely planet
- GitHub CSS Style Guide by Github
- Patterns by MailChimp
- Style Guide by Starbucks
- Website Style Guide Resources by Awesome people
Naming conventions & Methodologies 💡 / Editor's Draft ✒️
CSS in JS / Editor's Draft ✒️
CSS Polyfills / Editor's Draft ✒️
- PIE (⭐2.8k) - Allows Internet Explorer to recognize and render various CSS3 box decoration properties.
Miscellaneous / Editor's Draft ✒️
- Can I use - Browser support for CSS, HTML5 and other front-end web technologies.
- Live editor for CSS and LESS (⭐276) - Magic CSS extension for Chrome, Firefox and Edge.
- RevengeCSS (⭐834) - A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML
Podcasts 📻 / Editor's Draft ✒️
- The Web Ahead - Conversations with world experts on changing technologies and future of the web.
Twitter 🛰️ / Editor's Draft ✒️
- Adam Morse - Advocate for users and open-source.
- CSS Commits - Latest commits to @CSSWG’s public Mercurial repository.
- Dudley Storey - Web development writer, teacher, and speaker.
- Harry Roberts- Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.
- Lea Verou - Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.
- Manoela Ilic - ...aka Mary Lou @codrops ༶ CSS & HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI Design & Astrophysics ༶ Digital nomad.
- Nicole Sullivan - GEEK.
- Patrick Hamann - Lover of mountains, craft beers and discovering new food.
- Rachel Andrew - Web Developer, half of @grabaperch CMS, CSS Working Group Invited Expert.
Books 📚 / 2015
- CSS: The Definitive Guide, 4th Edition - Visual Presentation for the Web
Tutorials 🎬 / 2015
- CSS Diner – Interactive gamified tutorial for learning selection with CSS.
- CSS Grid PlayGround - Simple tutorial to learn CSS Grid from Mozilla.
- CSS Grids videos tutorial - Free video course by Wes Bos to learn CSS Grids.
Oct 07 - Oct 13, 2019
Style Guide Generators 🎰 / Editor's Draft ✒️
Nov 27 - Dec 03, 2017
Introduction / Complementary Resources
Oct 02 - Oct 08, 2017
Videos 📺 / 2016
- Component-Based Style Reuse 📄 transcript ⌚
37:24- Pete Hunt @ CSS conf 2016.
- CSS4 Grid: True Layout Finally Arrives 📄 transcript ⌚
29:27- Jen Kramer @ CSS conf 2016.
- Houdini: Demystifying the Future of CSS ⌚
36:58@ Google I/O 2016.
Videos 📺 / 2015
- CSS Workflow from the Ground Up ⌚
46:06- Jonathan Snook @ Generate conf 2015.
Sep 25 - Oct 01, 2017
Reset and Normalize / Editor's Draft ✒️
- MiniReset.css (⭐2.8k) - A tiny modern CSS reset.
Sep 26 - Oct 02, 2016
Style Guide Generators 🎰 / Editor's Draft ✒️
Videos 📺 / 2015
- CSS Architecture with SMACSS ⌚
30:15- Caleb Meredith @ DevTips channel.