We'll place all of our functions and mixins in a folder called helpers. We'll place our mixins in a folder called mixins and functions in a folder called, you guessed it, functions. We'll then create a file in the root of the helpers directory called all.scss which will include all of our functions and mixins in the correct order. This will help avoid cluttering up our style.scss file with functions and mixins.
Your folder structure should be like so:
scss
|-- helpers
|-- _all.scss
|-- mixins
|-- functions
We'll be working with maps quite a bit. So we'll add our get function from Chapter 5, Advanced Sass, which allows us to do away with the verbose map-get syntax in favor of a much simpler, cleaner syntax. Create a file called get.scss in the scss/helpers/functions directory. Inside that place the following code:
// Function for retrieving deeply nested map values
@function get($map, $arglist...)
{
$m: $map;
@each $item in $arglist {
@if $m != null {
$m: map-get($m, $item);
}
}
@return $m;
}I've modified this slightly from the example in Chapter 5, Advanced Sass. Here, I've added an if statement to check if our $m is not null:
// Function for retrieving deeply nested map values
@function get($map, $arglist...)
{
$m: $map;
@each $item in $arglist {
@if $m != null {
$m: map-get($m, $item);
}
}
@return $m;
}
This prevents gulp from showing an error in the console about the variable $m being a value of null. This error happens because once every key/value has been iterated over, the loop returns the final value as expected, however the loop runs one last time but $m is now a null value. This won't stop Sass from compiling, however I'd still prefer not to see the error constantly.
Now import _get.scss in our scss/helpers/_all.scss :
@import "functions/get.scss";
Now import the scss/helpers/_all.scss file as the first import in our scss/style.scss file:
@import "helpers/all.scss";
Next, I'm going to create a simple mixin for creating hover links. This is the same as the one you'll find in the Compass utilities; however, I feel it's a waste to require Compass just for the few mixins I want. I also might want modify this mixin or change it somehow in the future.
Create a file called _hover-link.scss in scss/helpers/mixins. Inside that place the following:
@mixin hover-link {
text-decoration: none;
&:hover, &:focus {
text-decoration: underline;
}
}
Now open scss/helpers/_all.scss and import our hover-link mixin:
@import "functions/get.scss";
@import "mixins/hover-link.scss";
I don't know about you, but writing media queries always seems like bit of a chore to me. I just don't like to write (min-width: 768px) all the time. So for that reason I'm going to include the bp mixin, the same as the media mixin in Chapter 5, Advanced Sass, but with one minor update. I'd like to default it to (min-width: 768px) seeing as that is where the main breakpoint of our design will be.
Let's write our mixin:
$default-breakpoint: medium !default;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
) !default;
@mixin bp($size: unquote($default-breakpoint), $breakpoints: $breakpoints) {
@media (min-width: map-get($breakpoints, $size)) {
@content;
}
}
Now import this file in our scss/helpers/_all.scss file:
@import "functions/get.scss";
@import "mixins/hover-link.scss";
@import "mixins/bp.scss";
Next place the $default-breakpoint variable and $breakpoint map in scss/style.scss before our imports:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
@import "helpers/all.scss";
Let's add a quick test to make sure it works. At the end of style.scss add the following:
body {
background-color: red;
@include bp {
background-color: green;
}
}
Now resize the browser and you should see a red background on screens below 766px wide and a green background on screens 768px and above.
Mixin – media (based on the OOCSS media component)
The product component we created before will be very useful throughout this project. We'll use it not only for displaying products in various places but also to display blog posts, perhaps portfolio items, and maybe even testimonials. If we're creative with our styling later we can extend it to look completely different for each purpose to hide the fact we're reusing one component over and over again. This isn't cheating, it's just saving us time and work.
We'll call our component media (from the media component in OOCSS on which it's based). Create a file called media.scss in scss/helpers/mixins and inside place the following mixins:
// Mixin for creating the media-container. Simply adds padding and a clearfix.
@mixin media-container($spacing: 1em) {
padding: $spacing;
overflow: hidden;
}
// Mixin for creating the media-image.
@mixin media-image($img-align: left, $spacing: 1em) {
display: block;
float: $img-align;
@if ($img-align == unquote(right)) {
margin-left: $spacing;
} @else if ($img-align == unquote(left)) {
margin-right: $spacing;
} @else {
margin: 0 auto;
}
}
// Mixin for creating the media-title and link style. Useful if we need to modify the defaults for more control
@mixin media-title($color: black, $link-color: inherit, $link-hover-color: inherit, $text-transform: uppercase) {
margin-top: 0;
text-transform: $text-transform;
color: $color;
a {
@include hover-link;
color: $link-color;
&:hover {
color: $link-hover-color;
}
}
}
// Mixin for creating the media-button. Useful if we need to modify the defaults for more control
@mixin media-button($img-align: left, $spacing: 1em, $background-color: black, $text-color: white, $border-width: 1px, $text-transform: uppercase) {
padding: ($spacing * 0.25) ($spacing * 0.5);
text-transform: $text-transform;
text-decoration: none;
color: $text-color;
background-color: $background-color;
border: $border-width solid transparent;
@if ($img-align == unquote(none)) {
float: none;
} @else if ($img-align == unquote(left) or $img-align == unquote(right)) {
float: if($img-align == left, right, left);
} @else {
@warn 'First parameter of `media-button` mixin must be `left` or `right`. `#{$img-align}` given.';
}
&:hover {
color: $background-color;
background: transparent;
border: $border-width solid;
}
}
// ------------------------------------------------------------
// MEDIA COMPONENT
// ------------------------------------------------------------
// We will create a reusable mixin based loosely on the media
// mixin from OOCSS.
@mixin media($img-align: left, $spacing: 1em, $color: black) {
@include media-container($spacing);
&-image {
@include media-image($img-align, $spacing);
}
&-title {
@include media-title($color);
}
&-button {
@include media-button($img-align, $spacing, $color);
}
}
As you can see I've abstracted out each part into its own mixin. The container, title, image, and button each are in their own specialized mixin now. This will allow us to use them in various combinations and have more control of each part if needs be. For example, we may not always need a button, or the title, or either, so using the full media component would create a lot of unnecessary CSS bloat. With each part in its own mixin we can take what we need when we need it.
I've also added some error handling to the media-image and media-button mixins, as well as some additional conditions to allow for a centered layout which would allow for a full width image or a rounded image. We'll use these when we create our centered media component later.
Now open scss/helpers/_all.scss and simply import mixins/media.scss:
@import "functions/get.scss";
@import "mixins/hover-link.scss";
@import "mixins/bp.scss";
@import "mixins/media.scss";
Now that we have our helpers imported, one of the first things we need to do is go and get normalize.css which was created by Nicholas Gallagher and Jonathan Neal. You can find the file on Github at https://github.com/necolas/normalize.css. Simply download the normalize.css file and save it in the directory assets/scss/base. Then rename it to _normailize.scss and import it into style.scss:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
@import "helpers/all.scss";
@import "base/normalize.scss";
You should see the text change from sans-serif to sans. This is due to normalize.scss.
Now that we have normalize.scss laying down a good base foundation we still need a file to add our own, more opinionated base styles. For example, more often than not, if I have a list (such as a <ul>) within a nav (<nav>) element I don't want bullets. I also don't want margin or padding on any <ul> elements within a nav element. Also, the first level of list items (<li>) in the first unordered list (<ul>) should be in a row. Also, I want everything to use the border-box box-sizing property.
Create a file in the scss/base directory called _global.scss and inside that place the following:
*, *::before, *::after {
box-sizing: border-box;
}
body, html {
overflow-x: hidden;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
> ul > li,
> div > ul > li {
display: inline-block;
}
}
p, h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
The overflow-x: hidden is to prevent a scrollbar on the bottom of the page when we create our cart element, which will be off screen and will slide in when we click a button to see the cart.
The selector > div > ul > li is in there for when we have a div around the ul in order to constrain the menu to a max-width. This could be using a container div or a row or a column or any div really.
I also don't like paragraphs and headings to have a margin on the top and bottom, only the bottom. I think this looks better overall, especially when you have images with text beside them.
Now we just need to import the scss/base/global.scss at the top of our scss/style.scss file, just after where we imported base/normalize.scss:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
At this point also, it would be a good idea to remove the styles from the previous chapter for the main element and h1, h2, and paragraphs. Remove the following from style.scss:
main {
padding-top: 2em;
}
h1, h2, p {
text-align: center;
}
Our design will make use of a lot of icons in place of text, on buttons, and links. For this reason, we need a way for screen readers to still be able to understand what those buttons are for. To do this we'll need to create elements of text which are hidden visually from sighted users, but still "technically" part of the DOM so screen readers and other assistive technology and search engines can still read them. To do this we'll create a class of screen-reader-text. This class can be applied to elements to hide them visually without using display: none or visibility: hidden. The reason for this is screen readers will not read text in hidden elements.
Instead, we need to simply mask the text by making its containing element as small as possibly using clip, height, width, and a few other properties to hide the text from view:
.screen-reader-text {
// Dimensions
// make our element as small as possible
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
// Positioning
// This lifts our element out of it's container to prevent it interfering
with our layout
position: absolute !important;
// Visibility
overflow: hidden; // This stop scroll bars appearing
// Theme
// Some screen reader and browsers read broken/hyphenated words as they
would appear visually
word-wrap: normal !important;
}
Place this inside a file called _typography.scss inside scss/base and then import it into style.scss:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
@import "base/typography.scss";
As you can see, creating a screen-reader-text class for accessibility is very easy so there is no reason not to do it. Accessibility is important and should always be part of the process from the very beginning. No exceptions.
Now, we need a container class which will constrain any element inside it or any element with that class to our max-width. We'll set this to 1160px.
Create a file in scss/layout called _grid.scss. Inside that let's define our container class and a $grid configuration map:
$grid: (
max-width: 1160px
) !default;
.container {
// Dimensions
max-width: get($grid, max-width);
// Positioning
margin: 0 auto;
// Clearfix
overflow: hidden;
}
Now let's import it in our scss/style.scss file and add the $grid map before our imports:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
$grid: (
max-width: 1160px
);
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
@import "base/typography.scss";
@import "layout/grid.scss";
Next we need to download our icon font. My current preference is Ionicons from the Ion Framework. You can get them from the Github repository at https://github.com/driftyco/ionicons.
However, if you prefer another font family such as Font Awesome or something else you can simply replace Ionicons with your preference instead.
To install Ionicons, we'll need a folder called theme inside the assets/scss directory. Inside the theme directory, create a folder called ionicons (or replace with your own icon font). Inside here we'll place the scss files from the Ionicon github repository. These files are _ionicons-font.scss, _ionicons-icons.scss, _ionicons-variables.scss, and ionicons.scss.
Next we need to rename ionicons.scss to _ionicons.scss so it doesn't compile to its own CSS file. Then we import it to our main style
.scss file:
@import "theme/ionicons/ionicons.scss";
Tip
You'll notice I've left out the underscore before our filename, ionicons.scss.
Sass is actually smart enough to import a file if you leave out the underscore. You can even leave out the extension if you want! This will work just the same:
@import "theme/ionicons/ionicons";
The scss directory structure should now be as follows:
scss
|-- base
|-- _normailize.scss
|-- theme
|-- ionicons
|-- _ionicons.scss
|-- _ionicons-fonts.scss
|-- _ionicons-icons.scss
|-- _ionicons-variables.scss
Next we need the actual font files contained within the fonts directory. Remember we need the paths to be relative to the css directory and not the scss directory. I like to keep fonts and background images and anything with paths relative to CSS files inside the css directory. This means if I move the css directory up or down a level it won't affect the paths.
To accomplish this for Ionicons we first need to override a variable $ionicons-font-path by defining it at the top of our style.scss file (anywhere before where we imported the ionicons.scss file):
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
$grid: (
max-width: 1160px
);
$ionicons-font-path: "fonts/ionicons";
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
@import "base/typography.scss";
@import "layout/grid.scss";
@import "theme/ionicons/ionicons.scss";
This is because in the _ionicons-variables.scss file the variable was defined with the !default flag which we covered in a previous chapter. Therefore, if we define that variable anywhere before that definition it will be used instead. For that reason, we never need to modify the ionicons.scss files directly, which means we can update the ionicons.scss files in future without worrying about losing our customizations.
Now we can place the files from the fonts directory in Ionicons inside the directory asset/css/fonts/ionicons.
The css directory structure should now be:
css
|-- style.css
|-- style.css.map
|-- fonts
|-- ionicons
|-- ionicons.eot
|-- ionicons.svg
|-- ionicons.ttf
|-- ionicons.woff
Next, we'll need a top navigation bar which will contain two unordered lists. One will contain our contact-related links and info, such as phone number, e-mail, and social links. The other will contain links where users will access their account and cart. The cart link will open our cart slide-out component, which we will get to later in this chapter.
Place the following markup after the opening <body> tag:
<!-BEGIN .top-nav -->
<nav class="top-nav">
<div class="container">
<ul class="top-nav-menu top-nav-contact-menu">
<li class="top-nav-menu-item top-nav-contact-menu-item">
<span class="ion-android-phone-portrait"></span>
<a href="tel:+0123456789">
<span class="top-nav-menu-text top-nav-contact-menu-text">
+0123456789
</span>
</a>
</li>
<li class="top-nav-menu-item top-nav-contact-menu-item">
<span class="ion-email"></span>
<a href="mailto:your@email.here">
<span class="top-nav-menu-text top-nav-contact-menu-text">
your@email.here
</span>
</a>
</li>
<li class="top-nav-menu-item top-nav-contact-menu-item">
<span class="ion-social-facebook"></span>
<a href="javascript:;" target="_blank">
<span class="top-nav-menu-text top-nav-contact-menu-text">
Facebook
</span>
</a>
</li>
<li class="top-nav-menu-item top-nav-social-menu-item">
<span class="ion-social-twitter"></span>
<a href="javascript:;" target="_blank">
<span class="top-nav-menu-text top-nav-contact-menu-text">
Twitter
</span>
</a>
</li>
</ul>
<ul class="top-nav-menu-item top-nav-shop-menu">
<li class="top-nav-menu-item top-nav-shop-menu-item">
<span class="ion-filing"></span>
<a href="#">
<span class="top-nav-menu-text top-nav-shop-menu-text">
Account
</span>
</a>
</li>
<li class="top-nav-menu-item top-nav-shop-menu-item">
<span class="ion-ios-cart"></span>
<a href="javascript:;" id="cart-button">
<span class="top-nav-menu-text top-nav-shop-menu-text">
Cart
</span>
</a>
</li>
<li class="top-nav-menu-item top-nav-shop-menu-item">
<span class="ion-ios-locked"></span>
<a href="javascript:;">
<span class="top-nav-menu-text top-nav-shop-menu-text">
Login
</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- END .top-nav -->
There's nothing too fancy going on here. There are two separate unordered lists contained within the nav element as I explained before. Each has a definite purpose. One is contact info and the other is account/shop related.
Each menu (<ul>) has a class of top-nav-menu so styles can easily be applied to both equally. Then each has a unique class which identifies them separately and allows us to override the top-nav-menu styles if need be. We'll use these to float each menu left or right accordingly. This is also useful if the client wants one to stand out from the other.
Each list item inside those unordered lists will also have a general class of top-nav-menu-item applied to them. Also, each will have a more specific class relating to which unordered list they are in, contact or shop. This is for the same reasons as mentioned previously.
Now let's apply some styles to it and lay everything out correctly. Create a file in scss/components called _top-nav.scss. Inside that place our styles:
.top-nav {
overflow: hidden;
&-contact-menu {
@include bp {
float: left;
}
}
&-shop-menu {
@include bp {
float: right;
}
}
}
That's all we need for now to get everything in place. The assumption we made before; that any unordered list inside a nav element would be inline, means we have less CSS when creating nav menus.
Now simply import the components/top-nav.scss file into style.scss:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
$ionicons-font-path: "fonts/ionicons";
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
@import "base/typography.scss";
@import "layout/grid.scss";
@import "components/top-nav.scss";
@import "theme/ionicons/ionicons.scss";
Next we'll create our header area where our title and search bar will be. The title will be to the left and search bar to the right. We'll wrap each in their own div so we can better control where they go.
Place the following markup just after the top-nav element:
<!-- BEGIN .main-header -->
<header class="main-header">
<div class="main-header-inner container">
<div class="two-thirds column">
<h1 class="main-header-title">Mastering Sass Swag</h1>
</div>
<div class="one-third column">
<!-- TODO: Search bar to go here -->
</div>
</div>
</header>
<!-- END .main-header -->
Now open up scss/layout/_grid.scss and add a gutter property to the $grid map and the column, a one-third class and two-thirds classes.
Note
A gutter is generally the space between columns in a grid. It's padding or margin added to the left, right or both sides of columns, rows or containers.
The _grid.scss file should now look like this:
$grid: (
max-width: 1160px,
gutter: 1em
) !default;
.container {
// Dimensions
max-width: get($grid, max-width);
// Positioning
margin: 0 auto;
// Clearfix
overflow: hidden;
}
.column {
// Dimensions
padding-left: get($grid, gutter) / 2;
padding-right: get($grid, gutter) / 2;
// Positioning
float: left;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
.one-third {
width: 100%;
@include bp {
width: (100% / 3);
}
}
.two-thirds {
width: 100%;
@include bp {
width: (100% / 3) * 2;
}
}
We use the column class to apply padding and floats, while the one-third and two-thirds classes set the width. We'll add more in the next chapter but this will be enough to get us started for now.
It's also important you remember to add the gutter property to the $grid map in scss/style.scss:
$grid: (
max-width: 1160px,
gutter: 1em
);
In the rightmost column of our main-inner-header we're going to place a search component. Once again we want to be able to use this anywhere we might want, so it needs to be independent of where we put it on the page.
Here's our markup for the search component:
<!-- BEGIN search-bar -->
<form class="search-bar" action="#" method="get">
<label for="search">
<span class="screen-reader-text">Search for:</span>
</label>
<input id="search" class="search-bar-input" type="search" placeholder="Search...">
<button class="search-bar-button" type="submit">
<span class="screen-reader-text">Search</span>
<span class="ion-android-search"></span>
</button>
</form>
<!-- END search-bar -->
Next we need to create a file in scss/components called _search.scss. Inside that place the following:
.search-bar {
position: relative;
&-input {
// Dimensions
width: 100%;
line-height: 1.4;
max-height: 2em;
// Positioning
padding: 0.25em 2em 0.25em 0.25em;
}
&-button {
// Dimensions
line-height: 1.4;
max-height: 2em;
padding: 0.25em 0.5em;
// Positioning
position: absolute;
right: 0;
top: 0;
}
}
Here, we are setting the search-bar element to position: relative. This will allow us to then set the button to position: absolute so we can position it inside (or above) the search input. Then we set the button to top: 0 and right: 0 to place it in the top right of the search-bar element. It's also important to set both the line-height and the max-height on the input element and the button to eliminate browser inconsistencies due to font-sizing.
Now let's import components/search.scss in style.scss just after components/top-nav.scss:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
$ionicons-font-path: "fonts/ionicons";
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
@import "base/typography.scss";
@import "layout/grid.scss";
@import "components/top-nav.scss";
@import "components/search.scss";
@import "theme/ionicons/ionicons.scss";
Next, we need to add our main-nav, just below our header. Add the following markup:
<!-- BEGIN .main-nav -->
<nav class="main-nav">
<ul class="main-nav-menu container">
<li class="main-nav-menu-item"><a href="#">Home</a></li>
<li class="main-nav-menu-item"><a href="#">Our Swag</a></li>
<li class="main-nav-menu-item"><a href="#">Our Blog</a></li>
<li class="main-nav-menu-item"><a href="#">Our Customers</a></li>
<li class="main-nav-menu-item"><a href="#">Who We Are</a></li>
<li class="main-nav-menu-item"><a href="#">Contact</a></li>
</ul>
</nav>
<!-- END .main-nav -->
We don't need to apply any styling to this seeing as we already defined enough in our base/_global.scss. We're also using the class of container on the <ul> which will keep it centered and at a max-width of 1160px.
Next we need to create the cart element which will contain the list of currently selected items along with prices, (VAT, subtotal, total, and so on) and a link to go to the checkout page. The cart will be the most important component in many ways. It will be the gateway to the checkout page and will need to be powerful but also subtle. To achieve this, and in the interest of mobile-first, we'll make it a slide-out panel which will be activated by clicking the cart link in the top-nav. This will require a simple piece of jQuery which will add an is-opened class to the cart element.
Our cart component will consist of a container, and inside that will be a header, body, and footer section. First we'll add the div which will container the sections of our cart. It will have an id of cart, which we will target with jQuery to open and close the cart when the cart link is clicked. Just inside that we'll have our cart-header.
Let's add the markup just before our main (<main>) element and after our header:
<!-- BEGIN .cart -->
<div id="cart" class="cart">
<!-- BEGIN .cart-header -->
<header class="cart-header">
<a href="javascript:;" id="cart-close-button"
class="cart-close-button">
<span class="ion-close"></span>
<span class="screen-reader-text">
Close
</span>
</a>
<h3 class="cart-title">
Cart
</h3>
</header>
<!-- END .cart-header -->
Our <header> contains a link called cart-close-button. This will be used to close our cart. On small screens the cart slides over the cart link in the menu. Therefore we can't use that link to close the cart. So we need a close button. It's also just a good idea to give the user options about how to open/close an interactive component, such as a modal or slide-out panel.
Next, just after our cart header, we have our cart body. This will contain a list of our cart items with an image, the product title, price, and a link to remove the item from the cart:
<!-- BEGIN cart-body -->
<div class="cart-body">
<ul class="cart-list">
<li class="cart-list-item">
<img src="http://placehold.it/150x150" alt="Image of Product" class="cart-list-item-image"/>
<div class="cart-list-item-details">
<h4 class="cart-list-item-title">
<a href="#" class="cart-list-item-title-link">
Mastering Sass T-shirt (Medium)
</a>
</h4>
<span class="cart-list-item-price">
<span class="cart-list-item-price-label">Item Price:
</span>
€40
</span>
<a href="#" class="cart-list-item-remove">Remove ×
</a>
</div>
</li>
<li class="cart-list-item">
<img src="http://placehold.it/150x150" alt="Image of Product" class="cart-list-item-image"/>
<div class="cart-list-item-details">
<h4 class="cart-list-item-title">
<a href="#" class="cart-list-item-title-link">
Mastering Sass Hat (Black)
</a>
</h4>
<span class="cart-list-item-price">
<span class="cart-list-item-price-label">Item Price:
</span>
€10
</span>
<a href="#" class="cart-list-item-remove">Remove ×
</a>
</div>
</li>
</ul>
</div>
<!-- END .cart-body -->
We then have the footer of our cart component. This will contain our subtotal, VAT, and total price of all our items in the cart:
<!-- BEGIN .cart-footer -->
<footer class="cart-footer">
<div class="cart-totals">
<div class="cart-subtotal">
<span class="cart-totals-title cart-subtotal-title">
Subtotal:
</span>
<span class="cart-totals-value cart-subtotal-value">
€50.00
</span>
</div>
<div class="cart-vat">
<span class="cart-totals-title cart-vat-title">
VAT:
</span>
<span class="cart-totals-value cart-vat-value">
%23
</span>
</div>
<div class="cart-total">
<span class="cart-totals-title cart-total-title">
Total:
</span>
<span class="cart-totals-value cart-total-value">
€
</span>
</div>
</div>
<div class="cart-checkout">
<a href="#checkout" class="cart-checkout-button">
Go to Checkout →
</a>
</div>
</footer>
<!-- END .cart-footer -->
</div>
<!-- END .cart -->
Our cart element consists of three main sections; a header, body, and a footer. We can use the header and footer elements here also to reflect this semantically.
The header will contain the title and the close button (#cart-close-button), which when clicked will remove the is-opened class, thus causing the cart component to slide off screen once more.
The body will contain an unordered list with the current products contained within the user's cart. This will consist of an image, the product name, the price, and a button to remove the product from the cart.
The cart footer will contain the totals, such as the subtotal, VAT, and total price of the products in the cart. We'll also add a link/button here to go to the checkout page.
Next, we'll add the jQuery to our script section to add the is-opened class when the cart link is clicked, and remove it when the #cart-close-button is clicked:
<script>
jQuery(document).ready(function ($) {
$cartButton = $('#cart-button');
$cartCloseButton = $('#cart-close-button');
$cart = $('#cart');
$cartButton.on('click', function () {
$cart.toggleClass('is-opened');
});
$cartCloseButton.on('click', function () {
$cart.removeClass('is-opened');
});
});
</script>
So first, we're creating variables to easily access the element with an ID of cart-button and cart-button-close. From there we're simply saying when the $cartButton is clicked we want to toggle the is-opened class on the cart element. This means the cart-button can open and close the cart. However, on a mobile the cart element will cover the entire page. So we also need a way to close it from within the panel itself. This is where the cart-close-button comes in. We set this to simply remove the class of is-opened, thus closing the cart.
With the markup and jQuery in place, let's add our SCSS. Create a file in the scss/components called _cart.scss. Inside it, we'll have all of our styles for the cart component:
$cart: (
slide-in: right,
height: 100vh,
width: (
small: 100vw,
medium: 20em
),
spacing: 1em,
bg-color: white,
transition-speed: 350ms
) !default;
.cart {
// Dimensions
height: get($cart, height);
width: get($cart, width, small);
// Positioning
position: absolute;
padding: get($cart, spacing);
top: 0;
bottom: 0;
z-index: 9999;
// What side will the panel slide in from
@if (get($cart, slide-in) == 'right') {
right: -#{get($cart, width, small)};
} @else {
left: -#{get($cart, width, small)};
@warn 'The `slide-in` property must be left or right in the
$cart map.';
}
// State
transition: transform get($cart, transition-speed);
// Theme
background-color: get($cart, bg-color);
@include bp {
width: get($cart, width, medium);
// What side will the panel slide in from
@if (get($cart, slide-in) == 'right') {
right: -#{get($cart, width, medium)};
} @else {
left: -#{get($cart, width, medium)};
}
}
&-list {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
&-item {
@include media-container((get($cart, spacing) get($cart, spacing) get($cart, spacing) 0));
&-image {
@include media-image(left, get($cart, spacing));
max-width: 50px;
height: auto;
}
&-title {
@include media-title();
}
&-price {
float: left;
&-label {
font-weight: bold;
}
}
&-remove {
@include hover-link;
float: right;
}
}
}
}
.cart.is-opened {
// What side will the panel slide in from
@if (get($cart, slide-in) == 'right') {
transform: translateX(-#{get($cart, width, small)});
} @else {
transform: translateX(#{get($cart, width, small)});
}
@include bp {
@if (get($cart, slide-in) == 'right') {
transform: translateX(-#{get($cart, width, medium)});
} @else {
transform: translateX(#{get($cart, width, medium)})
}
}
}
First, we need to create a container which will be full width on small screens with a height of 100vh (viewport height). Then at 768px wide and above it will be 20em wide.
Viewport-percentage units are similar to in concept to percentages. However, if you were to create a div with a height and width of 100% it would be 100% of its containing element. Viewport-percentage units (vw and vh) are relative to the viewport (browser window). You can read more about them here https://developer.mozilla.org/en/docs/Web/CSS/length.
We'll also need to hide the cart element just off to the right (or left) of the screen by default using the translateX transform property. Then, when the class of is-opened is applied using jQuery it will slide in from the right. We use a transition to create the slide in/slide out effect. Otherwise, it would simply appear and disappear. It's important to place this on the default element and not the is-opened state.
You can see the last piece of SCSS is the .is-opened rules for both small and medium to large screens. The if statements are to allow us to switch from left to right by simply changing the slide-in property in our $cart configuration map. Setting it to left will mean the panel slides in from the left. Setting it to right means it will slide in from the right.
The slide in effect is achieved by first placing the element off the screen by setting it to absolute positioning. We then use the left (or right) property to push off screen the exact width so it sits just off screen. We do this using a negative value. Right or left zero would of course place the element flush with the side of the screen. Then, in the .cart.is-opened rule we use translateX to move the element in the other direction, bringing it back on screen.
We're also using the media-container, media-title, and media-image mixins to easily achieve our layout for product items in the list. However, we don't need the button element which is included with the default media mixin so using the individual mixins will save a few lines of CSS. We ensure they match our styles by using the values of the $cart map to set our padding.
Now simply import our file in style.scss and also copy the configuration to the top of style.scss so we can configure it from there:
$default-breakpoint: medium;
$breakpoints: (
small: 480px,
medium: 768px,
large: 980px
);
$cart: (
slide-in: right,
height: 100vh,
width: (
small: 100vw,
medium: 20em
),
spacing: 1em,
bg-color: white,
transition-speed: 350ms
);
$ionicons-font-path: "fonts/ionicons";
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
@import "base/typography.scss";
@import "layout/grid.scss";
@import "components/top-nav.scss";
@import "components/cart.scss";
@import "theme/ionicons/ionicons.scss";
Remember our components go after the layout but before our theme, so we can theme them independently. That way we can take the component and drop it into another project if needs be, or replace the theme files in this project and our component will have a brand new look to it.
Next, we're going to create a variation on the media component that will have the image centered as well as the text. Rather than being in a column layout this will be in rows.
Open the file scss/helpers/mixins/_media.scss and below our media mixin add a mixin called media-centered:
@mixin media-centered($img: fullwidth, $spacing: 1em, $color: black) {
@include media-container($spacing);
text-align: center;
&-image {
@include media-image(none, $spacing);
@if ($img == unquote(fullwidth)) {
width: 100%;
height: auto;
} @else if ($img == unquote(rounded)) {
border-radius: 9999px;
} @else {
@warn 'First parameter of `media-centered` mixin must be `fullwidth` or `rounded`. `#{$img}` given.';
}
}
&-title {
@include media-title($color);
margin-top: $spacing;
}
&-button {
@include media-button(none, $spacing, $color);
}
}
Here, we are using our media-container mixin to the set the properties of our container, which are padding and a clearfix. We then set text-align: centered which will cascade down through our component.
We use the media-image mixin, but we set the $img-align property to none, which will remove the float and center the image. We then check if the image is fullwidth or rounded and apply the appropriate styles. If the value passed in is neither fullwidth or rounded we show a warning to let the user know they've entered an invalid value.
The only change to the title is to add some margin to the top to give some space after the image. Our button uses a $img-align value of none also to center it instead of floating it left or right.
Next, we'll add our footer for the page. The footer will have our copyright text on the left and a footer menu to the right.
Here's our markup:
<!-- BEGIN header -->
<footer class="footer container">
<div class="footer-copyright">
<span class="footer-copyright-text">
© Since 2016. Mastering Sass Swag. All rights reserved
</span>
</div>
<nav class="footer-nav">
<ul class="footer-nav-menu">
<li class="footer-nav-menu-item"><a href="#">Terms and Conditions</a></li>
<li class="footer-nav-menu-item"><a href="#">Privacy Policy</a></li>
<li class="footer-nav-menu-item"><a href="#">FAQ</a></li>
</ul>
</nav>
</footer>
<!-- END footer -->
In scss/components create a file called _footer.scss and inside, place the following:
.footer {
overflow: hidden;
&-copyright, &-nav {
@include bp {
width: 50%;
float: left;
}
}
&-nav-menu {
float: right;
}
}
Now import scss/components/footer.scss into style.scss:
@import "helpers/all.scss";
@import "base/normalize.scss";
@import "base/global.scss";
@import "base/typography.scss";
@import "layout/grid.scss";
@import "components/top-nav.scss";
@import "components/search.scss";
@import "components/cart.scss";
@import "components/footer.scss";
@import "theme/ionicons/ionicons.scss";
The last thing I want to do is add a minimum height to the main element (<main>) on medium to large screens so the footer is at the bottom of the page at least until we have some content to fill the page. In style.scss add the following below our imports:
main {
@include bp {
min-height: 800px;
}
}
The preceding solution is temporary. We'll remove it in the next chapter once there is more on our page.
