A simple, yet customizable flexbox-based grid written in SCSS
Using Node Package Manager
npm install --save simple-flexgrid
Alternatively using unpkg.com as a CDN
-
For SCSS usage you will need both the main and the configuration file
-
For CSS usage you will need the main CSS file
This generates just the CSS you use. No more, no less.
// in SCSS
import 'path/to/simple-flexgrid.scss';
.some-container {
@include row();
}
.some-content {
@include col(4, 12, 8px);
@include mq('max-width: 800px') {
@include col(6, 12, 8px);
}
@include mq('max-width: 450px') {
@include col(12, 12, 8px);
}
}This mixin creates the grid parent.
This mixin creates a column that spans the x/y-ths of the parent row, where x is the first parameter and mandatory, while y is the second parameter (and optional). The third parameter sets the size of the columns gutter (also optional).
Media queries are an essential part of any grid system, and they get tedious to write. Simple-flexgrid contains a short mixin to solve that.
This way generates a huge overhead of CSS classes, but hey it's easy.
// In SCSS file
import 'path/to/simple-flexgrid.scss';
@include simpleFlexgrid('my-prefix', 10, 0px, (350px, 500px, 750px, 1100px));The following code generated a 10-based grid with 0px gutters, the names of the clasess have the prefix 'my-prefix', as well as custom brakepoints.
All parameters are optional and default settings will be used if left out.
<!-- in HTML -->
<div class='row'>
<div class="my-prefix-xl-6-12 my-prefix-md-12-12">Some content</div>
<div class="my-prefix-xl-6-12 my-prefix-md-12-12">Some other content</div>
</div>Using Simple Flexgrid as an external stylesheet.
The precompiled CSS version of Simple Flexgrid is using the default settings.
<!-- In HTML -->
<head>
<link rel="stylesheet" href="path/to/simple-flexgrid.css">
</head>
<body>
<div class='row'>
<div class="xl-6-12 md-12-12">Some content</div>
<div class="xl-6-12 md-12-12">Some other content</div>
</div>
</body>Simple-flexgrid has a few helper classes
The example below will push the element 2/12th of the containing row. All parameters are optional, and default settings will be used if left out.
// In SCSS
.my-class {
@include push(2, 12, 8px);
}Alternatively
<!-- in HTML -->
<div class='xl-push-2-12'></div>The example below will push the next element 2/12th of the containing row. All parameters are optional, and default settings will be used if left out.
// In SCSS
.my-class {
@include space(2, 12, 8px);
}Alternatively
<!-- in HTML -->
<div class='xl-space-2-12'></div>Simple-flexgrid is by default set to be a 12-based grid with 8px gutters. The default breakpoints are sm: 450px, md: 650px, lg: 800px, xl: 1200px.
All of these settings can be changed by editing the config file: simple-flexgrid/dist/_config.SCSS