1.7 Bourbon

Welcome back to the course. In this lesson you'll learn about a very powerful tool SASS tool set called Bourbon. This is basically a collection of SASS mixins and functions you can use to speed up the development. So let's check it out. You can find the library@bourbon.io. And to get started with the installation, we're gonna use NPM. So we're gonna open up code kit and I'm gonna search for bourbon. And I'm gonna install it. And then I'm gonna open up my SASS file. And I'm gonna say import bourbon. And that's it. Now in this file, I've defined a couple of color variables and some demo styles for this page. And what I'm gonna do is I'm gonna start styling these elements using mostly bourbon, mixins and functions. So let's get started. In this first box here, I have a circle and a rectangle. So let's target those circle, I'm gonna use these mixing in no particular order is just how it's more convenient. So to size or to set the width and height of a specific element, you can use the size of mixin. And if I'm gonna set ten rems here, it's gonna set the width and the height to 10 rems. Then you can change the border color by using the border color mixin. And here I'm just gonna choose color one. And I'm just gonna switch back and forth between the style CSS and the CSS so you can see what bourbon is doing. So by setting these two mixins, it added height, width, and border color to my circle elements, cool. Let's set the border style, you can use a mixin called border style, and you can set solid and that should do it for now. And let's do include border witdh. Oops, it was the other way around. So border with let's do 10 pixels. And also let's create a circle by adding a border radius 50%. Okay, so there we go. We have a nice circle. Now, you might be saying, okay, I did but border color, style width, you can set it with normal properties. So why should we use the mixins? Well, the mixins come in handy when you have more than one value. So they simplify the way you write CSS. Let's target that rectangle for now. And for rectangle, let's say we want different sizes for width and height. So you can say include size, five RAMs, and atriums, right? What about border color? Well, let's do border color. But let's use color 1,color 2, 3 and 4. Okay, let's set some different border styles. Let's do solids, dashed and on the bottom, let's do no border. And let's set the border width to let's say 10 pixels top bottom 15 pixels side to side. So now, this generates these properties and the result is this, right? So i find it simpler to just use this mixin than to write these myself, they take up less space as well. Now let's move on to box number two here we have a bunch of buttons. We have a traditional button, an input type button. Input type reset and one type Submit. Now normally to style all of these the same I would have to go in and right button, input type button and so on. But with bourbon we have a very easy way of targeting all of this. All we have to do, it is this, # all buttons. And this automatically selects all of these button types. So let's say for example I wanna set the border to none, I can do that, or I can use the mixin, And as you can see on the CSS we have button, type button, type reset, type submit. Pretty cool. So let's add some more styles to these. Let's add a background color, let's say color 1. Let's add a border radius 4 pixels, cursor pointer, let's add a transition. That outline none. This is for Chrome. Let's add a padding, right? We can use the padding mixin. Let's say 1rem, top, bottom 2 rems side to side. We can do margins, right? We can do null, that's top right and left and we can do one round for the bottom. So now this is what our buttons look like. And since we're on the buttons, let me show you another very cool mixin. That's the contrast switch. So the contrast switch works something like this. Color and instead of saying, white or black or whatever color we wanna use for text, we can say contrast switch, and we're gonna specify the color of our background. And then we can go right here and we can add some additional variables called contrast switch dark color. And here I'm gonna use an RGBA of 53, 56, 71.8, right? So, basically a dark color. And then I can do contrasts which light color and here, I'm just gonna do just pure white. Okay, so this is the way it works. The mixin will actually calculate, The contrast between the value that we just set and these two variables. And whichever color gives us the greatest contrast, that's the one that's going to be used, okay? So in our case, we're using color one, which is this blue, right? And apparently, the black text color works better. But if we're gonna switch and we're gonna add a dark color to the button and we're gonna switch it up here as well, then the buttons will use the light color, the white. So, very handy plugin for when you wanna keep color accessibility for you projects. Very cool. Now also, since we're on the topic of buttons, we can also do this. All-buttons-hover. And for example, I can change the background color to, let's say a shade of that original color-1. And I'm gonna explain what that's doing in just a little bit. And now we have a hover state. So all buttons hover, this nice function right here will basically generate this piece of code. It takes all of the buttons and adds their hover state. So what about the shade? Well shade is a function that takes a color and blends it with a specific amount of black in this example 10%. I can also do all buttons active. So when we click on them and I can change their background color to a tint of color 1. Let's say with 20%, this time it's with white. So, shade mixes a color with black, tint mixes a color with white. So now, unclick we have a different color. Pretty cool. Let's move on to box number three. Here we have a bunch of inputs, type text, password, email number and text area. All these are text inputs. So to target these I can do this hash tag, curly braces, dollar sign, all text inputs. And let's say for example, I don't have a border on them. Well, if you're looking on the CSS file, this selects a lot more inputs than I have here. Color date, they time they time local, and so on. So very, very powerful mixin. So for these, let's add some styling, like a background color border radius, transition, a nice margin and padding. And also, I can target their hover state with all text inputs hover. And I'm just using the shade function here, and the result is this. Pretty cool, right? finally let's move on to box number four which has a bunch of headings from h1 to h6. Now on these headings, I can set with bourbon, different font stacks. And also I can use the modular scale function to apply different font sizes to these headings so they match those in a modular typographic scale. How cool is that? So here's how this works. First, let's target h1 through h6. And to set the font stack, you can use something like font family, and then font stack Helvetica. This is one of the predefined font stacks. And that will basically change the font family to a font stack. Helvetica new Helvetica Arial and finally sans serif. And if you don't know what a font stack is, it's basically telling the browser, hey, I want the font family to be Helvetica new. Is this not available okay then use Helvetica, if Helvetica is not available is Ariel. If Ariel is not available use whatever sans serif font you have. Now, there is a big list of font stacks, and they look something like this. We'll see the grand, verdona, system garamond, and so on. So if we activate Monaco, for example, these headings will now look different. Now let's talk about that modular scale because I think that's probably the coolest part about all this. Let me start off by adding these variables here for your reference. These are known modular scales, right? We start from minor second which has this ratio and we go all the way up to double octave which is four. Probably the most used ones are somewhere in this range, right? Going from minor third, yes, to the golden ratio which 1.618. Now what exactly is this, modular scale thing? I've never heard about it. Well, let me show you a quick example. I'm gonna go to typescale.com. And here we can see the concept of illustrated nicely. You start with a base, font size and with a scale. And then each font size is set based on that scale. So we start with 16 pixels. The next font size will be 16 times 1.333. That gives us this value. The next value is 21.33 pixels times the same ratio 1.333. And that gives us this value and so on and so forth until we get to the very top. So bourbon has a type scale implemented and it's really easy to use it. All you have to do is go font size, modular scale and then you would set the position and then the actual scale that you wanna use. So in my case I wanna use minor second and this gives me this result. Now if I want to I can give this up completely, and the scale that's being used is totally different I think by default it's 1.414. But I can go up here and I can change that. I can say bourbon I can set modular-scale-ratio to whatever value I want, let's say 1.333. I'm gonna save that, and now we get different values for these headings. I can change it to something smaller, let's say 1.2. And that's gonna change the scale here. I can go 1.125, which is this major second and that's gonna give me this result. So, this is a cool way of generating modular scales with SASS. And that's bourbon. Pretty cool library, right? Definitely a big time saver for larger projects where you need to write a lot of CSS. Now we've covered five libraries so far, but none of them was about grid systems. When discussing essential CSS libraries, we should definitely include one that allows us to create grids because these are fundamental to any layout. So, in the next lesson you'll learn how to work with the raster grid system. See you there