5 min read
From Bespoke SASS Framework to Zurb Foundation 6
When Shape first started we rarely used frameworks. We didn’t need frameworks because our team was very small and the projects were not that complex. But, as we started taking on more larger projects and the team grew we decided to write our own CSS framework.
Initially this was written on LESS (yes, we know what your thinking!) and then we rewrote it on SASS. The framework consisted of the basics… Grid, Forms, Navigation etc, but didn’t require HTML to be written in specific ways. It worked for us.
But then responsive happened, our team (Company, workflow etc) grew again and maintaining a bespoke framework became tiresome and handwork to keep on top of. So we looked towards a ready made framework - Zurb Foundation 6.
I can hear you already saying “Why not Bootstrap! Everyone uses Bootstrap!” - Yes, we know all that, but there were a few reasons why we choose Foundation over Bootstrap. We did consider some of the smaller frameworks - Susy Grid, Skelton and Pure CSS, but settled with Foundation after trying these ones out.
Lets dive in to what we love the most about Foundation:
Compared to other frameworks, Foundation 6 code size is drastically different. With all components included it’s around 80kb minified, but if you use Uncss (Or manually remove components not being used) you can reduce this quite a lot.
Our bespoke framework was around 20kb minified but came with less than 1/5th of the components Foundation 6 offers.
All of the components in Foundation come with ARIA attributes which adheres to A11Y which is important when dealing with any project, but even more important for our high traffic websites where accessibility needs to be considered properly.
Accessibility is one of the things most developers overlook when dealing with screen readers and users with particular disabilities, so it was refreshing to see Foundation was combating that. Not only does it come with ARIA, but also selectors to turn on / enable accessibility features for users that need them.
The main reason for choosing Foundation 6 was definitely it’s grid system. Not only does it come with Flexbox support, but the amount of selectors available and how they work with responsive breakpoints is on point!
We’ve got the basics… Make a column span 6 columns out of 6, nesting another set of columns inside this, but what sets the grid system apart is all the little extras!
First of all, you can set gutters in a SASS map, allowing you to change the gutter width depending on what screen size the user is on. Clever!
Collapsable rows and centered columns also come in very handy and again, these can be switch on / switched off depending on the screen size. E.g. on a small screen size a single column could be left aligned, but on larger screens have this centered.
The endless amount of SASS mixing available also make extending or reusing the column / gutter sizes on bespoke named elements a lot easier when working with a responsive website.
This was new to us at Shape - We always did desktop first! So making this switch threw us of a bit at first, but once you get the hang of it everything makes sense and you see their reasons why this theory is taken onboard.
Breakpoints are defined in a SASS map variable, which means you can access these by a simple name rather than typing the full media query out each time. Similar to the grid, there seems to be endless amounts of SASS mixins available to make an element work how you want it at any size.
The main benefits to these mixing is the ability to say if you want a particular size, a particular size only, from that size, or down from that size. This makes developing a breeze!
Ou La La - Just what we was missing from our bespoke framework - Typesizes / leading adjusting based on screen size! Yum.
Although this is limited to just headers (<h1> <h2> etc) you can be cheeky and put any selector / tag in there I have found! Adjusting type sizes becomes a lot less messy and your code feels cleaner because of it.
Like every framework, they are not perfect and sometimes need ‘tweaking’ to work with your workflow / team. We found this when first setting up Foundation, and ended up moving folders around and adding a few of our own SASS mixins ourself to extend Foundations own codebase.
A few things we’d like to see / be fixed are:
</li><li><strong>Consistent Font Sizes</strong><br />Although there is the ability to have responsive type sizes, the ability to make sure type sizes are consistent within selectors is difficult. In our bespoke framework we had a mixin that allowed us to increase / decrease the base font size. So when we increased the base font size on a specific device size, they would all adjust. <br />
</li><li><strong>REM</strong><br />Foundation comes with a ‘rem-calc()’ function to convert pixels to rem’s - Neat huh! But some of their very own setting values don’t use this function and still apply sizes in pixels! This feels messy. </li></ol><p>---</p><p>Overall - It’s an amazing framework and Zurb have done a top job. Why not give Foundation a try and see what you think, let us know any tips on using Foundation as a framework and your opinions on this over other Frameworks - We’d love to hear it. </p>
I'm Jason, Co-Founder, and Lead Developer at MadeByShape. When i'm not walking my pooch Sully (Or him walking me), you'll find me cycling in the hills, at a gig or starting another DIY project.
