Semantic Bootstrap Layout Classes with an Offset

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.scssfile.

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.



// Grid system

.main {

// No sidebar, `.main` is full width
@include make-sm-column($main-sm-columns);

// `.main` is contained by the `.sidebar-primary` parent class -

// this class is added to the <body> of pages that display the sidebar.

// If a sidebar displays, `.main` can take a reduced width.

.sidebar-primary & {

// `.main` is narrower by 2 columns, to give room for the offset
@include make-sm-column($main-sm-columns - $sidebar-sm-columns - 2 );

}

}

.sidebar {

// Set the width, then the offset, using Bootstrap mixins
@include make-sm-column($sidebar-sm-columns);
@include make-sm-column-offset(2);

}

RESOURCES