<commit_before># Flexbox Grid Mixins

Sass Mixins to generate Flexbox grid.

**Flexbox Grid Mixins** is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).

Flexbox Grid Mixins documentation: [https://thingsym.github.io/flexbox-grid-mixins/](https://thingsym.github.io/flexbox-grid-mixins/)

## Example

### HTML

```
<div class="grid">
<div class="grid__col-3">
  3
</div>
<div class="grid__col-9">
  9
</div>
</div>
```

### Sass

```
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

$default-grid-gutter: 2%;

.grid {
  @include grid($gutter: $default-grid-gutter);

  > .grid__col-3 {
    @include grid-col($col: 3, $gutter: $default-grid-gutter);
  }
  > .grid__col-9 {
    @include grid-col($col: 9, $gutter: $default-grid-gutter);
  }
}
```

### CSS

```
.grid {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1%;
}

.grid > .grid__col-3 {
  box-sizing: border-box;
  -webkit-flex: 0 0 23%;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin: 0 1% 2%;
}

.grid > .grid__col-9 {
  box-sizing: border-box;
  -webkit-flex: 0 0 73%;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin: 0 1% 2%;
}
```

## Installation

### npm

```
$ npm install flexbox-grid-mixins --save-dev
```

### bower

```
$ bower install flexbox-grid-mixins --save
```

### Manual Install

Include sass/\_flexbox-grid-mixins.scss in the appropriate location in your project.

## Getting Started

### 1. Import Flexbox Grid Mixins in Sass/SCSS file

```
@import 'flexbox-grid-mixins';
```

Example : import form node_modules

```
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
```

### 2. Define the grid container

```
.grid {
  @include grid();
}
```

### 3. Generate the grid columns

```
.grid__col-3 {
  @include grid-col(3);
}
.grid__col-9 {
  @include grid-col(9);
}
```

## Documentation

See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-mixins/](http://thingsym.github.io/flexbox-grid-mixins/)

### Mixins Reference and Example

* [Mixins Reference](http://thingsym.github.io/flexbox-grid-mixins/#Mixins-Reference)
* [Basic Example](http://thingsym.github.io/flexbox-grid-mixins/#Basic-Example)
* [Grid System Example](http://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example)
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example/example.html)
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/holy-grail-layout.html)
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/responsive.html)
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)

### Development

1. run ```$ sudo yum install nodejs npm```
2. run ```$ sudo npm install --global gulp-cli```
3. Forking on GitHub
4. run ```$ cd /path/to/flexbox-grid-mixins```
5. run ```$ npm install```<commit_msg>docs: fix README<commit_after># Flexbox Grid Mixins

Sass Mixins to generate Flexbox grid.

**Flexbox Grid Mixins** is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).

Flexbox Grid Mixins documentation: [https://thingsym.github.io/flexbox-grid-mixins/](https://thingsym.github.io/flexbox-grid-mixins/)

## Example

### HTML

```
<div class="grid">
<div class="grid__col-3">
  3
</div>
<div class="grid__col-9">
  9
</div>
</div>
```

### Sass

```
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

$default-grid-gutter: 2%;

.grid {
  @include grid($gutter: $default-grid-gutter);

  > .grid__col-3 {
    @include grid-col($col: 3, $gutter: $default-grid-gutter);
  }
  > .grid__col-9 {
    @include grid-col($col: 9, $gutter: $default-grid-gutter);
  }
}
```

### CSS

```
.grid {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1%;
}

.grid > .grid__col-3 {
  box-sizing: border-box;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin: 0 1% 2%;
}

.grid > .grid__col-9 {
  box-sizing: border-box;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin: 0 1% 2%;
}
```

## Installation

### npm

```
$ npm install flexbox-grid-mixins --save-dev
```

### Yarn

```
$ yarn add flexbox-grid-mixins --dev
```

### Bower (deprecated)

```
$ bower install flexbox-grid-mixins --save
```

### Manual Install

Include sass/\_flexbox-grid-mixins.scss in the appropriate location in your project.

## Getting Started

### 1. Import Flexbox Grid Mixins in Sass/SCSS file

```
@import 'flexbox-grid-mixins';
```

Example : import form node_modules

```
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
```

### 2. Define the grid container

```
.grid {
  @include grid();
}
```

### 3. Generate the grid columns

```
.grid__col-3 {
  @include grid-col(3);
}
.grid__col-9 {
  @include grid-col(9);
}
```

## Documentation

See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-mixins/](http://thingsym.github.io/flexbox-grid-mixins/)

## Package manager

[flexbox-grid-mixins - npm](https://www.npmjs.com/package/flexbox-grid-mixins)

### Mixins Reference and Example

* [Mixins Reference](http://thingsym.github.io/flexbox-grid-mixins/#Mixins-Reference)
* [Basic Example](http://thingsym.github.io/flexbox-grid-mixins/#Basic-Example)
* [Grid System Example](http://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example)
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example/example.html)
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/holy-grail-layout.html)
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/responsive.html)
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)

### Development

1. run ```$ sudo yum install nodejs npm```
2. run ```$ sudo npm install --global gulp-cli```
3. Forking on GitHub
4. run ```$ cd /path/to/flexbox-grid-mixins```
5. run ```$ npm install```
{'fraction_non_alphanumeric': 0.18038419490863658, 'fraction_numerical': 0.015930032797126348, 'mean_word_length': 3.9337442218798153, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 23, 'https://': 5, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '273109', 'n_tokens_mistral': 2541, 'n_tokens_neox': 2348, 'n_words': 507}