Blueprint CSS

Blueprint CSS is a modern responsive CSS layout library & grid built on top of Flexbox.
Blueprint CSS is lightweight weighing at only 2.5kb minified and gziped.

Download v2.4.1
GitHub

Auto fit colums

Blueprint leverages HTML attibutes to help namespace layout based CSS. Attributes allow consise layout names and allows us to easily understand the layout of our views. The attibute prefix bp- can be removed or configured by the Sass source. Columns automatically evenly fill space in each flex row. The grid is a 12 column grid.

6 columns
6 columns

Responsive Columns

Responsive column classes are available. Column breakpoints are adjustable using the Sass varaibles or alterning the CSS output. All columns are nestable. We denote classes with responsive suffixes. Blueprint CSS follows BEM like patterns and Googles Material Design layout recomendations.

Extra small or Any
Phones
Small devices (480px)
Phones/Tablets
Medium devices (720px)
Tablets/Laptops
Large devices (960px)
Laptop/Desktop
Extra Large devices (1440px)
Hi-res Laptop/Desktop
Class col 1 col 1@sm col 1@md col 1@lg col 1@xl
Behavior Always column width Width 100% to start, column width at above breakpoints
4 columns
4 columns
4 columns

Dynamic Columns

Column classes can be stacked to create multiple column breakpoints.

1
2
3
4

Full Grid Layout

Example showing all 12 column options.

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12


Alignments

Blueprint CSS has multiple classes to help column alignments including vertical alignments.

Stretch matching heights

1
2
3
Bacon ipsum dolor amet alcatra landjaeger hamburger sausage, pork chop tail shank turducken beef shankle t-bone frankfurter.

Vertically aligned columns

1
2
3
Bacon ipsum dolor amet alcatra landjaeger hamburger sausage, pork chop tail shank turducken beef shankle t-bone frankfurter

Top aligned columns

1
2
3
Bacon ipsum dolor amet alcatra landjaeger hamburger sausage, pork chop tail shank turducken beef shankle t-bone frankfurter

Bottom aligned columns

1
2
3
Bacon ipsum dolor amet alcatra landjaeger hamburger sausage, pork chop tail shank turducken beef shankle t-bone frankfurter

Centered columns

1
1

Vertical and Hoizontal Column Centering

Using a combination of row center middle we can create centered containers.

Some centered content goes here.

Reordering Columns

Flexbox allows us to reorder columns regardless of the HTML order. Reordering has sm md lg breakpoints matching the grid breakpoints. Example: first or first@md

First

1
2
3
4

Last

1
2
3
4

Reverse

1
2
3
4

Spacing

Between

1
2
3

Around

1
2
3

Gutter Spacing

With special modifiers you can remove gutters in row layouts. gutter-none gutter-bottom-none gutter-between-none Example with gutter-none we can remove the all gutters from our row. This is usefull for rows that have custom padding or spacing and need to override the grids default.

1
2
3
4
5
6

Column Offset

Offset utilities allows a column to be offset on a given row.


col 4
col 4 offset-4
col 3@md offset-3@md
col 3@md offset-3@md
col 6@md offset-3@md

Grid Nesting

Grids can be nested withing other grids to create more complex layouts


col 6@lg
col
col 6@lg
col 3 6@md

col 3 6@md
col 3 6@md
col 3 6@md

Utility Classes

Utility classes are for elements or small modules that need a minor layout adjustments.


Max Classes (max-width)

Using max classes you can set the max width on elements proportionally to the max width of the container class. This allows containers and elements to be created that are flexible but do not scale with the view port. Example if we add a 6--max the element max width will be half of the container class width. (1000/2 = 500px). This can be useful for setting a max width on objects such as forms or flexible images. Max classes can be used anywhere and are not restricted to only in row.

8/12

4/12

Flex, Fit & Fill

The flex, fill and fit classes can be used to align variable size elements. Example use the flex class to set all immedate children to flex items. Once set use fit to adjust element to fit only to its content size and use fill to fill in all available space. The number class can be used in combination with the fill to adjust to specific sizes.

<
Content
>


Visibility Helpers

Blueprint CSS contains multiple helper classes to show and hide content to the corresponding grid breakpoints.

col
col
Extra Small devices
Phones
Small devices
Phones/Tablets (≥480px)
Medium devices
Tablets/Laptops (≥720px)
Large devices
Laptop/Desktop (≥960px)
Extra Large devices
Hi-res Laptop/Desktop (≥1440px)
Container width auto 480px 720px 960px 1440px
show Show Show Show Show Show
hide Hide Hide Hide Hide Hide
show@sm Hide Show Show Show Show
show@md Hide Hide Show Show Show
show@lg Hide Hide Hide Show Show
show@xl Hide Hide Hide Hide Show
hide@sm Show Hide Hide Hide Hide
hide@md Show Show Hide Hide Hide
hide@lg Show Show Show Hide Hide
hide@xl Show Show Show Show Hide


Spacing Helpers

Spacing helpers provide a set of utility classes for margin and padding. Often we find that we want to make minor adjustments in our layouts without having to write additional view specific CSS. The utility classes can be adjusted site wide with a few simple Sass variables if needed.

			
$xs-spacing: 4px;
$sm-spacing: 8px;
$md-spacing: 16px;
$lg-spacing: 24px;

		
margin--sm
padding-left
padding-bottom--lg
					
margin
margin--xs
margin--sm
margin--lg
margin--none

margin-top
margin-top--xs
margin-top--sm
margin-top--lg
margin-top--none

margin-right
margin-right--xs
margin-right--sm
margin-right--lg
margin-right--none

margin-bottom
margin-bottom--xs
margin-bottom--sm
margin-bottom--lg
margin-bottom--none

margin-left
margin-left--xs
margin-left--sm
margin-left--lg
margin-left--none

				
					
padding
padding--xs
padding--sm
padding--lg
padding--none

padding-top
padding-top--xs
padding-top--sm
padding-top--lg
padding-top--none

padding-right
padding-right--xs
padding-right--sm
padding-right--lg
padding-right--none

padding-bottom
padding-bottom--xs
padding-bottom--sm
padding-bottom--lg
padding-bottom--none

padding-left
padding-left--xs
padding-left--sm
padding-left--lg
padding-left--none

				


Text Alignment

text-left
text-right
text-center


Additional Utility Helper Classes

			

float-center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  float: none;    
}

float-left {
  float: left;
}

float-right {
  float: right;
}

clear-fix:after {
  content: "";
  display: table;
  clear: both;
}

full-width {
  width: 100%;
}

		


Errors

Blueprint will pick up common errors when using a CSS grid such as invalid column or row structures.

6 columns
6 columns

Editor Support (1.x only, v2 coming soon)

Blueprint CSS also has a VSCode snippets extension to make grids even easier. Download from the VSCode Extension Library.

VSCode Snippets for Blueprint CSS

Performance

Modern browsers have optimized and improved Flexbox and is now very fast at rendering. Check out this article Flexbox layout isn't slow by Paul Irish for more details.


Why Grids and Utility Helpers?

I thought Flexbox was to help get rid of CSS grids and keep our HTML semantic?

This library has been designed for large scale websites and web applications where thousands of lines of HTML and CSS exist as well as many developers and teams contributing of varying skill levels. Grid classes and utility classes scale very well in these environments. This grid is to help layout only. HTML & CSS should still be composed of well defined components. Please check out the following articles on this topic.

For individuals weaned on an ideology where “semantic HTML” means using content-derived class names (and even then, only as a last resort), it usually requires you to work on a large application before you can become acutely aware of the impractical nature of that approach. You have to be prepared to discard old ideas, look at alternatives, and even revisit ways that you may have previously dismissed.

From About HTML Semantics and Front-End Architecture by Necolas Gallagher


Browser Support

Blueprint CSS has full support in all major browser vendors as well as ie10+.

Partial IE8 and IE9 support can be acheived by adding the polyfill JavaScript. The polyfill includes and Flexibility to add Flexbox support to IE8 and IE9 as well as Respond for media queries in IE8. Note certain flexbox alignments are not supported by the grid or the Flexibility but general layout with the grid should work. For ie9 and ie8 support you must specify a column breakpoint ex: @sm, @md, @lg.

Warning if you have a significantly large user base on IE9 or below. Adding these polyfills will require your users to have good JavaScript support. Also this will slow down the rendering speed for these users. Take this into consideration when using these polyfills.