# Cascading Style Sheets

- Page: https://shared.btbytes.com/p/css
- Date: 2020-03-25
- Tags: web, css

## My CSS Hacks

- [GitHub - btbytes/natty.css: all natural css](https://github.com/btbytes/natty.css); Aug 2025
- [webgarden](https://www.btbytes.com/webgarden/) -- The idea behind these pages is that they are "semantic HTML" pages with no extra `div` or CSS`class`, and see how we can markup "plain" HTML pages to look good/different.
- [Semantic CSS for Pandoc](https://www.btbytes.com/pandoc-semantic-css/) -- same idea but applied to [HTML](https://shared.btbytes.com/p/html) generated by [pandoc](https://shared.btbytes.com/p/pandoc), and also [pandoc+missing](https://www.btbytes.com/pandoc-missing/).
- [zettelake.surge.sh](https://zettelake.surge.sh) -- css experiments that started with [zettelkasten](https://shared.btbytes.com/p/zettelkasten) and [index](https://www.btbytes.com/cardamom/), but also includes some visualization experiments  involving card DAGs. July-Aug 2025
- [the-monotyper-manifesto](https://www.btbytes.com/posts/the-monotyper-manifesto); July-Aug 2025

## Learn

- [The CSS Cascade](http://web.archive.org/web/20200123205400/https://wattenberger.com/blog/css-cascade) Or, How browsers resolve competing CSS styles.
- [Modern CSS Explained For Dinosaurs – Actualize – Medium](https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525); Feb 2018 (refers to BEM etc.,).
- [CSS Variables](https://flaviocopes.com/css-variables/) [Mar 2018]
- [30 CSS Selectors](http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/)
- [30 Seconds of CSS](https://atomiks.github.io/30-seconds-of-css/) - "A curated collection of useful CSS snippets you can understand in 30 seconds or less."; [HN](https://news.ycombinator.com/item?id=16473093)
- [BEM — Block Element Modifier](http://getbem.com/)  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](https://gedd.ski/post/grid-track-options/)

## Learning CSS by playing

* My own [Web Garden](https://www.btbytes.com/webgarden/)
* [Grid Garden - A game for learning CSS grid](https://cssgridgarden.com/)
* [Flexbox Froggy - A game for learning CSS flexbox](https://flexboxfroggy.com/)
* [Flexbox Defense](http://www.flexboxdefense.com/)
* [CSS Diner - Where we feast on CSS Selectors!](https://flukeout.github.io/)


## Frameworks

- [Libraries — Lighten the Web](https://www.lightentheweb.com/libraries/)
> 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](http://bulma.io/) -- A modern CSS framework based on Flexbox
- [Picnic CSS](https://picnicss.com/) ; this is very clean.
- [U.S. Web Design Standards](https://standards.usa.gov/) is very thorough and nicely done.
- ~~[Spectre.css - a Lightweight, Responsive and Modern CSS Framework.](https://picturepan2.github.io/spectre/index.html)~~ Use  [sprecre-css](https://spectre-org.github.io/spectre-docs/), a maintained fork instead.
- [NES.css - NES-style CSS Framework](https://nostalgic-css.github.io/NES.css/)
- [Vanilla documentation](https://vanillaframework.io/) ChatGPT recommended this framework when I asked for css frameworks similar to Bulma. This is from Ubuntu, the linux vendor. Looks extensive, and well used for large sites producing lots of text-y documentation. #css-framework
- [Duet Design System](https://www.duetds.com/about/#top)

## Functional CSS


Programming history leading resulting in "functional" CSS -- [CSS Utility Classes and "Separation of Concerns"](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)

[In defense of Functional CSS | Mike Crittenden's Blog](https://www.mikecr.it/ramblings/functional-css/)

### Functional CSS frameworks

- [TACHYONS - Css Toolkit](https://tachyons.io/) 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](https://tailwindcss.com/). See [Tailwind Builder](https://tailwind.build/editor?project=175241f7479bd8b689061e6b5ebad637dca10425) via [HN](http://news.ycombinator.com/item?id=21439918) . See [tailwind](https://shared.btbytes.com/p/tailwind)
- [Basscss](http://basscss.com/)


## Javascript

[StyleX](https://stylexjs.com/) is a JavaScript syntax and compiler for styling web apps.

> 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.


## Tools

- [CSS Grid Layout Interface Builder | LayoutIt!](https://grid.layoutit.com/grid) [.](https://news.ycombinator.com/item?id=17618059)

- [stylelint](https://stylelint.io/) -- "A mighty, modern linter that helps you avoid errors and enforce conventions in your styles."

## CSS Variables

- [Pollen](https://www.pollen.style/) is a highly configurable, responsive library of style-agnostic CSS variables for your next design system.
- [Utopia](https://utopia.fyi/) an approach to Fluid Responsive Design. [Youtube Video](https://www.youtube.com/watch?v=DDuGtN-GakA)
- [Open Props: sub-atomic styles](https://open-props.style/)


### Colors

[OKLCH Color Picker & Converter](https://oklch.com/); [OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)


### Typography

use [Modern Font Stacks](https://modernfontstacks.com) -- use the System font stack "The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders."

## Markdown 

[ReMarkdown — HTML that looks like Markdown text](https://fvsch.github.io/remarkdown/)


## Flexbox

- [Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS](https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/)
- [From "Modern CSS explined for dinosaurs"](https://codepen.io/peterxjang/pen/vdLROM?editors=1100)

## Semantic css

My favorites in particular order are: water.css, pico.css, mvp, though matcha looks excellent (May 2024), and I'm going to try it going forward.

- [matcha.css | Drop-in semantic styling library in pure CSS](https://matcha.mizu.sh/); the site also has a "preview website" feature - which, given a URL, will apply the semantic CSS and let you preview the site. It also has a custom build feature that allows you to select exactly which elements you want to apply these styles + customize colors. Excellent library and website!
- [missing.css](https://missing.style/) -- The goal of missing.css is to reduce needed intervention in HTML. It lets authors
    - start with a good out-of-the-box experience,
    - customize it easily, even create multiple themes,
    - build common components using plain, semantic HTML,
    - create unique sites by applying utility classes as needed.
- [Carpetsmoker/hello-css: A CSS template focused on readability](https://github.com/Carpetsmoker/hello-css)
- [Water.css](https://kognise.github.io/water.css/) --  is a just-add-css collection of styles to make simple websites like this just a little bit nicer..
* [CSS Bed](https://www.cssbed.com/) is a collection of "classless css themes" to use as starting points in web development.
* [tacit](https://yegor256.github.io/tacit/)
* [Basic.css - Classless CSS Starter File](https://vladocar.github.io/Basic.css/) -- [Carrer Blog: Don’t use CSS Reset use CSS Set](http://www.vcarrer.com/2020/06/dont-use-css-reset-use-css-set.html)
* [Pico CSS • Minimal CSS Framework for semantic HTML](https://picocss.com/)
* [ Simple.css](https://simplecss.org/demo) <q>Simple.css is _mostly_ classless, which means that you can integrate Simple.css with plain HTML and your site will look great.</q>
- [Writ](https://writ.cmcenroe.me/); [ref page](https://writ.cmcenroe.me/reference.html) -- too bare bones, I recommend ones above.
- [swyxio/spark-joy](https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-in-css-frameworks) a list of semantic, and minimal CSS frameworks.

## Minimal CSS

* Comparison of ["Drop-in Minimal CSS"](https://dohliam.github.io/dropin-minimal-css/). "Dropin-minimal-CSS"
* [58 bytes of css to look great nearly everywhere](https://web.archive.org/web/20190409000042/https://jrl.ninja/etc/1/) -- `main {max-width: 38rem;padding: 2rem;margin: auto;}`
* [Element CSS](https://elementcss.neocities.org/)
* [ungrid - the simplest responsive css grid](http://chrisnager.com/ungrid/) (58 bytes). `@media (min-width: 30em) {.row { width: 100%; display: table; table-layout: fixed; }.col { display: table-cell; }}`
* [MVP.css - Minimalist stylesheet for HTML elements](https://andybrewer.github.io/mvp/)
* [PaperCSS • the less formal CSS framework](https://www.getpapercss.com/) Kind of a hand drawn look to it.
* [Terminal CSS](https://terminalcss.xyz/)
* [Simple.css - A classless CSS framework](https://simplecss.org/)
* [Bolt CSS](https://boltcss.com) Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes.

## Javascript styling system

[StyleX](https://stylexjs.com/) "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

- [Chinese Window Lattice And CSS](https://yuanchuan.dev/2019/05/15/window-lattice-and-css.html)
- [The Simpsons in CSS](https://pattle.github.io/simpsons-in-css/)
- [All monospace-web](https://x.com/owickstrom/status/1825548279783833858); Final [output](https://owickstrom.github.io/the-monospace-web/); some more [monospace pages](https://wonger.dev/posts/monospace-dump#web)
- [CSS Holographic Masks](https://cdpn.io/HejChristian/fullpage/YPzLbYX?anon=true&view=fullpage) inspired by [Holograms, light-leaks and how to build CSS-only shaders - Robb Owen](https://robbowen.digital/wrote-about/css-blend-mode-shaders/)

## Classic CSS

- [The Sinorcaish Stylesheet](http://www.zap.org.au/documents/styles/sinorcaish/example-1.0/index.html) the original inspiration for www.btbytes.com as you can see from the [Archive Page](https://web.archive.org/web/20030802085747/http://www.btbytes.com/)

## Good CSS examples

- [Good layout for reading text](https://www.sapiens.org/language/language-revitalization/) from sapiens.org

## Tips and tricks

- [Hardest Problem in Computer Science: Centering Things @ tonsky.me](https://tonsky.me/blog/centering/)


## Typographic CSS

[Introducing TODS – a typographic and OpenType default stylesheet | Clagnut by Richard Rutter](https://clagnut.com/blog/2433/)