Blueprint Grid

Blueprint Grid is a multimethod library for creating responsive and dynamic layouts for mobile apps and websites. It is built using CSS and vanilla javascript, and is available for free under the MIT license. Blueprint Grid is the layout component for Brutalist Framework.

Support for Bootstrap Grid is included with the Blueprint Grid package, so your Bootstrap HTML template layouts will still work.

There are 6 methods for creating layouts:

• B3Grid
• CSS Grid
• Print Grid
• Bento Grid
• Chaos Grid
• PolyGrids

Plan for the Future.

The term "blueprint" is used to describe a floorplan, or layout plan. The future of the internet experience are PWAs (progressive web apps), as the user experience has become primarily mobile. Blueprint Grid was created with the purpose to be a resource that can help future-proof mobile-first layout design. 

Getting Started

You'll only need the following files:

• source/blueprintgrid.css
• source/methods/js/bento-grid.js
  (required if using Bento Grid)
• source/methods/js/chaos-grid.js
  (optional unless using randomize class for Chaos Grid)

The blueprintgrid.css file will import all the grid method CSS files from the /source/methods directory, which contains the following method CSS source files:

• b3grid.css
• bento-grid.css
• bootstrap-grid.css
• chaos-grid.css
• css-grid.css
• media-queries.css
• polygrids.css
• print-grid.css
• variables.css

The above files can be referenced independently. The CSS variables file is imported into each of the other files, EXCEPT FOR media-queries and bootstrap-grid.

Blocks & Bricks Base Grid

B3Grid is a flexbox-based method to create layouts, and is comprised of "units", each of which has different behaviors. There are four types of B3Grid units:

• Panes
• Blocks
• Bricks
• Tiles

All unit types can be manipulated by changing directions, alignments, and ordering. There is also built-in responsive behavior support for changing widths across various device (screen) sizes.

Basic Demo    Panes Demo

Responsive Demo

Base Widths

Quick Widths

Standard CSS Grid

CSS Grid is an efficient method for creating layouts. Rows and columns are automatically formed, and auto-adjust to best fit content within them. Unlike the flexbox-based B3Grid method, there is less control over controlling the size (width and height) of each element. However, markup is much simpler and requires applying fewer classes to elements.

NOTE: CSS grid elements cannot be nested within flexbox elements! However, flexbox (B3Grid) elements can be nested within CSS Grid.

CSS Grid Demo    Nesting Demo

CSS Grid

Print-friendly Grid

Intended primarily for printer-friendly content, Print Grid can be used to divide content up into columns. Create elements with up to 12 columns. Columns can have specified widths in either cm- or em-based units.

Some content may be designed for specific paper page sizes, intended for printing. We've included over a dozen common paper page sizes, which Print Grid content can be wrapped within.

View Demo

A4 Paper Page with Print Grid

Dynamic Auto-fill Grid

Bento Grid is a dynamic layout method that relies on vanilla javascript to create a layout. It automatically positions elements, depending on their size within a grid. Element dimensions can easily be specified using a data attribute (ex: data-bento="3x3").

Additionally, optional "filler" elements can be used to occupy available space. Elements will scale to size to accomodate their content.

View Demo

Bento Grid layout example

The Anti-Grid Grid

This method is ideal for anti-design enthusiasts! Elements are rendered as inline-blocks that are either relative- or absolute-positioned. Elements can also be offset in various directions, creating a chaotic and audacious layout with overlapping content. There is also an option to put the chaos back into order on mobile devices.

Chaos Grid elements can be thrown into further random chaos by being randomly positioned, skewed, and rotated (requires vanilla javascript).

Standard Chaos Demo

Randomized Chaos Demo

Chaos Grid (randomized)

Experimental Grids

PolyGrids are creative grids that are comprised of items rendered as polygon shapes, allowing for a multi-dimensional appearance. They work exclusively with unordered lists, so they are most ideal for more creative linked content.

View Demo

PolyGrid

IsoGrid