I build a modular CSS framework: Helder.

17 april 2018 - 1 minuten leestijd

Helder is a no-fuss CSS framework and SASS boilerplate with minimalist designed components such as forms, cards, and tables and ensures consistency between browsers.

CSS framework

A CSS framework is a collection of CSS files used for web projects to save time styling components, structuring layouts, and providing cross-browser compatibility. It can be a nightmare without a CSS framework to style a component that works well and the same in all browsers.

In my opinion, the most popular frameworks have become so large that they also bring a lot of noise. You simply don’t use a lot of code. You have to make sure that it takes more time to find out all the possibilities of a framework than to take care of the CSS yourself.

Helder

Helder is a compact CSS framework that, with a simple grid system and minimalist design, provides for the structure of layouts and consistently styled components and leaves out the superfluous. This makes Helder with only 11.3 KB a real lightweight:

Framework Size
Helder 11 KB
Bootstrap 187 KB
Foundation 90 KB
Materialize 114 KB

The documentation describes how you can start with Helder, which components have been styled and how you can use this.

View documentation  -  View components

SASS

Helder is also available in SASS. If you are familiar with SASS, I recommend using this option to make it even easier to adjust Helder to your own preferences.