Category: bootstrap

rails 4.1: styling an app with bootstrap and font-awesome

Install the bootstrap gem:

gem "bootstrap-sass", "~> 3.3"
gem "font-awesome-rails", "~> 4.3"

Rename app/assets/stylesheets/application.css to application.css.scss, so you an add @import statements to it

Replace the entire content of the file with:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

Once you do this, you will need to also import the particular stylesheets your app is compose of, example (importing projects.scss:

@import "projects";

At this point you have the bootstrap css already applied to your pages. It is recommended you apply at least this div wrapper to your app/views/layouts/application.html.erb file:

<body>

  <div class="container">
  <% flash.each do |key, message| %>
    <div><%= message %></div>
  <% end %>

  <%= yield %>
</div>

</body>

An example of a styled link with bootstrap:

<%= link_to “New Project”, new_project_path, class: “new” %>

And the CSS (inside application.css.scss):

a.new {
  @extend .btn;
  @extend .btn-success;

  &:before {
    font-family: "FontAwesome";
    @extend .fa-plus;
    padding-right: 0.5em;
  }
}

This is an example on how to create a decent looking action buttons:

<ul class="actions">
  <li><%= link_to "Edit Project", edit_project_path(@project),
    class: "edit" %></li>

  <li><%= link_to "Delete Project", project_path(@project),
     method: :delete,
     data: { confirm: "Are you sure you want to delete this project?" },
     class: "delete" %></li>
</ul>

And the associated css:

a.edit {
  @extend .btn;
  @extend .btn-primary;

  &:before {
    font-family: "FontAwesome";
    @extend .fa-pencil;
    padding-right: 0.5em;
  }
}

a.delete {
  @extend .btn;
  @extend .btn-danger;

  &:before {
    font-family: "FontAwesome";
    @extend .fa-trash;
    padding-right: 0.5em;
  }
}

This is an example of how to style your alert messages (in application.html.erb):

<% flash.each do |key, message| %>
  <div class="alert alert-<%= key %>">
    <%= message %>
  </div>
<% end %>

And the CSS associated with it:

.alert-notice {
  @extend .alert-success;
}

.alert-alert {
  @extend .alert-danger;
}

Example of how to add a top nav bar:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <%= link_to "Ticketee", root_path, class: "navbar-brand" %>
      <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse" data-target="#collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="collapse">
      <ul class="nav navbar-nav">
        <li class="<%= "active" if current_page?("/") %>">
          <%= link_to "Home", root_path %>
        </li>
      </ul>
    </div>
  </div>
</nav>

And the CSS associated with it:

body {
  padding-top: 70px;
}

If you end up using the nav bar code above, you are going to need a bit of javascript to make the menu work on mobile platforms (otherwise the menu won’t open). Make sure to include this line in your app/assets/javascripts/application.js file:

//= require bootstrap-sprockets

Making your app responsive

Include the following inside your application.html.erb <head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, create a dedicated stylesheet file to include your responsive styles (assets/stylesheets/responsive.scss), and import it:

@import "responsive";

Inside there, you can place all your scss related to media queries:

@media(max-width: 500px) {
  p { color: red }
}