Simple CSS Libraries (water.css, etc.)

General Discussion
1

I tend to be a design minimalist and like the idea of simple CSS libraries that let me avoid spending too much time on CSS. I saw water.css today and it looks interesting:

(Demo)

Does anyone know of others?

1 Like
2

On looking at it more closely, it might be interesting to build one from scratch. :thinking:

It starts with a light.scss file that sets some defaults and imports parts/core:

$background: #ffffff !default;
$background-alt: #efefef !default;

$text-main: #363636 !default;
$text-bright: #000000 !default;

$links: #0076d1 !default;
$focus: #0096bfab !default;
$border: #dbdbdb !default;
$code: #000000 !default;

$button-hover: #dddddd !default;
$animation-duration: 0.1s !default;

$form-placeholder: #949494 !default;
$form-text: #000000 !default;

@import 'parts/core';

The core.scss file then imports the other files:

@import 'base';
@import 'typography';
@import 'forms';
@import 'links';
@import 'code';
@import 'misc';

Those files contain just a little bit of [s]css in them.

Then it’s built with a gulpfile.

3

I decided to go with Bulma on my latest project, and it’s pretty minimal – 10 KB 25 KB gzipped. No JavaScript dependencies.

Edit: bulma + purgecss is a great combination.

4

Here’s another one that looks interesting. It’s lightweight and only does grids.
http://flexboxgrid.com/

1 Like
5

There is a list of some other CSS libraries here. Some of them look minimalist.

6

Here’s another CSS library. It has a little more to it than the simplest ones, but looks interesting.

7

I saw this on a website today:

8

Here’s a big list of simple CSS libraries:

There’s a demo page and a switcher that you can add to your own site to see what it looks like with each framework.

https://dohliam.github.io/dropin-minimal-css/

9

Here’s another one.