FlexigridCSS
A css framework which incorporates Flexbox and CSS Grid.
Quick install
FlexigridCSS is constantly in development! Try it out now:
NPM
npm install flexigridcssor
Yarn
yarn add flexigridcssImport
After installation, you can import the CSS file into your project using either of these snippet:
import 'flexigridcss/dist/flexigridcss.css'or
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
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
.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.
.row--reverse .row--column .row--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:
.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:
... ...and at times...
... ...Where applying a class name to the <body> we will then structure the <header>, <main> and <footer> accordingly. Using the correct properties so that these layouts are responsive and then having @supports fallbacks.
You can then use flex items inside these core layouts to achieve your desired designs.
We can then go a step further and create component layouts for the <header> & <footer>, using grid.
Browser Support
FlexigridCSS uses autoprefixer to make (most) Flexbox and Grid features compatible with earlier browser versions. According to Can I use flexbox & grid, FlexigridCSS is compatible with recent versions of:
- Chrome
- Edge
- Firefox
- Opera
- Safari
Internet Explorer (10+) is only partially supported. And we have fallbacks in place where display:grid; is not available.
Copyright and license
Code copyright 2018 Joel Pierre-Powell. Code release under the MIT license.