The post in which I discover Bootstrap

So, now I have this little website but it’s pretty barebones and ugly and now I’m just super excited when the instructor tells me that it’s time to improve the look and feel.  Apparently we’re going to do that with a little Gem called Bootstrap that was started by two guys from Twitter and has changed the way people style websites forever. I’ve already heard from a few people that it’s a good way to make a website that “looks like every other site” but as long as it’s a starting place, I’m happy.  Plus, this course taught me how to use the bootstrap sass gem to make some extra scss modifications to make my site look a little bit different.

To add bootstrap-sass I just needed to add this into my Gemfile (in the project root folder).

  gem 'bootstrap-sass', '~> 2.2.2.0'

After you add that to the gemfile, you have to tell the project to install that particular gem by running this in Terminal:

$ bundle install

After that, you have to restart your server otherwise the new bundled gems won’t work.  You can quit out of it and then enter ‘rails server’ in Terminal to do that.

Now, I have the bootstrap bundle installed but I’m not actually using it in my project.  To start using it I have to go into my app/assets/stylesheets/styles.css.scss file and add the following lines:

@import 'bootstrap';
@import 'bootstrap-responsive';

Next in app/assets/javascripts/application.js I need to actually make sure to require bootstrap.  I add the bolded line in the location below:

.
.
.
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Then, we started styling. Most of this was all done by looking at code snippets on the Bootstrap website.  The first thing we did was put some of the content on the front page into a container so that it separates it from the rest of the site and looks good.  This was done by going into app/views/layouts/application.html.erb and adding <div class=”container”> around my <%= yield %> section.  Like so:

.
<div class="container">
    <%= yield %>
    <%= render 'layouts/footer' %>
</div>
.
Next I added a navbar in the app/views/layouts/_header.html.erb file:
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
             <a class="brand" href="/">OMRails</a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li>
                            <%= link_to 'Home',  root_path %>
                        </li>
                        <li>    
                            <%= link_to 'About',  about_path %>
                        </li>
                    </ul>
                    <ul class="nav pull-right">
                                <li><%= link_to 'Login',  '#' %></li>
                    </ul>
                </div>
        </div>
    </div>
</div>

Next we added some colors to app/assets/stylesheets/styles.css.scss like making the footer text gray, changing the navbar background, and removing the shadow below the navbar:

$navbarBackgroundHighlight: white;
$navbarBackground: white;
$btnPrimaryBackground: purple;

@import 'bootstrap';
body{
    padding-top: 60px;
}

@import 'bootstrap-responsive';

.navbar-inner{
    @include box-shadow(none !important);
    border: 0;
}

.footer{
    margin-top: 50px;
    color: $grayLight;
    a{
        color: $gray;
    }
}

Lastly, we added one of those fancy “Hero Units” that just about every website on the internet has nowadays.  All I had to do was wrap my home page text in:

<div class="center hero-unit"> INSERT HOME PAGE TEXT HERE
</div>

Finally, I saved and uploaded to Git and Heroku.  Voila!

git add .
git commit -am 'Add Bootstrap'
git push
git push heroku master
 This was a lot of fun because it started to give me the building blocks I need with Bootstrap to build neat things.  It looks like Bootstrap is pretty capable and should be a fun way to learn by trial and error which is exactly what I need in order to teach myself. 🙂

 

 

 

Advertisements

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 )

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