Top Related Projects
:cherry_blossom: a minimal css framework/theme.
A drop-in collection of CSS styles to make simple websites just a little nicer
MVP.css — Minimalist classless CSS stylesheet for HTML elements
Simple.css is a CSS template that allows you to make a good looking website really quickly.
A classless CSS framework to write modern websites using only HTML.
Quick Overview
The dohliam/dropin-minimal-css repository is a collection of minimal CSS frameworks that can be easily dropped into web projects. It provides a curated list of lightweight CSS stylesheets that can be quickly implemented to enhance the appearance of web pages without adding significant overhead.
Pros
- Easy to implement with minimal setup required
- Lightweight, resulting in faster page load times
- Offers a variety of styles to choose from
- Provides a consistent look across different browsers
Cons
- Limited customization options compared to full-featured CSS frameworks
- May lack advanced features or components found in larger frameworks
- Some included frameworks may have limited browser compatibility
- Not suitable for complex web applications requiring extensive styling
Code Examples
- Adding a stylesheet to your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dohliam/dropin-minimal-css@master/min/tacit-css-1.5.5.min.css">
- Switching between different stylesheets using JavaScript:
function switchCSS(stylesheet) {
document.getElementById('style-switch').setAttribute('href', stylesheet);
}
- Applying a random stylesheet on page load:
window.onload = function() {
const stylesheets = [
'min/bare-min-0.1.0.min.css',
'min/basic-min-0.1.0.min.css',
'min/holiday-min-0.1.0.min.css'
];
const randomStylesheet = stylesheets[Math.floor(Math.random() * stylesheets.length)];
document.getElementById('style-switch').setAttribute('href', randomStylesheet);
};
Getting Started
To use a dropin-minimal-css stylesheet in your project:
- Choose a stylesheet from the repository's
min
directory. - Add the following line to the
<head>
section of your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dohliam/dropin-minimal-css@master/min/YOUR_CHOSEN_STYLESHEET.min.css">
Replace YOUR_CHOSEN_STYLESHEET
with the name of the stylesheet you want to use. Your page will now use the selected minimal CSS framework for styling.
Competitor Comparisons
:cherry_blossom: a minimal css framework/theme.
Pros of Sakura
- More opinionated design with a focus on aesthetics
- Includes responsive typography and spacing
- Offers a dark mode option out of the box
Cons of Sakura
- Larger file size (8.2KB vs. 0.5-2KB for dropin-minimal-css options)
- Less customization options without modifying the source
- May require more adjustments to fit specific design needs
Code Comparison
Sakura:
html {
font-size: 62.5%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
body {
font-size: 1.8rem;
line-height: 1.618;
max-width: 38em;
margin: auto;
color: #4a4a4a;
background-color: #f9f9f9;
padding: 13px;
}
dropin-minimal-css (min-nord.css):
body{
font-family:sans-serif;
max-width:70ch;
padding:2ch;
margin:auto;
color:#333;
font-size:1.2em;
}
Both projects aim to provide minimal CSS for quick styling, but Sakura offers a more refined look with additional features, while dropin-minimal-css focuses on extreme simplicity and smaller file sizes.
A drop-in collection of CSS styles to make simple websites just a little nicer
Pros of Water.css
- More comprehensive styling, covering a wider range of HTML elements
- Offers multiple themes (light and dark) out of the box
- Actively maintained with regular updates and improvements
Cons of Water.css
- Larger file size, which may impact page load times
- Less customizable without modifying the source code
- May override existing styles more aggressively
Code Comparison
Water.css:
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
color: #363636;
background: #ffffff;
}
Dropin-minimal-css:
body {
font-family: sans-serif;
line-height: 1.5;
max-width: 40em;
margin: 0 auto;
padding: 1em;
}
Water.css provides more detailed styling with specific font choices and color definitions, while Dropin-minimal-css offers a simpler, more minimalistic approach. Water.css also includes a max-width in pixels, whereas Dropin-minimal-css uses em units for better responsiveness.
MVP.css — Minimalist classless CSS stylesheet for HTML elements
Pros of MVP
- More comprehensive styling, covering a wider range of HTML elements
- Includes responsive design features out of the box
- Offers a dark mode option
Cons of MVP
- Larger file size, potentially impacting page load times
- Less customizable due to more opinionated styling choices
- May require more overrides to achieve a unique look
Code Comparison
MVP:
:root {
--border-radius: 5px;
--box-shadow: 2px 2px 10px;
--color: #118bee;
--color-accent: #118bee15;
--color-bg: #fff;
--color-bg-secondary: #e9e9e9;
}
Dropin Minimal CSS:
body {
font-family: sans-serif;
line-height: 1.5;
max-width: 40em;
padding: 0 1em;
margin: auto;
}
MVP provides more detailed CSS variables for easy customization, while Dropin Minimal CSS focuses on minimal, straightforward styling. MVP's approach allows for more consistent theming across elements, but Dropin Minimal CSS's simplicity makes it easier to understand and modify quickly.
Both projects aim to provide minimal CSS frameworks, but MVP offers more features and styling options at the cost of increased complexity and file size. Dropin Minimal CSS stays true to its name with a more bare-bones approach, making it ideal for projects requiring a truly minimal starting point.
Simple.css is a CSS template that allows you to make a good looking website really quickly.
Pros of simple.css
- More comprehensive default styling, including form elements and tables
- Includes a dark mode option out of the box
- Actively maintained with regular updates and improvements
Cons of simple.css
- Larger file size compared to dropin-minimal-css
- Less flexibility in terms of customization options
- Requires more specific HTML structure for optimal results
Code Comparison
simple.css:
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
color: #363636;
background: #fff;
}
dropin-minimal-css:
body {
font-family: sans-serif;
line-height: 1.5;
max-width: 40em;
margin: 0 auto;
padding: 1em;
}
The code comparison shows that simple.css provides more detailed default styling, including specific font choices and color settings, while dropin-minimal-css offers a more minimalistic approach with fewer predefined styles. This reflects the overall philosophy of each project, with simple.css aiming for a more polished out-of-the-box experience and dropin-minimal-css focusing on simplicity and ease of customization.
A classless CSS framework to write modern websites using only HTML.
Pros of new.css
- More comprehensive default styling, including better typography and spacing
- Includes dark mode support out of the box
- Smaller file size (3.7KB vs 4.3KB for dropin-minimal-css)
Cons of new.css
- Less customization options compared to dropin-minimal-css's multiple themes
- Lacks specific styling for some HTML elements (e.g., tables) that dropin-minimal-css covers
- May require additional CSS for more complex layouts
Code Comparison
new.css:
:root {
--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
--nc-tx-1: #000000;
--nc-tx-2: #1A1A1A;
--nc-bg-1: #FFFFFF;
--nc-bg-2: #F6F8FA;
}
dropin-minimal-css:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 1em;
}
Both projects aim to provide minimal CSS for quick styling of web pages, but new.css offers a more opinionated and feature-rich approach, while dropin-minimal-css focuses on simplicity and customization through multiple themes.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Drop-in switcher for previewing minimal CSS frameworks
This is a quick drop-in CSS switcher to allow for previewing some of the many minimal CSS-only frameworks that are available. See the demo or drop the switcher into your own page to see how different frameworks would look together with your content.
This project only includes minimal frameworks, in other words, boilerplate / classless frameworks that require no adjustment of the corresponding HTML and can be simply dropped into the project to provide a starting point for further design. No additional javascript, compiling, pre-processors, or fiddling with classes should be required for these to look good and be responsive.
Usage
To use the CSS switcher, just add the following line anywhere within the body tag on your page:
<script src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
That's it! You should now be able to cycle through the different frameworks by choosing them from the dropdown at the top of the page.
Keyboard shortcut
You can quickly switch between frameworks by pressing the modifier key or keys on your keyboard + s
to focus the switcher dropdown menu, followed by the up and down keys to move up and down the list.
Bookmarklet
The bookmarklet is a convenient way to preview how different CSS frameworks would look on any HTML page. Just paste the following code into your address bar to create a CSS switcher for any site:
javascript:(function()%7Bvar%20body%20%3D%20document.getElementsByTagName('body')%5B0%5D%3Bscript%20%3D%20document.createElement('script')%3Bscript.type%3D%20'text%2Fjavascript'%3Bscript.src%3D%20'https%3A%2F%2Fdohliam.github.io%2Fdropin-minimal-css%2Fswitcher.js'%3Bbody.appendChild(script)%7D)()
Or alternatively, drag the link at the top of the demo page to your browser's bookmark bar.
Boomarklet generated by the Bookmarklet Creator. Thanks to markdown-css for the idea!
API
There is a simple API available to allow linking directly to particular stylesheets on the demo page. For example:
https://dohliam.github.io/dropin-minimal-css/?sakura
The above links directly to the demo with Sakura CSS.
Frameworks
Adding frameworks
If you know of a minimal framework that hasn't been included here, please create an issue or pull request so that we can add it to the list!
List of frameworks
- a11yana by @alexandersandberg (Preview · MIT)
- almond by @alvaromontoro (Preview · MIT)
- axist by @ruanmartinelli (Preview · MIT)
- bahunya by @Kimeiga (Preview · MIT)
- bamboo by @rilwis (Preview · MIT)
- bare by @longsien (Preview · MIT)
- base by @matthewhartman (Preview · MIT)
- basic by @vladocar (Preview · MIT)
- bolt by @tbolt (Preview · MIT)
- bonsai by @ciar4n (Preview · MIT)
- brutalist by @blainsmith (Preview · MIT)
- bullframe by @marcop135 (Preview · MIT)
- caiuss by @IonicaBizau (Preview · MIT)
- caramel by @Lumios (Preview · MIT)
- cardinal by @cbracco (Preview · MIT)
- centigram by @milouse (Preview · MIT)
- centurion by @justinhough (Preview · GPL)
- chota by @jenil (Preview · MIT)
- cirrus by @spiderpig86 (Preview · MIT)
- classless by @emareg (Preview · MIT)
- clmaterial by @24aitor (Preview · MIT)
- codify by @zdroid (Preview · MIT)
- comet by @marcbruederlin (Preview · MIT)
- concise by @ConciseCSS (Preview · MIT)
- concrete by @louismerlin (Preview · MIT)
- cutestrap by @tylerchilds (Preview · GPL)
- flat-ui by @Designmodo (Preview · CC BY & MIT)
- fluidity by @mrmrs (Preview · MIT)
- furtive by @johno (Preview · MIT)
- gd by @hawkz (Preview · MIT)
- generic by @Vereis (Preview · MIT)
- github-markdown by @sindresorhus (Preview · MIT)
- gutenberg by @bafs (Preview · MIT)
- hack by @egoist (Preview · MIT)
- hello by @arp242 (Preview · PD/ISC)
- hiq by @jonathanharrell (Preview · MIT)
- holiday by @EvgenyOrekhov (Preview · MIT)
- html-starterkit by @zitrusfrisch (Preview · MIT)
- hyp by @krszwsk (Preview · MIT)
- kathamo by @debashisbarman (Preview · MIT)
- koochak by @peyman3d (Preview · MIT)
- kraken by @cferdinandi (Preview · MIT)
- kube by @imperavi (Preview · MIT)
- latex by @vincentdoerig (Preview · MIT)
- lemon by @appalaszynski (Preview · MIT)
- lissom by @Looky1173 (Preview · MIT)
- lit by @Ajusa (Preview · MIT)
- lotus by @goatslacker (Preview · MIT)
- magick by @wintermute-cell (Preview · MIT)
- markdown by @mrcoles (Preview · MIT)
- marx by @mblode (Preview · MIT)
- material by @daemonite (Preview · MIT)
- materialize by @Dogfalo (Preview · MIT)
- mercury by @wmeredith (Preview · MIT)
- milligram by @cjpatoilo (Preview · MIT)
- min by @owenversteeg (Preview · MIT)
- mini by @Chalarangelo (Preview · MIT)
- minimal by @billyshall (Preview · MIT)
- minimal-stylesheet by @chr15m (Preview · MIT)
- missing-style by @dz4k (Preview · BSD 2-Clause "Simplified" License)
- mobi by @xcatliu (Preview · MIT)
- motherplate by @leemunroe (Preview · MIT)
- mu by @BafS (Preview · MIT)
- mui by @amorey (Preview · MIT)
- mvp by @andybrewer (Preview · MIT)
- neat by @codazoda (Preview · MIT)
- new by @3x (Preview · MIT)
- no-class by @davidpaulsson (Preview · MIT)
- normalize by @necolas (Preview · MIT)
- oh-my-css by @egoist (Preview · MIT)
- ok by @andrewh0 (Preview · MIT)
- pandoc-scholar by @pandoc-scholar (Preview · GPL v2)
- paper by @rhyneav (Preview · ISC)
- papier by @alexanderGugel (Preview · MIT)
- pavilion by @getpavilion (Preview · MIT)
- picnic by @FranciscoP (Preview · MIT)
- pico by @picocss (Preview · MIT)
- preface by @cluzier (Preview · MIT)
- primer by @primer (Preview · MIT)
- propeller by @digicorp (Preview · MIT)
- pure by @yahoo (Preview · BSD)
- roble by @violapeter (Preview · MIT)
- sakura by @oxalorg (Preview · MIT)
- sanitize by @csstools (Preview · CC0)
- scooter by @dropbox (Preview · Apache)
- semantic-ui by @Semantic-Org (Preview · MIT)
- shoelace by @claviska (Preview · MIT)
- siimple by @jmjuanes (Preview · MIT)
- simple by @kevquirk (Preview · MIT)
- skeleton by @dhg (Preview · MIT)
- skeleton-framework by @skeleton-framework (Preview · MIT)
- skeleton-plus by @oltdaniel (Preview · MIT)
- snack by @nzbin (Preview · MIT)
- spcss by @susam (Preview · MIT)
- spectre by @picturepan2 (Preview · MIT)
- style by @ungoldman (Preview · ISC)
- stylize by @vasanthv (Preview · MIT)
- superstylin by @caiogondim (Preview · MIT)
- tacit by @yegor256 (Preview · MIT)
- tent by @ulinaaron (Preview · MIT)
- terminal by @Gioni06 (Preview · MIT)
- thao by @Sanfra1407 (Preview · Apache)
- tui by @vinibiavatti1 (Preview · MIT)
- vanilla by @bradleytaunt (Preview · MIT)
- vital by @doximity (Preview · Apache)
- water by @kognise (Preview · MIT)
- wing by @KingPixil (Preview · MIT)
- writ by @causal-agent (Preview · ISC)
- yamb by @runxel (Preview · Blue Oak)
- yorha by @metakirby5 (Preview · MIT)
Theme collections
- asciidoctor-skins by @darshandsoni:
- ads-gazette by @darshandsoni (Preview · MIT)
- ads-medium by @darshandsoni (Preview · MIT)
- ads-notebook by @darshandsoni (Preview · MIT)
- ads-tufte by @darshandsoni (Preview · MIT)
- attri by @raj457036:
- attri-bright-light-green by @raj457036 (Preview · MIT)
- attri-midnight-green by @raj457036 (Preview · MIT)
- attri-dark-forest-green by @raj457036 (Preview · MIT)
- attri-dark-fairy-pink by @raj457036 (Preview · MIT)
- attri-light-fairy-pink by @raj457036 (Preview · MIT)
- awsm by @igoradamenko:
- awsm-default by @igoradamenko (Preview · MIT)
- awsm-black by @igoradamenko (Preview · MIT)
- awsm-bigstone by @igoradamenko (Preview · MIT)
- awsm-gondola by @igoradamenko (Preview · MIT)
- awsm-mischka by @igoradamenko (Preview · MIT)
- awsm-pastelpink by @igoradamenko (Preview · MIT)
- awsm-pearllusta by @igoradamenko (Preview · MIT)
- awsm-tasman by @igoradamenko (Preview · MIT)
- awsm-white by @igoradamenko (Preview · MIT)
- bootswatch by @thomaspark:
- boot-cerulean by @thomaspark (Preview · MIT)
- boot-cosmo by @thomaspark (Preview · MIT)
- boot-cyborg by @thomaspark (Preview · MIT)
- boot-darkly by @thomaspark (Preview · MIT)
- boot-flatly by @thomaspark (Preview · MIT)
- boot-journal by @thomaspark (Preview · MIT)
- boot-lumen by @thomaspark (Preview · MIT)
- boot-paper by @thomaspark (Preview · MIT)
- boot-readable by @thomaspark (Preview · MIT)
- boot-sandstone by @thomaspark (Preview · MIT)
- boot-slate by @thomaspark (Preview · MIT)
- boot-spacelab by @thomaspark (Preview · MIT)
- boot-superhero by @thomaspark (Preview · MIT)
- boot-yeti by @thomaspark (Preview · MIT)
- markdowncss by @johnotander:
- w3c-core by @Bert Bos:
- w3c-chocolate by @Bert Bos (Preview · W3C)
- w3c-midnight by @Bert Bos (Preview · W3C)
- w3c-modernist by @Bert Bos (Preview · W3C)
- w3c-oldstyle by @Bert Bos (Preview · W3C)
- w3c-steely by @Bert Bos (Preview · W3C)
- w3c-swiss by @Bert Bos (Preview · W3C)
- w3c-traditional by @Bert Bos (Preview · W3C)
- w3c-ultramarine by @Bert Bos (Preview · W3C)
See also
- workflow - Quick prototyping script for creating rich html and pdfs from markdown documents (based on dropin-minimal-css)
- asciidoctor-skins - CSS stylesheets for asciidoctor (with a switcher based on dropin-minimal-css)
Other similar collections
- CSS Bed by @ubershmekel
- classless-css by @dbohdan
- cleanrmd by @gadenbuie
- awesome-css-frameworks by @troxler
Acknowledgements
- Sample HTML5 markup based on html5-test-page by @cbracco (MIT)
- Example images in the demo are by MichaelMaggs on Wikimedia Commons
- Example videos provided by the Blender Foundation via the HTML5-Test-Videos project
- Embedded audio Night Owl by Broke For Free at the Free Music Archive
- Special thanks to Tacit CSS, which was the original inspiration for making this list to answer the question "Where can I find more frameworks like Tacit?"
- Table of contents made with tocdown
License
MIT.
Top Related Projects
:cherry_blossom: a minimal css framework/theme.
A drop-in collection of CSS styles to make simple websites just a little nicer
MVP.css — Minimalist classless CSS stylesheet for HTML elements
Simple.css is a CSS template that allows you to make a good looking website really quickly.
A classless CSS framework to write modern websites using only HTML.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot