Build amazing front-ends without the kitchen sink.

I’m here to tell you that you don’t need a whole framework for your front-end. You only need the CSS that you use! Sure, you can do this now with many of the popular front-end frameworks out there. However, it involves using their development setup and customising what to use before compiling the styles into CSS. In Bootstrap, this means you get to choose between Less and Sass, and then change the variables and the bootstrap files. In the end, you still end up with some percentage of unused CSS.

Let’s look at the problem. I’ve tried the aforementioned process before in the past, and honestly I do not think it’s bad, It’s be best we’ve got, I just have some pet peeves with it. For example, I hate having unused CSS in my styles, and I hate spending extra time to drastically change a Bootstrap provided component. I have also found that using a whole framework makes me lazy. At times, leads me to choose a poor solution, like re-skinning a component when it would have taken me half the time to make it from scratch and my code wouldn’t end up full of long-hand css rules overriding Bootstrap’s defaults. Last but not least, let’s not forget the nightmare that is updating a front-end framework. Bootstrap 2 to 3, anyone?


Recently at work, I’ve been lucky enough to be able to spend some time with the research team making usability prototypes for their sessions. This role demanded that I coded real-looking, real-feeling prototypes. My first approach was to start with Bootstrap (the compiled CSS) to layout the prototype, then add more CSS overriding Bootstrap to match the mocks that were given to me. This was not fast enough, I was spending too much time getting the prototype to look like the mocks. I needed a new approach. The simple approach described above lacked speed in the customisation step, but provided the flow I wanted to make layouts. I cloned Bootstrap’s repo, started changing the bootstrap.less and variables.less files, and I was able to produce an elegant prototype that worked well until I was asked to make it for mobile. At this point, I had to add media queries and use the tools Bootstraps gives to make a sweet responsive prototype. This worked and the prototype looked and felt great.

All was well until I looked at the compiled CSS. It was far more than what I needed and close to 60% was unused. This made me question the value of this approach on a production project. Maybe a little extra CSS weight is not so bad, but the unused code is larger than the used code. I couldn’t help thinking that there must a better way.


So I went digging, searching, googling… And I found two amazing tools that when used together produced the same functional results as above, did not cost me more time and, my compiled CSS has 0% unused code. Guys, I’d like you to meet Susy and Breakpoint. They are written in Sass and let you build solid, responsive layouts. They don’t offer any pre-made components, as it is up to you to use these tools to make your own components, or cherry-pick the ones you will actually use from another framework. I’m still new to these tools. I’m eagerly learning more about them, and yet I already love the workflow I have with them. I’m able to build prototypes that feel like completed products very quickly, and my time is used creating components, not customising and tweaking third party code. Susy, combined with Breakpoint, promise that they have a feature set that makes them a robust solution from prototype to production. I have not been able to prove that yet, but as my current project moves forward I will get to see how these tools help grow the project.

They are very simple to start with, and they work together well. Let’s write code for the classic sidebar layout with a responsive twist using them.

$screen-hd: 1200px
$screen-sd: 960px
.sidebar
@include breakpoint($screen-hd)
@include span(1 of 4) // full sidebar
@include breakpoint($screen-sd)
@include span(1 of 12) // collapsed only icon visible
.main
@incude breakpoint($screen-hd)
@include span(3 of 4 last)
@include breakpoint($screen-sd)
@include span(11 of 12 last)

This would produce a dual column layout that thins the sidebar on smaller screens. And the compiled result is good CSS.

@media (min-width: 1200px) {
.sidebar {
width: 21.05263%;
float: left;
margin-right: 5.26316%; } }
@media (min-width: 960px) {
.sidebar {
width: 6.77966%;
float: left;
margin-right: 1.69492%; } }
@media (min-width: 1200px) {
.main {
width: 73.68421%;
float: right;
margin-right: 0; } }
@media (min-width: 960px) {
.main {
width: 91.52542%;
float: right;
margin-right: 0; } }

I still have a lot to learn about Susy and Breakpoint so there might be a post in the future talking more about them. Thank you for reading, let me know what you think of these tools and the approach they make possible.

Show your support

Clapping shows how much you appreciated Sean Caetano Martin ’s story.