SMACSS overview
The scalable and modular CSS system was created by Jonathan Snook, who is currently a product manager at Shopify. It divides your style sheet into five sections in order to make it easier to categorize your CSS. Let's review each SMACSS category to see how it applies to our Bootstrap theme structure.
Base rules
A base rule applies to any element that is an element selector, descendent selector, child selector, or pseudo-class. It doesn't apply to CSS classes or IDs. These are basically all your core HTML tags.
Layout rules
The layout section is dedicated to any custom classes that you've written for the layout of your project. This could be something simple, such as a header, or something more complex, such as a widget. If you're following best practices, your layout should only use classes. However, if you have used some IDs, you should include them here as well.
Module rules
This is the big one for Bootstrap, because this is where you should import all your component Less files. Later on, I'll explain how you should break down each Bootstrap component into its own Less file and then import it into the master theme. The code for this will look a little something like the following:
@import "components/_badges.less"; @import "components/_typography.less"; @import "components/_tables.less";
State rules
These styles refer to anything that applies to a state change, such as form validation or alert bars.
Theme rules
This part of your style sheet is optional. You may cover it in the preceding sections. However, if you find yourself needing a section for styles specific to your theme, this is where you should insert them.
Now that I've explained how we'll organize our master theme, let's actually start putting it together. The first thing we need to do is import the _variables.less file that we created. We want this to be the first thing that we load into the theme, so we place the following line of code at the top:
@import "components/_variables";
Note
With the variables file in Harp, you shouldn't include the file extension. The reason behind this is that multiple preprocessor types are supported and variables is a keyword.
Setting up the base
The next section that we want to set up in our theme is the base. Insert the following boilerplate CSS. We want to keep this really basic so that we have a starting point for our future projects:
body {
background: @primary-background;
font-family: @body-copy;
font-size: @base-font-size;
line-height: @base-line-height;
color: @primary-text;
}
ul,
ol {
}
li {
}
a, a:link, a:visited {
}
a:hover {
}
p {
}
hr {
}I'm not even going to fill in any of the tags at this point, as they will be defined in the actual project. The only tag I will fill in is <body>. Let's review the properties that we have added to the body tag at the top of the preceding section of code:
- We'll set our background to the
@primary-backgroundvariable. The@primary-backgroundvariable should be set to the color you want for the background of your project. - We set the
font-familyproperty to our@body-copyvariable. - Set the
font-sizeproperty to the@base-font-sizevariable. Remember that this is the one that has the pixel value, and it should be a value of this type on the body tag. In any future use of thefont-sizeproperty, you should use the@font-sizevariable. - The line-height is set using the
@base-line-heightvariable. - Finally, we'll set the font color to our
@primary-textvariable.
As I mentioned earlier, we'll leave the rest of this section blank as it will be filled in to match the actual project that we will be designing in the future.
Setting up the layout
Since this is a boilerplate project, we don't really have a layout. We can fall back on the Bootstrap's grid and we don't need anything custom. Therefore, just leave this section blank for now, but you might want to insert a comment to show where the layout code should be inserted for future projects:
/* 02. LAYOUT Styles specific to your layout or website */
Setting up the modules
This section should be a list of @import keywords that load into our Less component files. As I mentioned earlier, you should break down any custom Bootstrap component CSS into its own Less file and save it in the /components directory. This is the way to keep your CSS neat and tidy in the development version of your theme. On compile, all of these Less files will be combined into a single CSS file called theme.css. However, for development purposes, it makes a ton of sense to break down the CSS for easier maintenance and writing.
As you create a project, you may not need to overwrite code in every Bootstrap component. Personally, I think it's good practice to customize everything, but it's not always practical to do this. The following is a list of potential Less component files that you can make with Bootstrap:
badgesbreadcrumbsbuttonsbuttongroupsbuttondropdownscarouselcodecollapsedropdownformsiconsinputgroupsimageshelpersjumbotronlabels- The
listgroup - The
mediaobject modalnavsnavbarpager- The
pageheader paginationpanelspillspopoverprogressbarsscrollspytablestabsthumbnailstooltiptypographywell
When you're creating a component Less file, first save it at css/components, and then use the @import keyword to import it into theme.less. You need a different @import statement for each file to load it in:
@import "components/_badges.less"; @import "components/_typography.less"; @import "components/_tables.less";
Setting up the states
With Bootstrap, the States section works much like modules, but I like to divide the following two components into the states section:
@import "components/_alerts.less"; @import "components/_form-validation.less";
These two make sense from a Bootstrap component standpoint. If you are using a different JavaScript library to perform your form validation, you should include the corresponding styles here. This should also apply for any component that has a state change.
Setting up the theme
The final section is the theme, and it is totally optional. One thing that would be theme-specific is your color palette. I break my color palette into another Less file and import it under the modules section.
You may be wondering what goes into this colors.less file, since we have defined our colors in the _variables.less file. In the variables file, we only assign hexadecimal numbers to variables. In the colors.less file, I assign these variable names to actual CSS classes so that we can use them in our layouts. In this way, we stay more modular because we can assign a color class to a widget instead of putting the color in the widget's CSS layout code. I usually define a text and background color class for each color in my palette:
.red1 {
color: @red1;
}
.red1-bg {
background: @red1;
}
.red2 {
color: @red2;
}
.red2-bg {
background: @red2;
}Now, those class names are way easier to remember than hexadecimal numbers, and this allows you to apply them to a widget, as follows:
<div class="custom-box red1-bg">this is a custom box with a red background</div>
Using this method, I can leave out any color styles in my custom-box class and only worry about layout styles. I can then apply the color using a CSS class, which is much more modular and reusable.
Finishing up theme.less
Now that we've finished the last section of theme.less, our style sheet is ready to roll. Go back to the terminal and compile your project again. Once that's done, go to www/css and you should see theme.css. Our boilerplate CSS development environment is ready to roll for an actual project.
