Breakpoints
The grid is mobile-first, and based on a 12-column system. The grid includes gutters, column spanning, 4 breakpoints, and column alignment.
How it Works
The grid system is responsive meaning that the same content can be designed for multiple devices. A breakpoint is the point at which a website will adapt the same page content across several different viewports.
The State of Oklahoma Web Framework is designed for two breakpoints; one at 768px wide and above with a max container width of 1176px; and one below 768px. The grid is used for all existing pages on the website.
How to Use
The grid is essentially an organizing device. Below are the suggesting configurations of column width. The larger breakpoint can accommodate for the division of content across columns.
768 and Above
Max Container Width 1176
Below 768px
