Jump to main content
hgrid-icon

Installation

NPM or Yarn

From the root of your project, install hgrid-css as a dev dependency:

  $ npm i hgrid-css -D

  $ yarn add hgrid-css --dev

Which additional packages you need to use hgrid as .sass/.scss in your specific project depends on your framework.

// React:
$ npm i sass -D

// Vue:$ npm i sass sass-loader -D

// Note that `node-sass` is deprecated. We use `sass` instead.

Check the detailed integration documentation on how to make hgrid work seamlessly with React, Vue, Nuxt, Svelte, Eleventy and Astro.

CDN 

  <!-- Without CSS grid utilities (slimmer) -->
https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css

<!-- Including CSS grid utilities (heavier) -->
https://unpkg.com/hgrid-css@latest/dist/hgrid.grid.min.css

Include the link to one of the precompiled hgrid kits from CDN, or a local copy, before any other stylesheets in your html.

  <head>
  <link rel="stylesheet" href="https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css">
    <!-- more css -->
</head>

You can also @import it at the top of your local stylesheet:

  /* From node_modules */@import './../../node_modules/hgrid-css/dist/hgrid.min.css';
  /* From CDN */@import 'https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css';

You can now customize hgrid anywhere after the import in the code flow, by overwriting its CSS utilities or custom properties with your own.

Bake your own

Note: If your project is Node.js driven, read this instead: How to integrate hgrid as a module.

  $ git clone https://github.com/ahansson/hgrid-css.git
1. Prerequisites

With the source code you can modify or extend hgrid to fit your needs, regardless of whether you use Node or not. If you don't use Node.js, you can't use the included Sass complation locally, so you'll have to use the precompiled CSS from the hgrid-css/dist/ folder, or install an editor plugin such as Live Sass Compiler.

2. Install Packages

If you do have Node.js installed, cd into the hgrid-css/ folder and run npm install. This will set up what you need to compile Sass locally.

3. Watch for Changes

Execute npm run watch to listen for changes to files in the sass/ directory and output it as CSS in dist/.

4. Modify the Output

Use variables to switch off animations or CSS grid in order to reduce the output size. Add to, remove from, or edit the entry file sass/hgrid.scss if you want to modify the final build. Adding your own custom .scss partials to the sass/* directory is a quick and dirty way to modify hgrid. If you prefer to keep things cleaner, refer to the integration article for detailed recipes.

We use Autoprefixer to add some backwards browser compatibility. The result is then minified with the excellent JavaScript implementation of the Dart Sass minification tool.

5. Build Production Files

Use npm run build to prefix, minify and output these CSS files to dist/:

  • hgrid.css (prefixed, uncompressed)
  • hgrid.css.map (source map for hgrid.css)
  • hgrid.min.css (prefixed, minified)
  • hgrid.min.css.map (source map for hgrid.min.css)

The build can (and should) be further optimized before going live. Read more about the recommended production build steps.

← Previous: About hgrid

Next: Variables →