Code Self Study Forum

Simple CSS Libraries (water.css, etc.)

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

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.

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.

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

1 Like