project

I build a modular CSS framework: Helder.

Jeffrey Overmeer
Apr 17, 2018

Helder is a minimalist CSS framework and SASS boilerplate that offers consistently styled components such as forms, cards, and tables across browsers. It aims to make styling and layout work easier for developers.

Helder

Helder is a CSS framework that aims to provide a no-fuss, minimalist approach to styling web projects. It includes components such as forms, cards, and tables, and ensures that they are consistently styled across different browsers. One of the benefits of using Helder is its small size, weighing in at only 11.3 KB. This makes it a lightweight alternative to other, more feature-heavy frameworks that may include unnecessary code. Instead, Helder focuses on providing a simple grid system and stylish, yet minimalistic components, so that you can focus on building your project without getting bogged down in unnecessary details.

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

Helder comes with a variety of pre-styled components that you can use on your website, including buttons, forms, tables, and more. You can view a list of these components and see how they look by visiting the “View components” link above.

To use a component, simply include the appropriate HTML markup in your project and apply the appropriate class names to your elements. For example, to create a button using Helder, you would use the following HTML:

<button class="btn">Click me!</button>

SASS

If you want to customize the appearance of your Helder-based website further, you can use the provided SASS variables to change the values of various styling properties. This allows you to easily adjust the colors, fonts, and other aspects of the framework to better match your own design preferences.

We hope that you find Helder helpful in creating beautiful and functional websites! If you have any questions or need further assistance, don’t hesitate to reach out.

Comments