https://github.com/justinmacneil/neat-bootstrap-grid

https://github.com/justinmacneil/neat-bootstrap-grid

bourbon-neat css-grid sass

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/justinmacneil/neat-bootstrap-grid
• Owner: justinmacneil
• License: mit
• Created: 2018-01-24T16:46:19.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-22T17:15:55.000Z (almost 7 years ago)
• Last Synced: 2025-01-03T16:07:05.290Z (8 days ago)
• Topics: bourbon-neat, css-grid, sass
• Language: CSS
• Size: 36.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# neat-bootstrap-grid

neat-bootstrap-grid is a lightweight Sass plugin to generate [Bootstrap](https://github.com/twbs/bootstrap)-style column classes using native CSS grids using the Neat CSS grid as a fallback.

# Requirements

[Sass](https://github.com/sass/sass) 3.4+ or [LibSass](https://github.com/sass/libsass) 3.3+

[Neat](https://github.com/thoughtbot/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

  ```bash

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

  ```

## Yarn

  ```bash

  yarn add neat-bootstrap-grid

  ```

# Usage

Include any of the Bootstrap grid classes in your markup. 

  ```html

  

    

      


        


          Title

          

           Services

            Case studies

            About

            Contact

          

        

      

    

  

  ```

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](https://modernizr.com/) grid detection to manage these classes automatically.