Starting a New Side Project? Here Are 4 Lightweight CSS Frameworks to Get up and Running.

Introduction

We've all been there before. You get an idea for a new website and want to start building it as soon as possible. With pencil and paper, you’ve devised a general idea of the layout and JavaScript code.

But unlike last time, you don't want to have to spend hours tinkering with stylesheets. Unlike other times, you don't want to have to spend time overriding Bootstrap's defaults.

Also, you've heard of TailwindCSS, but you don't know know what difference it would make. Plus, it seems to have some controversy.

What you need now is a simple solution that is easy to style. What’s more, it must be straightforward to customise when needed.

So today, we’ll look at four different options—in no particular order—to style your next side project.

Spectre.css

Pico.css

Milligram

Skeleton

(Note: The number of GitHub stars for each framework is accurate as of this article's publish date)

Spectre.css

⭐: 11.1K

Size: ~10 KB

npm install spectre.css --save

Spectre.css is a modern CSS framework that provides elegantly styled-components with no extra JavaScript. If you’ve used Bootstrap before, there should be no trouble with using Spectre.css as the class names used are quite similar.

Using Flexbox, Spectre can add responsive layouts that work great on mobile devices. And like the other frameworks on this list, Spectre provides a range of styled components to cover most needs. Furthermore, I like how they recommend customizing via Sass variables.

// Define variables to override default ones
$primary-color: #2e5bec;
$dark-color: #3e396b;

// Import full Spectre source code
@import "node_modules/spectre.css/src/spectre";

Pico.css

⭐: 8.2K

Size: ~10 KB

npm install @picocss/pico --save

For the smallest side projects, Pico.css makes the process rapid. The framework prides itself on having styles for all native HTML elements, without adding any JavaScript or external dependencies. What’s more, they even have a classless version for even smaller bundle sizes!

Although Pico.css doesn’t have as many components as Spectre.css (like badges, pagination, or chips), barebones components are still included. But it comes with a dark mode, flexbox-based responsive containers, and pure semantic form elements.

Customizing your version of Pico.css is simple. Either alter the source code :root variables, or use SASS as seen before.

$primary-500: #e91e63;
$primary-600: #d81b60;
$primary-700: #c2185b;

// Import Pico
@import "@picocss/pico/scss/pico";

Milligram

⭐: 9.9K

Size: ~2.2 KB

npm install milligram --save

Don’t let the bundle size fool you. Milligram is a performance-focused framework that provides the essentials. So, it may be a great starting point for your next project. Plus, you’ll feel much more productive when writing cleaner CSS resets.

Adopting a mobile-first approach, including a responsive grid system, it’s no wonder that Milligram manages to get around 3,000 weekly NPM downloads.

Then, elements can be overridden as needed.

/* Extending The Inheritances */

/* Custom color */
.button-black {
  background-color: black;
  border-color: black;
}

.button-small {
  font-size: .8rem;
  height: 2.8rem;
  line-height: 2.8rem;
  padding: 0 1.5rem;
}

Skeleton

⭐: 18.8K

Size: ~18.7 KB

Download the zip file and add it to your project.

Skeleton is a straightforward CSS framework for getting started quickly. Its design is mobile-first by default and provides utility classes, dark-mode styling, and a flexbox-based grid.

The entire framework is built with 400 lines of code, often leaving you with enough to start building. Moreover, this minimalistic approach makes every element easy to extend.

Conclusion

All four frameworks discussed today can help boost your website’s performance. Nowadays, the average page weight is 2.3 MB, which inevitably affects page load times. Did you know that 1 in 4 visitors would abandon a website if it takes longer than 4 seconds to load? Without a doubt, it can be those hefty CSS and JavaScript frameworks that affect bundle size the most.

Lightweight CSS frameworks are great when you want a simple website layout without spending time learning the intricacies of larger frameworks like Tailwind CSS, UIKit, or Bootstrap.

If you are looking to start a new side project or are already using one of these four frameworks, post a comment.

Thanks for reading. I'll see you soon.