Blueprint Grid is a multimethod CSS library for creating responsive layouts for mobile apps and websites. It is free and open source under the MIT license. Blueprint Grid is the layout component for Brutalist Framework (version 3+).
There are four methods for creating layouts:
B3Grid: Blocks and Bricks Base Grid (Flexbox-based)
CSS Grid: auto-adjusting layouts based on CSS grid
Print Grid: paper-friendly print grid
PolyGrids: creative grids with multiple dimensions
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.
B3Grid (Blocks and Bricks Base Grid) 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, and 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.
CSS Grid is an alternate 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.
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.
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.