CSS-Grid/Flexbox grid system - Demo.
A SCSS setup utilising a few loops and a bunch of settings to generate up to 12 grid-row elements, all nestable, using inline classes. Utilises BEM throughout. A newly added
<header> uses named
grid-template-areas, seperate from the rest of the grid.
container elements are wrapped around the complete markup or individual blocks; width is modified via class modifiers:
--maxi. There's an optional outer wrapper class for full width/height usilising
row blocks indicate the divisible aspect of the content pods e.g.:
pigr__row pigr__row--N- where N is the grid fraction (
fr), for the child
pods use the following:
pigr__pod pigr__pod--N - where N is the grid fraction (
fr) denoted on the parent
For example, when using
pigr__row pigr__row--6, the inner pods could be:
pigr__row pigr__pod--2and 1x
Omitting the pod size leads to the elements auto-sizing in the available space, based on the sizing dictated by the parent row element. For example within
The Demo uses the class
.pigr__DEMO to apply colour to the rows and grid items (pods).
Remove that class and it'll be colour-inert, but the layout stays intact.
For future versions I'll make a semantic mixin library version in the style of Bourbon/Neat to negate the inline classes (preferable imho).
Tested iteratively from ground-up in all decent modern browsers, with Firefox and Chrome device emulators used extensively throughout.
Mobile testing done in Android: Firefox & Chrome and iOS: Safari.
Tablet devices mostly tested in emulators - will more do as/when kit is available.
The new Edge Chromium renders perfectly.
Edge 16+ tested intermittently in Browserstack, needs more (in progress).
Currently it blows up in I-Exploder 11 - am working on this.
No IE testing or support for anything earlier than v11.
Webpack setup - Dev build in localhost with maps and live-reload; Production build task.
For convenience this PiGrid example is built into the brilliant tris-webpack-boilerplate for static multi-page web builds. This includes a localhost server and live reloading, plus
-ms- vendor prefixing to ensure the project works in dodgy browsers.
The PiGrid specific files are in:
Everything else is related to the webpack build.
git clone https://github.com/powellian/pigrid your-project-name
cd your-project-name && rm -rf .git
npm start- fires up localhost:8080 and live reloading for development
npm run buildcreates a
./distfolder with all website assets optimized and compressed.
Compiling - vanilla SASS style
To compile PiGrid to a compressed .scss file just run the following command:
sass src/index.scss route/to/wherever/some-filename.scss --style compressed
This outputs a compressed .scss file (with
.min automatically appended), plus a source map file.
Currently the whole system compiles down to 10k compressed, 16k uncompressed (for uncompressed just omit the
Fill 'yer boots!