Neat-bootstrap-grid NPM

neat-bootstrap-grid

neat-bootstrap-grid is a lightweight Sass plugin to generate Bootstrap-style column classes using native CSS grids using the Neat CSS grid as a fallback.

Requirements

Sass 3.4+ or LibSass 3.3+

Neat 2.1.0+

Installation

Install neat-bootstrap-grid using Bower or Yarn. Alternatively, copy _neat-boostrap-grid-standalone.scss and _grid.scss into your project's working directory. Change the @import path in _neat-boostrap-grid-standalone.scss to point to your local copy of Neat.

Bower

bower install neat-bootstrap-grid --save-dev

Yarn

yarn add neat-bootstrap-grid

Usage

Include any of the Bootstrap grid classes in your markup.

<html>
  <body>
    <div class="container">
      <div class="row">
        <a class="title col-xs-12 col-md-6 col-xl-5">Title</a>
        <nav class="main-nav col-xs-12 col-md-6 col-xl-7">
         <a href="#">Services</a>
          <a href="#">Case studies</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </nav>
      </div>
    </div>
  </body>
</html>

To use native CSS grids, ensure $include-css-grids is set to true. By default, neat-bootstrap-grid uses CSS grid classes and applies native grid classes to HTML with the .cssgrid class and Neat grid classes to HTML with the .no-cssgrid class. Use Modernizr's grid detection to manage these classes automatically.

bourbon-neat

@infinitebrahmanuniverse/nolb-nea @everything-registry/sub-chunk-2253 @zalastax/nolb-nea

1.1.1

8 years ago

1.1.0

8 years ago

1.0.0

8 years ago