802 lines
42 KiB
Markdown
802 lines
42 KiB
Markdown
# Classless CSS
|
|
|
|
This is a list of classless CSS themes and frameworks.
|
|
"Classless" means a style sheet does not define special classes you must add to your HTML elements to style these elements.
|
|
As a result, you can style any plain-HTML page just by linking to the style sheet.
|
|
This is useful, for example, in prototyping.
|
|
|
|
|
|
## Contents
|
|
|
|
- [Classless CSS](#classless-css)
|
|
* [Classless](#classless)
|
|
+ [Almond.CSS](#almondcss)
|
|
+ [attriCSS](#attricss)
|
|
+ [awsm.css](#awsmcss)
|
|
+ [axist](#axist)
|
|
+ [Bahunya](#bahunya)
|
|
+ [Bamboo CSS](#bamboo-css)
|
|
+ [BareCSS](#barecss)
|
|
+ [Basic.css](#basiccss)
|
|
+ [Bolt.css](#boltcss)
|
|
+ [ChimeraCSS](#chimeracss)
|
|
+ [Classless.css](#classlesscss)
|
|
+ [concrete.css](#concretecss)
|
|
+ [dev.css](#devcss)
|
|
+ [Downstyler](#downstyler)
|
|
+ [Fylgja](#fylgja)
|
|
+ [holiday.css](#holidaycss)
|
|
+ [LatexCSS](#latexcss)
|
|
+ [magick.css](#magickcss)
|
|
+ [Markdown CSS — Air](#markdown-css--air)
|
|
+ [Markdown CSS — Modest](#markdown-css--modest)
|
|
+ [Markdown CSS — Retro](#markdown-css--retro)
|
|
+ [Markdown CSS — Splendor](#markdown-css--splendor)
|
|
+ [Marx](#marx)
|
|
+ [MercuryCSS](#mercurycss)
|
|
+ [MVP.css](#mvpcss)
|
|
+ [new.css](#newcss)
|
|
+ [no-class.css](#no-classcss)
|
|
+ [Pico.css](#picocss)
|
|
+ [ridge.css](#ridgecss)
|
|
+ [sakura](#sakura)
|
|
+ [shadcn-classless (Nandaleio)](#shadcn-classless-nandaleio)
|
|
+ [Simple.css](#simplecss)
|
|
+ [SPCSS](#spcss)
|
|
+ [style.css](#stylecss)
|
|
+ [Stylize.css](#stylizecss)
|
|
+ [tacit](#tacit)
|
|
+ [Tiny.css](#tinycss)
|
|
+ [tty.css](#ttycss)
|
|
+ [Tufte CSS](#tufte-css)
|
|
+ [W3C Core Styles](#w3c-core-styles)
|
|
+ [water.css](#watercss)
|
|
+ [Writ](#writ)
|
|
+ [YoRHa](#yorha)
|
|
* [Class-light](#class-light)
|
|
+ [Barrel.css](#barrelcss)
|
|
+ [Chota](#chota)
|
|
+ [matcha.css](#matchacss)
|
|
+ [Milligram](#milligram)
|
|
+ [mini.css](#minicss)
|
|
+ [mono](#mono)
|
|
+ [Picnic CSS](#picnic-css)
|
|
+ [SASS-ZERO (Breadboard)](#sass-zero-breadboard)
|
|
+ [Wing](#wing)
|
|
* [See also](#see-also)
|
|
* [License](#license)
|
|
|
|
|
|
## Classless
|
|
|
|
### Almond.CSS
|
|
|
|
- [Repository](https://github.com/alvaromontoro/almond.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://alvaromontoro.github.io/almond.css/demo/)
|
|
|
|
[](screenshot/almond-css.png)
|
|
|
|
|
|
### attriCSS
|
|
|
|
- [Repository](https://github.com/raj457036/attriCSS)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://raj457036.github.io/attriCSS/)
|
|
|
|
[](screenshot/attricss-0-brightlight-green.png)
|
|
[](screenshot/attricss-1-midnight-green.png)
|
|
[](screenshot/attricss-2-darkforest-green.png)
|
|
[](screenshot/attricss-3-darkfairy-pink.png)
|
|
[](screenshot/attricss-4-lightfairy-pink.png)
|
|
|
|
|
|
### awsm.css
|
|
|
|
- [Website](https://igoradamenko.com/awsm.css/v2/)
|
|
- [Demo](https://igoradamenko.com/awsm.css/v2/elements.html)
|
|
|
|
[](screenshot/awsm.css-0.png)
|
|
[](screenshot/awsm.css-1-gondola.png)
|
|
[](screenshot/awsm.css-2-mischka.png)
|
|
[](screenshot/awsm.css-3-big-stone.png)
|
|
[](screenshot/awsm.css-4-black.png)
|
|
[](screenshot/awsm.css-5-tasman.png)
|
|
[](screenshot/awsm.css-6-pastel-pink.png)
|
|
[](screenshot/awsm.css-7-pearl-lusta.png)
|
|
|
|
|
|
### axist
|
|
|
|
- [Repository](https://github.com/ruanmartinelli/axist)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://ruanmartinelli.github.io/axist/)
|
|
|
|
[](screenshot/axist.png)
|
|
|
|
|
|
### Bahunya
|
|
|
|
- [Repository](https://github.com/Kimeiga/bahunya)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://kimeiga.github.io/bahunya/)
|
|
|
|
[](screenshot/bahunya.png)
|
|
|
|
|
|
### Bamboo CSS
|
|
|
|
- [Repository](https://github.com/rilwis/bamboo)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://rilwis.github.io/bamboo/demo/)
|
|
|
|
[](screenshot/bamboo-css.png)
|
|
|
|
|
|
### BareCSS
|
|
|
|
- [Repository](https://github.com/longsien/BareCSS)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://web.archive.org/web/20191010034508/http://barecss.com/)
|
|
|
|
[](screenshot/barecss.png)
|
|
|
|
|
|
### Basic.css
|
|
|
|
- [Repository](https://github.com/vladocar/Basic.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://vladocar.github.io/Basic.css/)
|
|
|
|
[](screenshot/basic.css.png)
|
|
|
|
|
|
### Bolt.css
|
|
|
|
- [Repository](https://github.com/tbolt/boltcss)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://boltcss.com/)
|
|
|
|
[](screenshot/bolt.css.png)
|
|
|
|
|
|
### ChimeraCSS
|
|
|
|
- [Repository](https://github.com/ChimeraCSS/ChimeraCSS)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://chimera-demo.vercel.app/)
|
|
|
|
[](screenshot/chimeracss-0.png)
|
|
[](screenshot/chimeracss-1-dark.png)
|
|
[](screenshot/chimeracss-2-autumn.png)
|
|
[](screenshot/chimeracss-3-blues.png)
|
|
[](screenshot/chimeracss-4-golden.png)
|
|
[](screenshot/chimeracss-5-nightsky.png)
|
|
[](screenshot/chimeracss-6-plain.png)
|
|
|
|
|
|
### Classless.css
|
|
|
|
- [Repository](https://github.com/emareg/classlesscss)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](http://classless.de/)
|
|
|
|
[](screenshot/classless.css.png)
|
|
|
|
|
|
### concrete.css
|
|
|
|
- [Repository](https://github.com/louismerlin/concrete.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://concrete.style/)
|
|
|
|
[](screenshot/concrete.css.png)
|
|
|
|
|
|
### dev.css
|
|
|
|
- [Website](https://devcss.devins.page/)
|
|
- [Repository](https://github.com/intergrav/dev.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://devcss.devins.page/demo)
|
|
|
|
[](screenshot/dev.css.png)
|
|
|
|
|
|
### Downstyler
|
|
|
|
- [Repository](https://github.com/waldyrious/downstyler)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://waldyrious.github.io/downstyler)
|
|
|
|
[](screenshot/downstyler.png)
|
|
|
|
|
|
### Fylgja
|
|
|
|
[Explaining what "classless" is](https://fylgja.dev/docs/concepts/classless/).
|
|
|
|
- [Website](https://fylgja.dev/library/base/)
|
|
- [Repository](https://github.com/fylgja/fylgja)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://codepen.io/Fylgja/pen/ExGOZaE)
|
|
|
|
[](screenshot/fylgja.png)
|
|
[](screenshot/fylgja-dark.png)
|
|
|
|
|
|
### holiday.css
|
|
|
|
- [Repository](https://github.com/EvgenyOrekhov/holiday.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://holidaycss.js.org/)
|
|
|
|
[](screenshot/holiday.css.png)
|
|
|
|
|
|
### LatexCSS
|
|
|
|
- [Repository](https://github.com/davidrzs/latexcss)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://davidrzs.github.io/latexcss/)
|
|
|
|
[](screenshot/latex.png)
|
|
|
|
|
|
### magick.css
|
|
|
|
- [Repository](https://github.com/wintermute-cell/magick.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://css.winterveil.net/)
|
|
|
|
[](screenshot/magick.css.png)
|
|
|
|
|
|
### Markdown CSS — Air
|
|
|
|
- [Repository](https://github.com/markdowncss/air)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://markdowncss.github.io/air/)
|
|
|
|
[](screenshot/markdowncss-air.png)
|
|
|
|
|
|
### Markdown CSS — Modest
|
|
|
|
- [Repository](https://github.com/markdowncss/modest)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://markdowncss.github.io/modest/)
|
|
|
|
[](screenshot/markdowncss-modest.png)
|
|
|
|
|
|
### Markdown CSS — Retro
|
|
|
|
- [Repository](https://github.com/markdowncss/retro)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://markdowncss.github.io/retro/)
|
|
|
|
[](screenshot/markdowncss-retro.png)
|
|
|
|
|
|
### Markdown CSS — Splendor
|
|
|
|
- [Repository](https://github.com/markdowncss/splendor)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://markdowncss.github.io/splendor/)
|
|
|
|
[](screenshot/markdowncss-splendor.png)
|
|
|
|
|
|
### Marx
|
|
|
|
- [Repository](https://github.com/mblode/marx)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://codepen.io/mblode/details/JdYbJj)
|
|
|
|
[](screenshot/marx.png)
|
|
|
|
|
|
### MercuryCSS
|
|
|
|
- [Repository](https://github.com/wmeredith/MercuryCSS)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://wmeredith.github.io/MercuryCSS/)
|
|
|
|
[](screenshot/mercurycss.png)
|
|
|
|
|
|
### MVP.css
|
|
|
|
- [Repository](https://github.com/andybrewer/mvp)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://andybrewer.github.io/mvp/)
|
|
|
|
[](screenshot/mvp.css.png)
|
|
|
|
|
|
### new.css
|
|
|
|
- [Repository](https://github.com/xz/new.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://newcss.net/demo/)
|
|
|
|
[](screenshot/new.css.png)
|
|
|
|
|
|
### no-class.css
|
|
|
|
- [Repository](https://github.com/davidpaulsson/no-class)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://davidpaulsson.github.io/no-class/)
|
|
|
|
[](screenshot/no-class.css.png)
|
|
|
|
|
|
### Pico.css
|
|
|
|
- [Repository](https://github.com/picocss/pico)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://picocss.com/examples/preview/)
|
|
|
|
[](screenshot/pico-css.png)
|
|
|
|
|
|
### ridge.css
|
|
|
|
- [Repository](https://github.com/swlkr/ridgecss)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://ridgecss.com/)
|
|
|
|
[](screenshot/ridge.css-light.png)
|
|
[](screenshot/ridge.css-dark.png)
|
|
|
|
|
|
### sakura
|
|
|
|
- [Repository](https://github.com/oxalorg/sakura)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://oxal.org/projects/sakura/demo/)
|
|
|
|
[](screenshot/sakura-normalize-0.png)
|
|
[](screenshot/sakura-normalize-1-earthly.png)
|
|
[](screenshot/sakura-normalize-2-vader.png)
|
|
[](screenshot/sakura-normalize-3-dark.png)
|
|
[](screenshot/sakura-normalize-4-dark-solarized.png)
|
|
|
|
|
|
### shadcn-classless (Nandaleio)
|
|
|
|
- [Repository](https://github.com/Nandaleio/shadcn-classless)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://nandaleio.github.io/shadcn-classless/)
|
|
|
|
[](screenshot/shadcn-classless-nandaleio.png)
|
|
|
|
|
|
### Simple.css
|
|
|
|
- [Repository](https://github.com/kevquirk/simple.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://simplecss.org/demo)
|
|
|
|
[](screenshot/simple-css.png)
|
|
|
|
|
|
### SPCSS
|
|
|
|
- [Repository](https://github.com/susam/spcss)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://susam.github.io/spcss/)
|
|
|
|
[](screenshot/spcss.png)
|
|
|
|
|
|
### style.css
|
|
|
|
- [Repository](https://github.com/css-pkg/style.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://css-pkg.github.io/style.css/)
|
|
|
|
[](screenshot/style.css.png)
|
|
|
|
|
|
### Stylize.css
|
|
|
|
- [Repository](https://github.com/vasanthv/stylize.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://vasanthv.github.io/stylize.css/demo.html)
|
|
|
|
[](screenshot/stylize.css.png)
|
|
|
|
|
|
### tacit
|
|
|
|
- [Repository](https://github.com/yegor256/tacit)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://yegor256.github.io/tacit/)
|
|
|
|
[](screenshot/tacit.png)
|
|
|
|
|
|
### Tiny.css
|
|
|
|
- [Repository](https://github.com/ihsan6133/tiny.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://ihsan6133.github.io/tinycss)
|
|
|
|
[](screenshot/tiny.css-0-light.png)
|
|
[](screenshot/tiny.css-1-dark.png)
|
|
|
|
|
|
### tty.css
|
|
|
|
- [Repository](https://github.com/piranna/tty.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://piranna.github.io/tty.css/)
|
|
|
|
[](screenshot/tty.css.png)
|
|
|
|
|
|
### Tufte CSS
|
|
|
|
- [Repository](https://github.com/edwardtufte/tufte-css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://edwardtufte.github.io/tufte-css/)
|
|
|
|
[](screenshot/tufte-css.png)
|
|
|
|
|
|
### W3C Core Styles
|
|
|
|
- [Website](https://www.w3.org/StyleSheets/Core/Overview)
|
|
- [Demo](https://www.w3.org/StyleSheets/Core/preview)
|
|
|
|
[](screenshot/w3c-core-styles-0-oldstyle.png)
|
|
[](screenshot/w3c-core-styles-1-modernist.png)
|
|
[](screenshot/w3c-core-styles-2-midnight.png)
|
|
[](screenshot/w3c-core-styles-3-ultramarine.png)
|
|
[](screenshot/w3c-core-styles-4-swiss.png)
|
|
[](screenshot/w3c-core-styles-5-chocolate.png)
|
|
[](screenshot/w3c-core-styles-6-traditional.png)
|
|
[](screenshot/w3c-core-styles-7-steely.png)
|
|
|
|
|
|
### water.css
|
|
|
|
- [Repository](https://github.com/kognise/water.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://kognise.github.io/water.css/)
|
|
|
|
[](screenshot/water.css-0-dark.png)
|
|
[](screenshot/water.css-1-light.png)
|
|
|
|
|
|
### Writ
|
|
|
|
- [Repository](https://github.com/programble/writ)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://writ.cmcenroe.me/)
|
|
|
|
[](screenshot/writ.png)
|
|
|
|
|
|
### YoRHa
|
|
|
|
- [Repository](https://github.com/metakirby5/yorha)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://metakirby5.github.io/yorha/)
|
|
|
|
[](screenshot/yorha.png)
|
|
|
|
|
|
## Class-light
|
|
|
|
These are frameworks that do not force you to apply their classes to many elements.
|
|
However,
|
|
they either require something like `<div class="container">` or a bit of your own CSS for a page to look right,
|
|
or offer optional classes to style your content—possibly both.
|
|
|
|
|
|
### Barrel.css
|
|
|
|
- [Repository](https://github.com/EternityForest/barrel.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://eternityforest.github.io/barrel.css/)
|
|
|
|
[](screenshot/barrel.css-0-barrel.png)
|
|
[](screenshot/barrel.css-1-fugit.png)
|
|
[](screenshot/barrel.css-2-banderole.png)
|
|
[](screenshot/barrel.css-3-scrapbook-green.png)
|
|
[](screenshot/barrel.css-4-nord.png)
|
|
[](screenshot/barrel.css-5-blast.png)
|
|
[](screenshot/barrel.css-6-lair.png)
|
|
[](screenshot/barrel.css-7-steam.png)
|
|
|
|
|
|
### Chota
|
|
|
|
- [Repository](https://github.com/jenil/chota)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://jenil.github.io/chota/)
|
|
|
|
[](screenshot/chota.png)
|
|
|
|
|
|
### matcha.css
|
|
|
|
- [Repository](https://github.com/lowlighter/matcha)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://matcha.mizu.sh/)
|
|
|
|
[](screenshot/matcha.css.png)
|
|
|
|
|
|
### Milligram
|
|
|
|
- [Repository](https://github.com/milligram/milligram)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://milligram.io/)
|
|
|
|
[](screenshot/milligram.png)
|
|
|
|
|
|
### mini.css
|
|
|
|
- [Repository](https://github.com/Chalarangelo/mini.css)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://minicss.org/docs)
|
|
|
|
[](screenshot/minicss.png)
|
|
|
|
|
|
### mono
|
|
|
|
- [Repository](https://github.com/artalar/mono)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://monocss.vercel.app/)
|
|
|
|
[](screenshot/mono.png)
|
|
|
|
|
|
### Picnic CSS
|
|
|
|
Caution: Picnic CSS requires specific HTML structure to display certain elements. For example, it hides vanilla checkboxes and radio buttons. The structure serves as the effective class of the element. This means an existing project will have to modify its HTML markup for, e.g., every checkbox and radio button to start using Picnic.
|
|
|
|
- [Repository](https://github.com/franciscop/picnic)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](http://picnicss.com/)
|
|
|
|
[](screenshot/picnic.png)
|
|
|
|
|
|
### SASS-ZERO (Breadboard)
|
|
|
|
A class-light variant of a CSS framework with classes. Made for Ruby on Rails.
|
|
|
|
- [Repository](https://github.com/lazaronixon/sass-zero)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[](screenshot/sass-zero.png)
|
|
|
|
|
|
### Wing
|
|
|
|
- [Repository](https://github.com/kbrsh/wing)
|
|
|
|
|
|
|
|
|
|
|
|
- [Demo](https://kbrsh.github.io/wing/)
|
|
|
|
[](screenshot/wing.png)
|
|
|
|
|
|
## See also
|
|
|
|
- [Drop-in switcher for previewing minimal CSS frameworks](https://github.com/dohliam/dropin-minimal-css)
|
|
|
|
|
|
## License
|
|
|
|
[](https://creativecommons.org/publicdomain/zero/1.0/)
|
|
|
|
To the extent possible under law, D. Bohdan has waived all copyright and related or neighboring rights to this work. By contributing, you agree to release your contribution under the same terms.
|