Bringing It All Together

So far in this course we've covered Sass and the Bourbon suite. Let's look at how to use these in a new Rails application and see a little bit of Tyson's personal workflow.

Starting with Suspenders

First, we'll generate a new Rails application with Suspenders, thoughtbot's Rails project template:

$ suspenders new

Suspenders gives us normalize (a CSS reset), Bourbon and Neat libraries, installs Bitters, and even installs flashes from Refills. Autoprefixer is set up to target the most recent 2 versions of major browsers.

The application.scss looks like this:

@charset "utf-8";

@import "normalize-rails";

@import "bourbon";
@import "neat";

@import "base/base";
@import "refills/flashes";

Adding a page with High Voltage

Now we add a static page with High Voltage in app/views/pages/log_in.html.erb. By using High Voltage, we don't need to add any custom routes or controllers for the page since High Voltage handles all of that for us.

Adding an application header

Since the application header will be on every page, we'll add it directly to the application layout. Here's the HTML to add to application.html.erb:

<header class="app-header">
  <h1 class="app-logo">Application</h1>

  <div class="app-header__settings">
    <%= image_tag("gear.png") %>
  </div>
</header>

Styling the application header

After renaming the refills directory to components to make it less tool-specific, we can use this wildcard syntax to import all components:

// in application.scss
@import "components/*";

Let's style the header in a couple of files.

components/_header.scss:

.app-header {
  align-items: center;
  background-color: $dark-gray;
  display: flex;
  padding: $small-spacing;
}

.app-header__settings {
  @include size(1rem);
  margin-left: auto;
}

components/_app-logo.scss:

.app-logo {
  $logo-size: 2rem;
  @include hide-text;
  @include size($logo-size);
  background-image: image-url("logo.png");
  background-size: $logo-size;
  margin: 0;
}

You can learn more about Flexbox in this episode of the Weekly Iteration.

Adding a login box

Let's change the "Hello World" to an actual login box on our static page. Here's the new HTML:

<main>
  <div class="dialog-box">
    <h2 class="dialog-box__title">Log In</h2>

    <label for="email">Email Address</label>
    <input id="email" type="email">

    <label for="password">Password</label>
    <input id="password" type="password">

    <input type="submit" value="Log In">
  </div>
</main>

It looks OK with the default Bitters styles, but we can do better. Let's add some styles.

In components/_dialog-box.scss:

.dialog-box {
  // Bourbon's `tint` function adds white to a color
  background-color: tint($light-gray, 50%);
  border: $base-border;
  border-radius: $base-border-radius;
  margin: ($base-spacing * 2) auto $base-spacing;
  max-width: 25rem;
  padding: $base-spacing;
}

We set max-width on the dialog-box so that it can shrink on smaller screens, but won't be unmanageably wide on large screens.

A larger application

AccessLint is a real application that Tyson's been working on. It's a good example of a larger application with more styles.

It has a library directory that contains non-rendering Sass (like the definition of mixins or other useful functions). Those mixins are used elsewhere in rendering Sass.

Here's its application.css.scss:

@import "bourbon";
@import "library/**/*";

@import "normalize";
@import "prism";

@import "base/**/*";
@import "patterns/**/*";
@import "components/**/*";

It's using a **/* pattern to recursively import everything in every level of the base, patterns, and components directories. @import "base/*" would only import files that are in the base directory, but @import "base/**/*" also imports files that are in e.g. the base/level-1/level-2 directory. It's great that we can import all of these files without caring about the order as well; it shows how independent each component is.

Thanks for joining us in Bourbon Smash!

Further reading

To learn more about BEM syntax, read this article.