Skip to content

๐ŸŒŸ A lightweight and practical CSS utility kit. Zero config. Flat learning curve.

License

Notifications You must be signed in to change notification settings

ahansson/hgrid-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation


Hgrid Banner

hgrid-css

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

Documentation: https://hgrid.io

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';

Local development

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.

Versions

Latest: 1.0

See releases on GitHub.

Roadmap

See the kanban board.

Problems?

Please don't hesitate to report an issue .

Help us improve

Please don't hesitate to open a pull request.

Author

ยฉ Atle Hansson

License

MIT