Sites and Articles
- CSS Font Stack
- nice breakdown of existing system fonts
- WHAT THE FLEXBOX?! A simple, free 20 video course that will help you master CSS Flexbox!
- Learn CSS Layout
- This site teaches the CSS fundamentals that are used in any website’s layout
- CSS | MDN
- CSS documentation at Mozilla Developer Network
- Variable grid system
- A quick way to generate an underlying CSS grid for your site.
- WTF, HTML and CSS?
- Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas. (by @mdo)
- Awesome CSS
- A curated list of CSS lists
- CSS Tips, Tricks and Tutorials
- Get BEM
- Get BEM to all people in simplest way
- Must-Watch CSS
- A useful list of must-watch talks about CSS
- CSS protips
- A collection of tips to help take your CSS skills pro
- Maintenable CSS
- Is an approach to writing modular, scalable and of course, maintainable CSS.
- Flexbox Patterns
- Build awesome user interfaces with CSS flexbox. Examples and source code included.
- How to center in CSS
- Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.
- Grid by Example
- A collection of usage examples for the CSS Grid Layout specification.
- Quantity Queries
- A tool to help build Quantity Queries for your projects
- Makes your code beautiful
- 30 Seconds of CSS
- A curated collection of useful CSS snippets you can understand in 30 seconds or less.
- A simple visual cheatsheet for CSS Grid Layout
- Beautifully simple click-to-copy CSS effects
A Modern CSS Reset
- (claims to be :) The most popular front-end framework for developing responsive, mobile first projects on the web.
- (claims to be :) The most advanced responsive front-end framework in the world.
- A modern responsive front-end framework based on Material Design.
- Semantic UI
- UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI.
- Flat UI
- Free Bootstrap Theme.
- A set of small, responsive CSS modules that you can use in every web project.
- Minimal CSS Framework
- A dead simple, responsive boilerplate.
- is an open source CSS framework based on Flexbox.
- Low-Level CSS Toolkit
- Simple CSS library for semantic HTML markup
- A lightweight, scalable, mobile-first css framework
- A back to the basics CSS starter kit. For when you don’t need the whole boot.
- A beautiful CSS library to kickstart your projects.
- NES-style CSS Framework
- A modern, HTML5-ready alternative to CSS resets.
- Genuine Eric Meyer’s Reset CSS bundled as npm package.
- Simple tooltips made of pure CSS
- Tiny set of CSS3 animations meant for your radio inputs.
- CSS3 list scroll effects
- Compass is an open-source CSS Authoring Framework
- Leaner CSS
- Expressive, dynamic, robust CSS
- CSS with superpowers
- Transformin CSS with JS plugins (IMHO, the most promising CSS preprocessor)
- Insane, no-nonsense CSS grid
Bootstrap’s grid system
960 Grid System
- Unsemantic is a fluid grid system that is the successor to the 960 Grid System.
- Jeet Grid System
- A grid system for humans
- Italian Grilleria
- Just-add-water CSS animation
- A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
Pixel Art to CSS
Articles and other resources
CSS variable secrets
How browsers position floats
Nice collection of CSS animated loading indicators
CSS Development & Testing Tools
CSS Shapes Editor for Chrome
12 Little-Known CSS Facts
Get on the CSS Grid!
CSS Diner - Where we feast on CSS Selectors!
Hover Effect ideas
Kevin Powell’s YouTube channel
Layout Land YouTube channel