Hocus-Pocus: Building a Design-Free Sass Framework

Hocus-Pocus is a design-free Sass framework that I’m working on in my free time. The main idea behind Hocus-Pocus is to make a universal and lightweight stylesheet starter kit that focuses on the most common features. In this article, I’ll cover why I decided to build my own Sass framework and the approach I’ve taken when doing so.

Why Have I Started Working on a Sass Framework?

In short, I would say I’ve started working on a Sass framework because I wanted to save time when starting new web projects. I’ve noticed that even when I work on really custom designs, I always add the same set of tools, include the same standard packages, and implement a similar collection of basic CSS components.

The second question that follows then is — Why you don’t you use an existing, well-known and proven framework like Bootstrap?

My response to this comes down to preferences and my approach to CSS. I think libraries like Bootstrap or Foundation are great and have greatly changed how people think about CSS. However, in most cases within my own project work, I just don’t need all these features and UI components like progress bars or breadcrumbs. Instead, I prefer to have something more universal. I prefer something that I can use in any project, without needing to override framework CSS classes.

Due to the reasons above, in Hocus-Pocus you can change the look of every single component with variables. You can even disable some features or define a range of helpers. The downside of this approach is that I can’t provide a compiled CSS version of the framework as there is no reasonable way to use Hocus-Pocus without an ability to update variables.

Pre-requirements and principles

Installation

The framework is available and easy to install with two different package managers: Bower and npm. It requires Sass (minimum required version is 3.3.0) and Autoprefixer to run. Autoprefixer is used to add necessary vendor prefixes to the final compiled CSS file. I don’t worry too much about compatibility between various browsers nowadays as I personally find autoprefixing to be sufficient. Additionally, I use sass linter (scss-lint), but this is not required for running Hocus-Pocus and doing things the right way. Hocus-Pocus will work without it.

Continue reading %Hocus-Pocus: Building a Design-Free Sass Framework%

by Bartłomiej Kozal via SitePoint