💄A lightweight CSS3 flexbox grid with extra flex functionalities.
A lightweight CSS3 flexbox grid with extra flex functionalities.
at-flex-grid is a simple lightweight 12 column grid implemented using CSS3 flexbox specifications.
In Addition to the 12 column grid flexbox features are provided wrapped in classes or mixins.
The Grid works flawlessly along other grids like bootstrap or foundation because of the prefix in the naming convention.
npm install --save at-flex-grid
bower install --save at-flex-grid
<link rel="stylesheet" href="/pathToFile/at-flex-grid.css">
<link rel="stylesheet" href="/pathToFile/at-flex-grid-bootstrap3.css">
@import 'pathToFile/at-flex-grid-grid.scss';
To customize the grid breakpoints, container widths, gutters and so on, Include the at-flex-grid.scss in your scss file and edit the following variables to suit your preferences.
/*
* Grid Breakpoints
*/
// Extra small screen / phone
$grid-breakpoint-xs: 0;
// Small screen / phone
$grid-breakpoint-sm: 576px;
// Medium screen / tablet
$grid-breakpoint-md: 768px;
// Large screen / desktop
$grid-breakpoint-lg: 992px;
// Extra large screen / wide desktop
$grid-breakpoint-xl: 1200px;
/*
* Container widths
*/
$container-max-width-sm: 540px;
$container-max-width-md: 720px;
$container-max-width-lg: 960px;
$container-max-width-xl: 1140px;
/*
* Gutters and spacing
*/
$padding-col-x: 0.5rem;
$padding-container-x: 1rem;
To start the development server on localhost:9001
gulp start
or npm start
To build the project to ‘dist/‘ run gulp build
gulp build
or npm run build