CSS resources
Collection of links about CSS.
CSS resets
- Reset CSS
- the first one
- Normalize.css
- A modern, HTML5-ready alternative to CSS resets
- CSS remedy
- Start your project with a remedy for the technical debt of CSS.
Sites and Articles
- CSS Zen Garden
- The Beauty of CSS Design
- CSS Font Stack
- nice breakdown of existing system fonts
- flexbox.io
- 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
- CSS3Files
- 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
- CSScomb
- Makes your code beautiful
- 30 Seconds of CSS
- A curated collection of useful CSS snippets you can understand in 30 seconds or less.
- GRID
- A simple visual cheatsheet for CSS Grid Layout
- cssfx
- Beautifully simple click-to-copy CSS effects
Tools
Frameworks
- Bootstrap
- (claims to be :) The most popular front-end framework for developing responsive, mobile first projects on the web.
- Foundation
- (claims to be :) The most advanced responsive front-end framework in the world.
- Materialize
- 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.
- Pure.css
- A set of small, responsive CSS modules that you can use in every web project.
- MinimalCSS
- Minimal CSS Framework
- Skeleton
- A dead simple, responsive boilerplate.
- Bulma
- is an open source CSS framework based on Flexbox.
- Basscss
- Low-Level CSS Toolkit
- awsm.css
- Simple CSS library for semantic HTML markup
- Mobi.css
- A lightweight, scalable, mobile-first css framework
- Shoelace
- A back to the basics CSS starter kit. For when you don’t need the whole boot.
- Picnic
- A beautiful CSS library to kickstart your projects.
- NES.css
- NES-style CSS Framework
Modules
- Normalize.css
- A modern, HTML5-ready alternative to CSS resets.
- reset.css
- Genuine Eric Meyer’s Reset CSS bundled as npm package.
- Baloon.css
- Simple tooltips made of pure CSS
- radiobox.css
- Tiny set of CSS3 animations meant for your radio inputs.
- stroll.js
- CSS3 list scroll effects
Preprocessors
- Compass
- Compass is an open-source CSS Authoring Framework
- less
- Leaner CSS
- stylus
- Expressive, dynamic, robust CSS
- Sass
- CSS with superpowers
- PostCSS
- Transformin CSS with JS plugins (IMHO, the most promising CSS preprocessor)
Grid systems
- Toast
- Insane, no-nonsense CSS grid
- Unsemantic
- Unsemantic is a fluid grid system that is the successor to the 960 Grid System.
- Jeet Grid System
- A grid system for humans
- SuperGiGi
- Italian Grilleria
Animations
- Animate.css
- Just-add-water CSS animation
- Hover.css
- A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
Demo
Articles and other resources
Nice collection of CSS animated loading indicators
CSS Development & Testing Tools
CSS Vocabulary
CSS Diner - Where we feast on CSS Selectors!