# Grid
[![Travis](https://travis-ci.org/Machy8/Grid.svg?branch=master)](https://travis-ci.org/Machy8/Grid)
[![GitHub release](https://img.shields.io/github/release/machy8/grid.svg)]()
[![npm](https://img.shields.io/npm/v/grid-css-framework.svg?maxAge=2592000)](https://www.npmjs.com/package/grid-css-framework)
[![Bower](https://img.shields.io/bower/v/grid-css-framework.svg?maxAge=2592000?style=plastic)](https://github.com/Machy8/Grid)
[![npm](https://img.shields.io/npm/dm/grid-css-framework.svg)]()
[![npm](https://img.shields.io/npm/dt/grid-css-framework.svg)](https://www.npmjs.com/package/grid-css-framework)
[![](https://data.jsdelivr.com/v1/package/npm/grid-css-framework/badge)](https://www.jsdelivr.com/package/npm/grid-css-framework)
[![License](https://img.shields.io/badge/license-New%20BSD-blue.svg)](https://github.com/Machy8/Macdom/blob/master/license.md)
[![Join the chat at https://gitter.im/Machy8/Grid](https://badges.gitter.im/Machy8/Grid.svg)](https://gitter.im/Machy8/Grid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

- Intuitive, easy to use, mobile first CSS framework based on Flexbox.
- Contains [Normalize](https://github.com/necolas/normalize.css/blob/master/normalize.css) and [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack)
- Uses: [Sass](http://sass-lang.com), [Gulp](http://gulpjs.com) & [Autoprefixer](https://github.com/postcss/autoprefixer)

<p align="center">
  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3">
    <img src="http://www.myiconfinder.com/uploads/iconsets/128-128-8b61de4c84033266e15317a6eb9fda2d-css3.png" width="100" height="100">
  </a>
  <a href="https://github.com/postcss/autoprefixer"> 
    <img src="https://camo.githubusercontent.com/f265315f74ed08b94e473cd7f6f04c291e59a8e2/687474703a2f2f706f73746373732e6769746875622e696f2f6175746f70726566697865722f6c6f676f2e737667" width="100" height="100">
  </a>
  <a href="https://necolas.github.io/normalize.css">
    <img src="https://necolas.github.io/normalize.css/logo.svg" width="100" height="100">
  </a>
  <a href="http://gulpjs.com"> 
    <img src="http://pixxstudios.com/wp-content/uploads/2015/03/gulp-mygulpfile_s.png" width="100" height="100">
  </a>
  <a href="http://sass-lang.com">
    <img src="http://justdevign.com.au/wp-content/uploads/2014/08/SASS_Logo_128.png" width="100" height="100">
  </a>
</p>

## Installation

- **Npm:** ``npm i grid-css-framework``
- **Bower:** ``bower install grid-css-framework``
- **CDN full version:**
````
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/grid-css-framework@2.4.0/dist/grid.min.css">
````
- **CDN mobile version:**
````
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/grid-css-framework@2.4.0/dist/grid.mobile.min.css">
````

## Browser compatibility
| IE | Edge | Firefox | Chrome | Chrome for android | Safari | IOS Safari | Opera | Opera mini | Android browser |
|:--:|:----:|:-------:|:------:|:------------------:|:------:|:----------:|:-----:|:----------:|:---------------:|
|  10 |  13  |    22   |   21   |         53         |   6.1  |     7.1    |   12.1  |     All    |       4.4       |

## Navigation (see [documentation](https://github.com/Machy8/Grid/tree/master/docs))

- [Grid system](https://github.com/Machy8/Grid/blob/master/docs/grid-system.md)

**Alignment**
- [Alignment](https://github.com/Machy8/Grid/blob/master/docs/alignment.md)
- [Positioning](https://github.com/Machy8/Grid/blob/master/docs/positions.md)
- [Ordering](https://github.com/Machy8/Grid/blob/master/docs/order.md)
- [Columns](https://github.com/Machy8/Grid/blob/master/docs/columns.md)

**Formatting**
- [Text formatting](https://github.com/Machy8/Grid/blob/master/docs/text-formatting.md)
- [List formatting](https://github.com/Machy8/Grid/blob/master/docs/list-formatting.md)

**Resize & overflow**
- [Resize](https://github.com/Machy8/Grid/blob/master/docs/resize.md)
- [Overflow](https://github.com/Machy8/Grid/blob/master/docs/overflow.md)

**Resets**
- [Resets](https://github.com/Machy8/Grid/blob/master/docs/resets.md)
- [Clearfix](https://github.com/Machy8/Grid/blob/master/docs/clearfix.md)

**Uncategorized**
- [Container](https://github.com/Machy8/Grid/blob/master/docs/container.md)
- [Cursor](https://github.com/Machy8/Grid/blob/master/docs/cursor.md)
- [Display types](https://github.com/Machy8/Grid/blob/master/docs/display.md)
- [Border radius](https://github.com/Machy8/Grid/blob/master/docs/border-radius.md)
- [Full sizes](https://github.com/Machy8/Grid/blob/master/docs/full-sizes.md)
- [Margin & padding](https://github.com/Machy8/Grid/blob/master/docs/margin-padding.md)
- [Visibility](https://github.com/Machy8/Grid/blob/master/docs/visibility.md)
- [Background colors](https://github.com/Machy8/Grid/blob/master/docs/background.md)
- [Text colors](https://github.com/Machy8/Grid/blob/master/docs/text-colors.md)
- [Buttons](https://github.com/Machy8/Grid/blob/master/docs/buttons.md)
- [Notes](https://github.com/Machy8/Grid/blob/master/docs/notes.md)
- [Forms](https://github.com/Machy8/Grid/blob/master/docs/forms.md)