# FlexigridCSS
A css framework which incorporates Flexbox and CSS Grid.
## Quick install
FlexigridCSS is constantly in development! Try it out now:
### NPM
```sh
npm install flexigridcss
```
**or**
### Yarn
```sh
yarn add flexigridcss
```
### Import
After installation, you can import the CSS file into your project using either of these snippet:
```sh
import 'flexigridcss/dist/flexigridcss.css'
```
or
```sh
import 'flexigridcss/dist/flexigridcss.min.css'
```
Feel free to raise an issue or submit a pull request.
## CSS only
FlexigridCSS is a **CSS** framework. As a result, the sole output is a single CSS file, with a min variation. [flexigridcss.css](https://github.com/joelpierre/flexigridcss/blob/master/dist/flexigridcss.css)
You can either use that file or download the Sass source files to customize the variables and change the default grid structure.
There is **no** JavaScript included. This is just a helpful style layer to add to your development and is not a full proof solution. It was made for developers needing a solid foundation and a foundation only.
There are planned elements to be styled and built however not enough to build a site from like bootstrap or foundation.
## The Grid
#### What do we have as of now?
At present we have the basic ``.container > .row > .flex-x-x`` setup.
##### Container/Container-fluid
All ``.container / .container-fluid``'s are ``display: flex;``. With ``.container`` having a fixed width and ``.container-fluid`` having the width of the entire viewport.
There is an optional modifier of ```.container--grid```, ```.container-fluid--grid``` which applies a grid layout to the container following our column structure.
##### Rows
All ``.row``'s are
```scss
.row {
...
display: flex;
flex-direction: row;
...
}
```
we have also built in modifiers for the row element. They carry the core row styling so can be used without adding two classes.
```scss
.row--reverse {
flex-direction:row-reverse;
}
.row--column {
flex-direction:column;
}
.row--column-reverse {
flex-direction:column-reverse;
}
```
##### Flex Items
We swap the ``.col-`` for ``.flex-`` and in turn we introduce ``.grid-`` for new grid helper classes.
Similar to Bootstrap our flex items are named:
```scss
.flex-1 ... 12 {} // No Breakpoint - Has 12 columns
.flex-xl-1 ... 12 {} // Big desktop
.flex-lg-1 ... 12 {} // Desktop
.flex-md-1 ... 12 {} // Tablet Landscape
.flex-sm-1 ... 12 {} // Tablet Portrait
```
##### Grid Items
Our grid item naming is **TBD**
#### Breakpoints
We change our layout oclumns based on the breakpoint. Please see below:
Breakpoint
Size (px)
min-width
max-width
Columns
Mobile
599px
-
Y
12
Tablet Portrait
600px
Y
Y
12
Tablet Landscape
900px
Y
Y
12
Desktop
1200px
Y
Y
12
Big Desktop
1800px
Y
Y
12
We cater for both desktop first builds and mobile first build.
#### Whats to come?
We are working on "out-of-the-box" layout bodies using CSS Grid alone. These will typically follow the following markup:
```html
...
...
```
and at times...
```html
...
...
```
Where applying a class name to the ```` we will then structure the ``, and