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.
Documentation: https://hgrid.io
npm install hgrid-css --save-devyarn add hgrid-css --dev@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.
<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>/* 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)
Run 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 /dist folder.
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 hgrid.min.css.
See hgrid.io/documentation/installation for complete usage instructions.
Latest: 1.0
See releases on GitHub.
See the kanban board.
Please don't hesitate to report an issue .
Please don't hesitate to open a pull request.
© Atle Hansson
MIT