Skip to content
CSS-Grid/Flexbox grid system. SCSS/BEM setup utilising a few loops and a bunch of settings to generate up to 12 grid-row elements, all nestable, using inline classes. Also includes some named grid-template-areas.
CSS HTML JavaScript
Branch: master
Clone or download
Latest commit dc459c3 Jan 17, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src edited nested layout - plus set max width-height in doc-head to heade… Jan 13, 2020
.gitignore edits: readme, pckge-lock Oct 8, 2019
LICENSE updated License for both parties (tri/powellian) and removed orig ver… Oct 8, 2019
README.md
package.json updated node deps Jan 12, 2020
postcss.config.js init commit - removed bits, edited License in lieu of new version. Oct 8, 2019
webpack.common.js init commit - removed bits, edited License in lieu of new version. Oct 8, 2019
webpack.dev.js
webpack.prod.js init commit - removed bits, edited License in lieu of new version. Oct 8, 2019

README.md

PiGrid

GitHub release (latest by date) GitHub David

What
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.

Inspired by Foundation/Bootstrap , PiGrid layout consists of an outer container, then row, then inner pod/s. Add the relevant classes and the layout will flow accordingly.

How
Outer container elements are wrapped around the complete markup or individual blocks; width is modified via class modifiers: --mini, --midi, --maxi. There's an optional outer wrapper class for full width/height usilising vw/vh attributes.

Inner 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.

Content pods use the following: pigr__pod pigr__pod--N - where N is the grid fraction (fr) denoted on the parent row.

For example, when using pigr__row pigr__row--6, the inner pods could be:

  • pigr__row pigr__pod--1 and pigr__row pigr__pod--5
  • 3x pigr__row pigr__pod--2
  • 3x pigr__row pigr__pod--1 and pigr__row pigr__pod--3
  • pigr__row pigr__pod--2 and 1x pigr__row and 1x pigr__row pigr__pod--3

etc...

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 pigr__row--6:

  • 4x pigr__pod and 1x pigr__row pigr__pod--2

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).

QA:
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:

  • ./src/styles/
  • ./src/index.html

Everything else is related to the webpack build.

You'll need git and node.js on your computer before running, then:

  1. git clone https://github.com/powellian/pigrid your-project-name

  2. cd your-project-name && rm -rf .git

  3. npm install

  4. npm start - fires up localhost:8080 and live reloading for development

  5. npm run build creates a ./dist folder 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 --style flag).

Fill 'yer boots!

You can’t perform that action at this time.