Pattern Library

A practical approach to streamlining workflows
and coding processes across teams.

Grid Systems

Using Columns

Below is an example of a variety of grids you can create using columns. These columns can have even percentages or uneven. These columns remain responsive no matter what the browser size.

Using Float

You can see below an example of using float to establish your grid systems. You can see that when the browser is big enough that the right Sidebar stays to the right. When the browser gets too small that side bar moves below the main content.

Main Content using a fixed width of 45em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at tellus nisl. Integer imperdiet felis quis felis suscipit, vel sollicitudin nisl euismod. Nulla ornare faucibus sodales. Vestibulum sed felis volutpat, auctor erat a, accumsan elit. Curabitur a neque urna. Duis id ex viverra, consequat felis et, euismod lacus. Pellentesque sagittis lectus odio, sed consectetur elit molestie vitae. Nunc venenatis egestas leo in vestibulum. Vivamus volutpat venenatis luctus. Cras ac rhoncus lacus. Vestibulum et ante ipsum. Etiam lacinia ipsum id metus aliquet efficitur.


Nam pretium non purus non porttitor. Proin ut magna et mi feugiat pharetra. Curabitur ullamcorper euismod tincidunt. Quisque laoreet sit amet augue vel ultrices. Cras lobortis felis ut odio lacinia posuere. Sed porta sit amet massa ac blandit. Duis lectus leo, tempor nec lacus ut, molestie condimentum metus. Etiam at leo commodo, pellentesque magna ut, varius ligula.