Developers use different methods: that’s why we built Vanilla

Over the years I have tried a ton of different css frameworks, but about 2 years ago I decided to build my own. Actually, I decided to build a toolkit.

The main issue I had with all of these CSS/LESS/SCSS frameworks, were that the majority of the code was obsolete by the time I was done with the project. This is why I decided to build Vanilla. It’s the base of every project Milkshake Studio builds.

The beauty about Vanilla is its simplicity. It isn’t trying to inject style. It is just a set of tools to make building a responsive website faster, and easier. It also only weighs 8.75 KB. Below are a few of the tools within Vanilla that make it such a great toolkit.

The Grid

There are a few ways to use the grid portion of the toolkit, but first we start by setting the grid up. To set your grid parameters you just change the columnCount and gutter width variables in the variable.less file. Once you have those set you are ready to start using the grid.

The first method for using the grid is quite basic, and meant for those of you who like to keep more of your styling on the DOM element. To make it so you are not cluttering your classes, we created a few col attributes: col, col-t (for tablet), and col-p(for phone). These attributes are created by a few loops.

For example, if you wanted to have the element be 8 columns wide on a desktop and tablet, but 12 columns wide on a phone, you could simply enter <div col=’8’ col-p=’12’></div>. This method is very straightforward and can be used quickly to create a grid across your site.

Our next method, the method I prefer, gives you a bit more power. For this method we use a helper class in LESS: .width(column-number, gutter-number). Here is an example of a column that spans 8 columns, and 9 gutters.

The beautiful thing about using the helper class is the amount of customizability that you have. You can create any size grid you want. If you want an element 8.5 columns & 10.5 gutters wide, just write .width(8.5, 10.5). It truly is as flexible as you want. Now, we didn’t reinvent the wheel, but we have stripped out most of the useless styles to give you just what you need. We have also added a tool that i’ve never seen in another framework. The inner grid system.

Say you have parent element that is 8 columns + 9 gutters wide, and you want to have elements inside of it align to the grid. In almost every other framework I saw, this was extremely hard to do, but by using our helper class .innerWidth(colNum, gutNum, parentWidth), it’s quite easy.

If we are using a 12 column grid with a 3% gutter width, the 8 column, 9 gutter wide element will have a width of 67.666% of the page. Since we know this, we can use it to calculate the inner widths.

While this method seems a bit awkward, it works wonders. Above you can see how we used the parent width as the last varibale. Now those inner elements will align perfectly to the page’s grid!

Horizontal Spacing

To mimic and build upon our grid system we also created horizontal helper classes. These follow the same structure as our .width() and innerWidth() classes, but are used for margins and padding.

The Foo element will have a left margin of 1 gutter, and the foo-bar element, which is an inner element, will have have a left padding of 1 gutter.

Each one is used the same way as the width and innerWidth helper classes. Together these help to create a super flexible grid system that can work for any project.

Vertical Rhythm

With any responsive site you want the vertical spacing to change as the browser size changes. You can achieve this in a variety ways, but we chose to keep it simple. Our helper classes are meant for vertical margins and padding. Depending on how you compile your code you can either use the vertical rhythm as helper classes or just plain classes on the DOM.

The loop above creates margins and paddings for both top and bottom spacing. These spaces are based on 1vw with a fallback of 10px for older devices. These classes can be used to match the vertical spacing to the horizontal spacing, helping to create an even grid system.

To use one, you simple add it to the DOM element. <div class=’mt3 mb3 pt2 pb2’></div>. This element will have a margin of 3vw on the top & bottom, and a padding of 2vw on top & bottom. We’ve found this method to be very effective and super simple. The grid can be extended past 15, but that just seems silly.

Mixins & More

Just like every other framework out there, we have an extensive set of mixins to help keep your code clean. There really isn’t anything to special here, just your run of the mill popular mixins.

There is a lot more hidden within Vanilla, and it is always being tweaked and updated. Feel free to take it for a spin. Hopefully you find it as useful as I do.