Cascading Style Sheets

Learn

• The CSS Cascade Or, How browsers resolve competing CSS styles.
• Modern CSS Explained For Dinosaurs – Actualize – Medium; Feb 2018 (refers to BEM etc.,).
• CSS Variables [Mar 2018]
• 30 CSS Selectors
• 30 Seconds of CSS - “A curated collection of useful CSS snippets you can understand in 30 seconds or less.”; HN
• BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. Uses naming convention.
• CSS Grid Track Options | Geddski

Learning CSS by playing

• Grid Garden - A game for learning CSS grid
• Flexbox Froggy - A game for learning CSS flexbox
• Flexbox Defense
• CSS Diner - Where we feast on CSS Selectors!

Frameworks

• Libraries — Lighten the Web > There are lightweight alternatives to commonly-used libraries. Some do away with compatibility with old browsers, some are less bloated, and some just do less.
• bulma – A modern CSS framework based on Flexbox
• Picnic CSS ; this is very clean.
• U.S. Web Design Standards is very thorough and nicely done.
• Spectre.css - a Lightweight, Responsive and Modern CSS Framework.
• NES.css - NES-style CSS Framework

Functional CSS

Programming history leading resulting in “functional” CSS – CSS Utility Classes and “Separation of Concerns”

In defense of Functional CSS | Mike Crittenden’s Blog

Functional CSS frameworks

• TACHYONS - Css Toolkit is a “functional CSS” framework. looks very low-level. composable things. Probabaly not suitable for quick and easy copy-pasting.
• Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development. See Tailwind Builder via HN . See tailwind
• Basscss

Tools

• CSS Grid Layout Interface Builder | LayoutIt! .

• stylelint – “A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.”

Flexbox

• Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS
• From “Modern CSS explined for dinosaurs”

Semantic css

• Writ; ref page
• Carpetsmoker/hello-css: A CSS template focused on readability
• Water.css – is a just-add-css collection of styles to make simple websites like this just a little bit nicer..
• CSS Bed is a collection of “classless css themes” to use as starting points in web development.
• tacit
• Basic.css - Classless CSS Starter File – Carrer Blog: Don’t use CSS Reset use CSS Set

Minimal CSS

• Comparison of “Drop-in Minimal CSS”. “Dropin-minimal-CSS”
• 58 bytes of css to look great nearly everywhere
• Element CSS
• ungrid - the simplest responsive css grid (58 bytes).
• MVP.css - Minimalist stylesheet for HTML elements
• PaperCSS • the less formal CSS framework Kind of a hand drawn look to it.
• Terminal CSS
• Simple.css - A classless CSS framework
• Bolt CSS Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes.

Cool stuff / experiments

• Chinese Window Lattice And CSS
• The Simpsons in CSS

Classic CSS

• The Sinorcaish Stylesheet the original inspiration for www.btbytes.com as you can see from the Archive Page