hgrid-css

    0.7.1-beta • Public • Published

    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: 0.7.1-beta

    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

    Install

    npm i hgrid-css

    Homepage

    hgrid.io

    DownloadsWeekly Downloads

    159

    Version

    0.7.1-beta

    License

    MIT

    Unpacked Size

    876 kB

    Total Files

    39

    Last publish

    Collaborators

    • ahansson