Other bootstrap stuff…

As part of tackling how to customise bootstrap, I ended up trawling through stacks of stuff.  Rather than making the Colour my BootsrApp post really long, this post is my dumping ground for some of the more helpful links.

Backing up a bit.

What is Bootstrap?  In their own words:

Bootstrap works by providing a clean and uniform solution to the most common, everyday interface tasks developers come across.

Ahhhh – an implementation aid!   I particularly liked the way Pete Schuster summed it up:

Bootstrap … should be thought of as a starting point rather than a full fledged solution. By starting with Bootstrap, you unlock your website or app to the hundreds of other plugins and github projects that have also started with Bootstrap.

I am happy to have jumped on the Bootstrap bandwagon:  it has saved me a huge amount of effort, not to mention getting a half-decent looking app with very limited design skills! And it would seem I’m in good company – apparently more than 1% of websites are now powered by twitter bootstrap – pretty amazing given it’s been out for a couple of years!

At the time of writing – my App is bootstrapped with BS2.3.2, but BS3 came out today, on their 2nd birthday!!! is about to come out (at RC2 right now).  My task for the rest of this week is to transition from my hard-coded prototype, to a decoupled app.  Then, I will look at taking advantage of all the goodness in BS3, and I’m sure this will be a good test of my decoupling in a very practical way!

How did I integrate Bootstrap with my Rails App?

I generated my initial App using Rails Composer to set up my basic development toolset and stack, including the SaSS Bootstrap gem, which generated (amongst others) the bootstrap_and_overrides.css.scss file, which is where I prototyped all my stylesheet overrides to the bootstrap defaults.  I’m still on:

  • Rails 3.2.11
  • Ruby 1.9.3
  • Twitter Bootstrap (with SaSS) – BS 2.3.2

As instructions everywhere show:  the bootstrap_and_overrides.css.scss stylesheet file, I import both bootstrap and bootstrap responsive.  The order matters – it works when I do it as follows:

@import "bootstrap";
body { padding-top: 60px; }
.navbar-inner {
  background-color: #123456;
  etc - with all my key customisations...

Then I do the responsive stuff:

@import "bootstrap-responsive";
@media (max-width: 979px) {
  .nav-collapse .nav .nav-header {
    color: #abcdef;
    etc - with all my responsive specific customisations...

Still to come – the mixins to decouple – no rush!  BS3 was fully released today – but seriously, take your time!!!

Some of the more helpful links?

A bunch of helpful links that made sense of this integration include:

  • Rails Cast – gives a good basic introduction on how to get started with Bootstrap, especially what to put where.
  • GitHub explains one of many ways to integrate Bootstrap with Rails, including an overview of setting up and using the BS components.
  • Ruby Toolbox was another helpful source and perspective – integrating with SaSS.
  • Pat Shaughnessy outlines some of the Rails integration options. which gave a better understanding of what is actually going on.
  • Rails Guides are always good – this time to better understand the Asset Pipeline.
  • Advice to beware against tightly coupling to bootstrap names suggested the wisdom in insulating the look from the what.
  • Practical advice on how to “Decouple Your CSS From HTML With Reusable Modules” from the Nitty Gritty was really helpful.
  • Fancyboot helped me see real time effects of Bootstrap Customisation options before generating a download.
  • Various “Colour” selecting sites, were helpful, but in particular:  ColorPicker and ColorCodeHex.

Back to scheduled programming…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s