Cascading Style Sheets
Created:
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
- My own Web Garden
- 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
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
My favorites in particular order are: water.css, pico.css, mvp.
- 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
- Pico CSS • Minimal CSS Framework for semantic HTML
- Simple.css
Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML and your site will look great.
- Writ; ref page – too bare bones, I recommend ones above.
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.
Javascript styling system
StyleX “JavaScript syntax and compiler for styling web apps.” by Meta. > StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.
Cool stuff / experiments
Classic CSS
- The Sinorcaish Stylesheet the original inspiration for www.btbytes.com as you can see from the Archive Page
Good CSS examples
- Good layout for reading text from sapiens.org