1140px SASS Grid a semantic grid system

Example Layouts

Four Columns
Six Columns
Eight Columns
Ten Columns
Three Columns
Four Columns
Three Columns
Four Columns
Four Columns
Five Columns
Five Columns
Four Columns
Four Columns
Six Columns
Six Columns
Three Columns
Six Columns
Three Columns

Semantic Layout Examples

These examples feature breakpoints that change the structure by using `@extend` instead of nonsemantic grid classes like "col-8 push-2".

This is quite simple

But effective

Article title

By Mr. Author

In a container with a width of the full 1140 pixels, a centered block of text spanning six or eight columns might look fine, but as it scales down, it will become too narrow before it hits mobile breakpoints. By using mixins, we can easily change the number of columns at each breakpoint.

Compare this to the centered four columns above, which becomes too narrow as you resize the page inward.

✪ All Politics, All Sports

Article Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.