If you have been reading along, in Setting up a Smart HTML Foundation for Rails we laid out boilerplate HTML for a new Rails project. In this article we will do the same for stylesheets by building a solid CSS foundation to design from. I have developed some basic boilerplate starter CSS for this purpose; feel free to use this code in your own projects. To better understand it, we begin with Sass.
It All Begins with Sass
Probably the two most well-known dynamic stylesheet preprocessors in use today are Sass and Less. Our starter CSS is built using Sass. Sass is the sister of Haml , and the default preprocessor in Rails 3.X and greater. As a Rails developer you are going to find Sass in use in many of the projects you work on – as a consultant or as a new member of an existing team and project.
Add a Little Compass
On top of Sass our starter CSS uses Compass, a CSS authoring framework based on Sass. It's kind of like the Swiss Army knife of CSS utilities. I am a huge fan. It's powerful, versatile, well-documented, widely used, there are a ton of plug-ins for it, and it makes life easier. What's not to like?
What Compass is not is a CSS framework like Bootstrap or Foundation, but you can create your own custom CSS framework with the help of any number of its tools and the different community developed plug-ins available for it like:
I'm not against using prepackaged CSS frameworks, but I find at times they can be limiting – if you want to break free it takes some tinkering. With Compass you essentially create your own framework to fit your project's needs.
Your Own Kinda Framework
And that's exactly what I have done, well at least the beginnings of something. In the very lease it's an excellent baseline for any Rails project. You will have to take it the rest of the way. What follows is the file structure of my starter CSS library for Rails. Click any of the links to see the underlying styles.
| └─ desktop
| ├─ _common.sass
| ├─ _forms.sass
| ├─ _layout.sass
| ├─ _navigation.sass
| ├─ _pages.sass
| ├─ _staging.sass
| └─ _typography.sass
NOTE: When using Sass you have a choice in syntax:
.scss. We use the
.sass syntax. Most developers will probably prefer the
.scss syntax because it looks familiar (it is similar to CSS), and because that is what ships out-of-the-box in Rails, however, the
.sass syntax is cleaner/terser (IMHO).
Setting up Smart CSS
Setting up our CSS will be as easy as setting up HTML in Setting up a Smart HTML Foundation for Rails.
Step 1: Install Compass
If you have set up your underlying markup through Setting up a Smart HTML Foundation for Rails you can skip this step. If not, add the following code snippet to your Gemfile if you haven't done so already, and don't forget to
# Compass specific gems.
Step 2: Clone the Starter CSS
git clone firstname.lastname@example.org:maxxiimo/base-css.git
Step 3: Add the Starter Code
Finally, copy and merge the cloned files and subfolders (the
vendor folders) into the root directory of your project.
Step 4: Delete
application.css will be replaced by
application.css.scss, and needs to be deleted otherwise nothing will work!
Don't forget to commit your changes.
I know, not too impressive! But really, this foundation is not designed to dictate YOUR style.
Why Is This Good?
Like in Setting up a Smart HTML Foundation for Rails with the foundation markup, the greatest benefit of what was done can be found under the hood:
- The organization and structure
- The tools you're using to help write styles
In my experience, as you move along in development, projects grow in complexity. More times than not more than one author will contribute to a project. When this happens, often times stylesheets become unruly – behemoths, unmanageable, and downright confusing. ٩(͡๏̯͡๏)۶ Using some kind of organizational structure from the get-go will help you avoid these problems; and that's what you have here.
If you're dying to learn more, I got you covered. Check out my article "How to Organize 'application.css.scss'."
Want to know when the next article is published? Subscribe here. Thanks for reading!