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 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.
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:
- Tablet - Desktop: 768 pixels wide and larger with a max container width of 1176 pixels
- Mobile Device - Tablet: Smaller than 768 pixels
The grid has 12 columns and is used for all pages on the website.
Tablet - Desktop, Large Screen Widths
Max Width: 1176 Pixels
One Column Full Width
100%
Two Column Left Side Bar
33%
66%
Two Column Right Side Bar
66%
33%
Two Column Split
50%
50%
Three Column
33%
33%
33%
Mobile Device - Tablet, Small Screen Widths
Max Width: 768 Pixels
One Column Full Width
100%
Two Column Left Side Bar
100%
Two Column Split
100%
Last Modified on
Oct 15, 2025