Posted October 27th, 2020

Minimal CSS Frameworks

Looking for a lighter framework for your next project? Here’s a list of some of the best minimal CSS frameworks out there.

Chota

  • ⚡️ Super light-weight. Just ~3kb (minified + gzipped).
  • ⛔️ No preprocessor, just plug-n-play
  • ? Magical 12 column grid
  • ? Easy to extend with CSS variables
  • ? Comes with a handful of components & utilities
  • ✅ Good Semantics
  • ? Easy dark mode switch
  • ? Supports icons out-of-the-box

? https://jenil.github.io/chota/

Water.css

Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.

Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.

  • Responsive
  • Good code quality
  • Good browser support
  • Small tiny
  • Beautiful
  • No classes

? https://watercss.kognise.dev/

Sakura

  • Just drop in, even on existing HTML content, to get a pretty looking website (everything “just works”)
  • Quick prototyping, especially when working on backend sites and can’t yet be bothered to fidget with css/html
  • Building a quick (but pretty) site/blog for your best friend or aunt!
  • No need to remember tons of different class names for every other css framework
  • Works amazingly with markdown generated HTML pages (eliminates the need of hacks like including .img img-responsive in markdown-parser generated <img></img> tags
  • Wonderful for people not really good or interested with design as sakura is nothing but a set of reasonable defaults

? https://github.com/oxalorg/sakura

new.css

new.css is a classless CSS framework to write modern websites using only HTML. It’s ~4.5kb.

It’s perfect for-

  • A dead-simple blog
  • Collecting your most used links
  • Making a simple “about me” site
  • Rendering markdown-generated HTML

? https://newcss.net/

MVP.css

A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you’re done.

MVP styles your root HTML elements, so you don’t need to learn a new CSS framework or naming conventions.

MVP is designed to look great on all browsers and devices out of the box for rapid prototyping.

It’s like an amped up CSS reset that you can toss into any project to get decent styling.

? https://andybrewer.github.io/mvp/

Screen

CSS for desktops, tablets, and phones.

Components:

  • Typography
  • Headings
  • Rulers
  • Layout
  • Lists
  • Boxes
  • Forms
  • Tables
  • Responsive

? https://screencss.com/

lit ?

A ridiculously small responsive css framework. lit has two modules: lit and util. Both of them are designed to be as small as possible, and easy to extend.

lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements.

util has many CSS utility classes that can be used to extend lit, or any CSS framework.

? https://ajusa.github.io/lit/

Spectre

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.

  • Lightweight (~10KB gzipped) starting point for your projects
  • Flexbox-based, responsive and mobile-friendly layout
  • Elegantly designed and developed elements and components

? https://picturepan2.github.io/spectre/index.html

Pure.css

A set of small, responsive CSS modules that you can use in every web project.

  • Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It’s what you need, without the cruft.
  • Pure is responsive out of the box, so elements look great on all screen sizes.
  • Pure has minimal styles and encourages you to write your application styles on top of it. It’s designed to get out of your way and makes it easy to override styles.

? https://purecss.io/