CSS Utilities

CSS Styles for Content Creators

Updating content on a website where the backend is controlled by an agency can be difficult. Often the CSS isn’t built to be flexible and as the site grows new requirements come up.

To solve this I created a collection of CSS styles to augment existing site styles and act as utility classes. This lets content creators style new elements while staying within the overall style guidelines of the site.

Examples & Documentation

HTML examples and documentation can be dropped into a basic page on any CMS so it can be referenced when adding content to a site.

A Supplemental Tool

The utilities were built to address specific needs and not to act as the end-all, be-all of CSS frameworks. They are a combination of ideas from other libraries like Bootstrap and BaseCSS. They were created for a Magento 2 environment and are currently is use on shop.drcomfort.com.

The styles themselves are compiled from LESS files with variables for attributes like margin, padding, color, etc. Changing the variable file quickly customizes the styles for a specific site.

These utilities have proven useful on other sites. They work especially well with Drupal Views output where inline styling is not possible.

For brand new sites a larger framework is more appropriate. For existing sites, where the content creators do not have access to the CSS, these styles can be added once to the global stylesheet and provide flexibility without the need to write specific CSS for new elements.