Why I Use SCSS and Bootstrap
In web development and design, sometimes we can get caught up in the functionality of a website. We can focus too much on what’s going on in the background of a site over how good it looks. While a site that works well is very important, a site that looks good can create a great experience for those that visit it. This is where CSS, SCSS and Bootstrap come in.
CSS and SCSS
CSS stands for Cascading Style Sheets and is a fantastic front-end development tool to bring life to your website. Where HTML and JavaScript make a website functional, CSS makes it beautiful. CSS can add color, spacing and even change the font of an entire website! With CSS, a designer can add to the Aesthetic-Usability of the website they are creating just by playing around with the spacing of elements and giving the customer an easy to understand experience. CSS truly makes it easy to shape an awesome looking site.
CSS can turn this…
into this…
This is just a small example of what it can do. CSS really makes things easier on web designers. But what if there was something even better than CSS? Is it even possible? I am here to say, yes it is! SCSS (Sassy CSS) is the newest iteration of something called SASS or Syntactically Awesome Style Sheets which adds tons of functionality to CSS. The only caveat in using SCSS instead of regular CSS is that you will need to use what is called a preprocessor in order to make it work. Don’t let the name scare you. All that a preprocessor does is takes the SCSS code that has been written and makes it so the browser can read it.
SCSS allows the developer to do so much more when they are creating with CSS. The syntax for using SCSS and CSS is basically the same, but SCSS can use partials, variables and have nested code.
/*CSS*/
body {
background-color: white;
color: black;
}h1 {
background-color: gainsboro;
color: blue;
}/*SCSS*/
body {
background-color: white;
color: black; h1 {
background-color: gainsboro;
color: blue;
}
}
As can be seen in the code block above, CSS and SCSS have very similar syntax. The cool thing about SCSS though, is that the code can be nested.
When using SCSS, it is not necessary, or advised, to put everything in the same file like a normal CSS file. Instead, you will use files called ‘partials’ to help organize the code. A partial looks something like _header.scss, using an underscore at the beginning. In these files variables can also be used. Variables make it easy to use the same style in multiple areas without having to reuse the same code over and over. They also make it easy to change that code if you don’t like it down the road. Once all of the SCSS has been added, the preprocessor is able to combine the partial files, with their variables and nested code, and spit out code that the browser can use.
Bootstrap
Along with CSS and SCSS, Bootstrap is something that makes life awesome and just a little bit easier for web developers and designers. Bootstrap is something called a ‘framework’ that can help designers, especially when developing a website mobile first. Using Bootstrap in your project is made very easy by the documentation provided by getbootstrap.com. There is information about everything you need in order to get Bootstrap up and running on your project.
There are a lot of great things that come with Bootstrap but what I want to focus on is the grid. The grid uses rows and columns in order to facilitate an easier website building experience. Bootstrap works on a 12-column system, so when building the website, the columns need to add up to 12.
For example:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>This simple example shows the ‘row’ and ‘col’ classes that are necessary to create a simple grid scenario. This particular one would have 3 columns that are 1/3rd of the page wide. Bootstrap even includes a predetermined gutter. The grid can be used in different containers to have multiple areas with different amounts of columns and can have up to 12 columns per row! Having this freedom to decide how you want the columns placed means having the ability to quickly and easily design the look of your website.
The best part about knowing of all these tools and how to use them, is knowing that they can all be used together. That’s right, each of these awesome tools can be used in the same project and be made to work together.
Though it is not necessary to use all or any of these tools when completing a website, the project will definitely be better if you do.
