Book Image

Bootstrap Site Blueprints Volume II

By : Matt Lambert
Book Image

Bootstrap Site Blueprints Volume II

By: Matt Lambert

Overview of this book

Bootstrap is the most popular open source project on GitHub today. With a little bit of know-how, this massively popular CSS framework can leveraged for any type of complex web application or website. Bootstrap Site Blueprints Volume II will teach you to build these types of projects in an easy-to-understand fashion. The key to any complex Bootstrap project is a strong development foundation for your project. The book will first teach you how to build a Bootstrap development environment using Harp.js, Node, and Less. In the next chapters, we’ll build on this foundation by creating restaurant and mobile-first aggregator projects. Once you’re warmed up, we’ll move on to more complex projects such as a wiki, a new magazine, a dashboard, and finally a social networking website. Whether you are brand new to Bootstrap or a seasoned expert, this book will provide you with the skills you need to successfully create a number of popular web applications and websites.
Table of Contents (14 chapters)
Bootstrap Site Blueprints Volume II
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

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-background variable. The @primary-background variable should be set to the color you want for the background of your project.

  • We set the font-family property to our @body-copy variable.

  • Set the font-size property to the @base-font-size variable. 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 the font-size property, you should use the @font-size variable.

  • The line-height is set using the @base-line-height variable.

  • Finally, we'll set the font color to our @primary-text variable.

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:

  • badges

  • breadcrumbs

  • buttons

  • button groups

  • button dropdowns

  • carousel

  • code

  • collapse

  • dropdown

  • forms

  • icons

  • input groups

  • images

  • helpers

  • jumbotron

  • labels

  • The list group

  • The media object

  • modal

  • navs

  • navbar

  • pager

  • The page header

  • pagination

  • panels

  • pills

  • popover

  • progress bars

  • scrollspy

  • tables

  • tabs

  • thumbnails

  • tooltip

  • typography

  • well

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.