About hgrid

A lightweight, laptop-first CSS utility kit. The Swiss Army knife of CSS, with a mostly flat learning curve.

Hgrid is a starting point intended to make HTML work out of the box. It's built with Sass and integrates smoothly into any Node.js driven project. It's not a UI framework, but provides some defaults so you can start prototyping without having to deal with browser quirks, unstyled elements and basic responsiveness.

Raison d'être

Recent CSS/framework development has brought great technical progress to the the CSS world, but at a significant cost. Setting everything up is often unnecessary complicated, with lots of configuration and involved learning. With hgrid there's no configuration at all, unless you want and need it. Integrating it into your projects is easy peasy and you'll very soon be doing the stuff you love (building things!) instead of figuring out how to get directives and plugin modules to work.

Background

Hgrid's precursor was born in an internal codebase for a company in Norway, from 2012 and onwards. It was still too early for flexbox in production. Floats were used. The layout system was made (and is still in use) for the accounting software Conta. It was almost certainly inspired by Bootstrap 2 that was released around that same time. A modernized and extended version in Sass was created years later. It powers many different websites, such as euronextvps.no, the Norwegian central security depository. Today's version is in fact the third, but the first as open source.

How lightweight?

The Brotli compressed kit weighs in at just 13 kB. Less if you switch off its animation utilities. 15 kB if you include the CSS grid utilities. It can be slimmed down further in the proposed build process.

Why "laptop-first"?

It's a practical and pragmatic approach.

Most web design is created on a laptop or desktop screen. That's a fact that won't change anytime soon, due to the tools designers use. As a center point between smaller and larger viewports, the "laptop" (which really could be set to any screen width in hgrid) usually includes most of the features of a user interface. When working with responsive design, it's a good middle ground for your mental model. Building with unstyled markup by default can be confusing and limit productivity.

Ahmad Shadeed lays out a case for a pragmatic approach in this piece. He shows how mobile-first sometimes generates more code, not less, contrary to what many believe.

Starting with a laptop sized viewport, adjusting for smaller and larger screens along the way, is a smart solution, unless you create exclusively for mobile devices. A mobile-first version of hgrid is on the roadmap.

The laptop-first paradigm shouldn't prevent you from writing custom CSS to supplement hgrid in whatever way you prefer.

Comments?

Email: hgrid-css@protonmail.com

Next: Installation →