Prototyping is fun with Bourbon, Neat and Slim

I am working on my super-secret-awesome-project and prototyping is something I do a lot lately. I can say, it is not as easy as it looks to others, but it is great joy to make prototypes.

Anyhow, I was trying to focus on mainstream frameworks, like Bootstrap and Zurb, and those are definitely awesome, however my attention slips often to smaller offers.

So, I am playing with Bourbon which is Sass css framework, very simple, very awesome. Often for prototype you don’t need anything crazy like Bootstap and Bourbon is just fine.

So on this Bourbon has it’s own grid that you can add and it is called Neat. Great thing about Neat is that semantic grid, which means you will not use grid_8 or some other weird class name in your divs. I personally never had problem with those, I like those things exposed in source, so I don’t have to look in 7 files to understand how layout is created. Still, it is semantic and awesome, and we don’t even have to say it anymore, responsive.

From now on, anyone making anything that isn’t ‘responsive’ should emphasize that, instead of having to say this is some competitive advantage to have websites responsive.

We are professionals, the same how sites had to work in all browsers, they still have to do that and work across devices, that is just what has to happen. If you site isn’t doing it, that means it is old, pre 2008/9 or so.

Anyhow, back to my simple and awesome setup for prototyping. On top of all this awesomeness with Bourbon and Neat, I added Slim, templating engine that is very similar to Haml, but has even less to write, more clean html. When you combine expressiveness and cleanliness of Slim with Bourbon, you get awesome html that just sings like Pavarotti. It is feast for your eyes seeing html.

So this is what occupies my attention these days.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s