A Lightweight and Practical CSS Utility Kit.
Zero Config. Flat Learning Curve.
Hgrid is a starting point intended to make HTML work out of the box. It's not a UI framework, but provides sensible defaults so you can start prototyping without having to deal with browser quirks, unstyled elements and basic responsivity.
How to use
How to install
As a node module:
npm install hgrid-css --save-dev
yarn add hgrid-css --dev
Then, @use as Sass in your project:
@use 'hgrid-css/sass/hgrid' with ( // example customization $link-color: #ffe88d, $link-color-hover: #fff0b4, $container-max-width: 1600px, $link-underline-color: #ffe88d, $use-global-link-underlines: true, $include-grid: false );
For detailed information with step by step recipes on how to integrate hgrid in different JS frameworks, please refer to the documentation.
From local file or CDN:
<head> <!-- Without CSS grid utilities (slimmer) --> <link rel="stylesheet" href="https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css"> <!-- Including CSS grid utilities (heavier) --> <link rel="stylesheet" href="https://unpkg.com/hgrid-css@latest/dist/hgrid.grid.min.css"> </head>
@import into your stylesheet:
/* From node_modules */ @import './../etc./node_modules/hgrid-css/dist/hgrid.min.css';
/* From CDN */ @import 'https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css';
Requires Node.js installed on your system (or use an editor plugin such as live-sass)
npm install from the root of the hgrid-css folder.
Start compiling hgrid's
.scss files to
.css with the command
npm run watch. Changes you make to files in the
/sass folder will result in css files being updated in the
To produce the compiled, prefixed and minified hgrid output, use
npm run build. It uses Autoprefixer to add some backwards compatibility before minifying the result as
See hgrid.io/documentation/installation for complete usage instructions.
See releases on GitHub.
See the kanban board.
Please don't hesitate to report an issue .
Help us improve
Please don't hesitate to open a pull request.
© Atle Hansson