Semantic Bootstrap Layout Classes with an Offset
Bootstrap, SCSS
Making CSS classes descriptive, or semantic, can help improve code maintainability by describing an elements purpose, rather than it’s presentational function.
People level this as a criticism against Bootstrap (and other CSS frameworks) - where column names are presentational rather than semantic. In other words, in a typical Bootstrap project the main content area might have a class name like .col-md-8
, which is not semantic.
Fortunately, Bootstrap makes it pretty easy to define semantic classes that apply the built-in presentational logic, by use of the make-x-column()
mixins.
Sage - Example of Semantically Defining Classes
The Sage WordPress starter theme (a great starting point for WordPress projects) defines a .main
and a .sidebar
class out of the box.
The column widths for these elements can then be set in a _variables.scss
file.
Offset Sidebar
I’ve modified the Sage definition of .main
and .sidebar
to add an offset to the sidebar, using the additional Bootstrap mixin make-sm-column-offset()
.
I find the offset really good for user experience - constraining the main content area generally makes for greater readability, and the extra whitespace between content and sidebar can reduce the sensation of clutter.
Resources
comments powered by Disqus