This is part one of an in-depth look into useful mixins from the Bourbon library. I’ll introduce the most important ones and explain how you can use these time savers in practice.
List of Goodies
In this tutorial we’ll be looking at the following six mixins:
Background Image mixinLinear Gradient mixinBorder Radius mixinBox-sizing mixinTransition mixinFont Face mixin
The examples below represent not necessarily best design practices, but were chosen for exploring the basic functionality of these mixins.
Background Image Mixin
This mixin creates a background-image property comprising multiple (up to ten) comma-delimited background images, linear-gradients or radial-gradients.
With Images:
HTML:
1 |
|
2 |
Sass:
1 |
|
2 |
.ridiculous-background
|
3 |
+background-image(url("bourbon-logo@2x.png"), url("thoughtbot-logo.png")) |
4 |
background-position: center top, top left |
5 |
background-repeat: repeat-y, repeat-x |
6 |
height: 560px |
7 |
Attention! Take a look at the precedence of layers. The first image gets displayed on top. The same goes for gradients.
You can use a shorthand notation for background-image like this:
Sass:
1 |
|
2 |
.ridiculous-background
|
3 |
+background(url("bourbon-logo@2x.png"), url("thoughtbot-logo.png")) |
With Gradients:
You can make use of Bourbon’s linear-gradient function inside the background-image mixin.
HTML:
1 |
|
2 |
Sass:
1 |
|
2 |
.super-duper-gradient
|
3 |
+background-image( |
4 |
linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), |
5 |
linear-gradient(#4e7ba3, darken(#4e7ba4, 10%))) |
6 |
height: 50px |
7 |
Linear Gradient Mixin
This little fella can take up to ten color stops, and takes percentage values if you want to fine tune the color distribution.
HTML:
1 |
|
2 |
Sass:
1 |
|
2 |
$start-gradient-color: #268BD2 |
3 |
$end-gradient-color: #7229d1 |
4 |
|
5 |
.simple-gradient
|
6 |
+linear-gradient($start-gradient-color, $end-gradient-color) |
7 |
height: 200px |
8 |
You can also provide an optional first argument to control the direction (in degrees) of the gradient.
Sass
1 |
|
2 |
$start-gradient-color: #268BD2 |
3 |
$end-gradient-color: #7229d1 |
4 |
|
5 |
.simple-gradient
|
6 |
+linear-gradient(-90deg, $start-gradient-color, $end-gradient-color) |
7 |
height: 200px |
8 |
Border Radius Mixin
This handy mixin makes it straightforward to target the corners of a box in pairs: top, bottom, right and left corners. If you want rounded corners and want to avoid typing repetitive declarations, this one is your friend.
HTML:
1 |
|
2 |
|
3 |
Sass:
1 |
|
2 |
.super-duper-borders
|
3 |
+background-image( |
4 |
linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), |
5 |
linear-gradient(#4e7ba3, darken(#4e7ba4, 10%))) |
6 |
+border-top-radius(3px) |
7 |
+border-bottom-radius(3px) |
8 |
|
9 |
height: 50px |
10 |
Compare both gradients and focus your attention on the lower gradient, which now has very subtle 3px rounded corners. Too much rounding lets designs often look comical. Keep it simple!
Of course you can go crazy with border radii. If you put some time into it, you can build some cool stuff with it. Below are a couple of nonsensical examples that should just illustrate how the various options work.
Sass:
1 |
|
2 |
.super-duper-borders
|
3 |
+linear-gradient($start-gradient-color, $end-gradient-color) |
4 |
+border-top-radius(600px) |
5 |
+border-bottom-radius(100px) |
6 |
height: 200px |
7 |
Sass:
1 |
|
2 |
.super-duper-borders
|
3 |
+linear-gradient($start-gradient-color, $end-gradient-color) |
4 |
+border-right-radius(600px) |
5 |
+border-left-radius(100px) |
6 |
height: 200px |
7 |
Box Sizing Mixin
With this mixin you can easily change the box model of an element. There are three options to choose from:
border-boxcontent-boxinherit
Sass:
1 |
|
2 |
.user-profile
|
3 |
+box-sizing(border-box) |
4 |
Transition Mixin
Worth noting straight away: attach the transition mixin to the default state of the selector (which is to be changed by an event like hover) not to the pseudo-class!
HTML:
1 |
|
2 |
|
3 |
Sass:
1 |
|
2 |
.fancy-transition
|
3 |
+transition (all 1.0s $ease-in-sine) |
4 |
|
5 |
height: 50px |
6 |
background-color: red |
7 |
+border-top-radius(5px) |
8 |
+border-bottom-radius(5px) |
9 |
|
10 |
&:hover |
11 |
background-color: blue |
12 |
+border-top-radius(25px) |
13 |
+border-bottom-radius(25px) |
14 |
Element’s default state:
It then transitions over the specified time; here 1.0s
And here’s the hover state after transition:
You can hand-pick the properties you want to be affected by the transition. Instead of all, use only the properties you need. Different timing-functions for different properties can also be chained together nicely.
Sass:
1 |
|
2 |
// all |
3 |
+transition (all 1.0s $ease-in-sine); |
4 |
|
5 |
// fine-tuned |
6 |
+transition (background-color 2.0s $ease-in-sine, height 1.0s $ease-out-cubic); |
7 |
To fine-tune transitional behaviour, there are a number of very convenient Sass variables from Bourbon for various timing-functions at your disposal:
Font Face Mixin
Typography is an essential piece of the puzzle when designing high quality projects for the web. On a kind of atomic level it guides so many design decisions and can influence the perception of the user in a multitude of ways.
@font-face allows designers to customize type by providing users with custom fonts which they might not have installed on their machines.
Here’s how you might typically include @font-face in your vanilla stylesheets, assuming our font files are placed in a directory “fonts/SourceSansPro”:
CSS:
1 |
|
2 |
@font-face { |
3 |
font-family: 'SourceSansPro-Regular'; |
4 |
src: url('fonts/SourceSansPro/sourcesanspro-regular.eot'); |
5 |
src: url('fonts/SourceSansPro/sourcesanspro-regular.eot?#iefix') format('embedded-opentype'), |
6 |
url('fonts/SourceSansPro/sourcesanspro-regular.woff') format('woff'), |
7 |
url('fonts/SourceSansPro/sourcesanspro-regular.ttf') format('truetype'), |
8 |
url('fonts/SourceSansPro/sourcesanspro-regular.svg#source_sans_proregular') format('svg'); |
9 |
font-weight: normal; |
10 |
font-style: normal; |
11 |
}
|
12 |
|
13 |
@font-face { |
14 |
font-family: 'SourceSansPro-Bold'; |
15 |
src: url('fonts/SourceSansPro/sourcesanspro-bold.eot'); |
16 |
src: url('fonts/SourceSansPro/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'), |
17 |
url('fonts/SourceSansPro/sourcesanspro-bold.woff') format('woff'), |
18 |
url('fonts/SourceSansPro/sourcesanspro-bold.ttf') format('truetype'), |
19 |
url('fonts/SourceSansPro/sourcesanspro-bold.svg#source_sans_probold') format('svg'); |
20 |
font-weight: normal; |
21 |
font-style: normal; |
22 |
}
|
23 |
|
24 |
// apply custom fonts to some classes |
25 |
|
26 |
.regular-font { |
27 |
font-family: SourceSansPro-Regular; |
28 |
}
|
29 |
|
30 |
.bold-font { |
31 |
font-family: SourceSansPro-Bold; |
32 |
}
|
33 |
This can get very tedious very quickly, and opens up the door for mistakes. Happily, those days are now gone and this practice becomes obsolete with the Bourbon font-face mixin. With Bourbon, it looks like this:
Sass:
1 |
|
2 |
+font-face(SourceSansPro-Regular, 'fonts/SourceSansPro/sourcesanspro-regular', normal) |
3 |
+font-face(SourceSansPro-Bold, 'fonts/SourceSansPro/sourcesanspro-bold', bold) |
4 |
|
5 |
.regular-font
|
6 |
font-family: SourceSansPro-Regular |
7 |
|
8 |
.bold-font
|
9 |
font-family: SourceSansPro-Bold |
10 |
It’s that easy! A remarkable reduction of code. There’s more to explore with the Font Face mixin too, such as the $file-formats argument (which allows you to specify the formats you’re using), and the Rails [$asset-pipeline](https://guides.rubyonrails.org/asset_pipeline.html) which is a bit more advanced, but can help you organise your assets.
Cheers!
We’ve only touched the surface of Bourbon’s extensive list of mixins. Join me in the next part where we’ll dive into some others.
By
