Category: Front End

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);
}

If you’re using images in a website, it’s very important that they are properly re-sized and compressed. If you have megabytes of over-large images, you could potentially slow down page loading time. Continue reading “Optimise Images for the Web”