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

License

MIT

ahansson / hgrid-css Goto Github PK

hgrid-css's Introduction

hgrid-css

A Lightweight and Practical CSS Utility Kit.

Zero Config. Flat Learning Curve.

How to use

How to install

As a node module:

Then, @use as Sass in your project:

From local file or CDN:

@import into your stylesheet:

Local development

Versions

Roadmap

Problems?

Help us improve

Author

License

hgrid-css's People

Contributors

Stargazers

Watchers

Forkers

hgrid-css's Issues

Recommend Projects

Recommend Topics

Recommend Org