Book Image

HTML5 and CSS3: Building Responsive Websites

By : Ben Frain, Thoriq Firdaus, Benjamin LaGrone
Book Image

HTML5 and CSS3: Building Responsive Websites

By: Ben Frain, Thoriq Firdaus, Benjamin LaGrone

Overview of this book

Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. The Internet is going mobile. Desktop-only websites just aren’t good enough anymore. With mobile internet usage still rising and tablets changing internet consumption habits, you need to know how to build websites that will just “work,” regardless of the devices used to access them. This Learning Path course explains all the key approaches necessary to create and maintain a modern responsive design using HTML5 and CSS3. Our first module is a step-by-step introduction to ease you into the responsive world, where you will learn to build engaging websites. With coverage of Responsive Grid System, Bootstrap, and Foundation, you will discover three of the most robust frameworks in responsive web design. Next, you’ll learn to create a cool blog page, a beautiful portfolio site, and a crisp professional business site and make them all totally responsive. Packed with examples and a thorough explanation of modern techniques and syntax, the second module provides a comprehensive resource for all things “responsive.” You’ll explore the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won’t just be built “right” for today, but in the future too. The last and the final module is your guide to obtaining full access to next generation devices and browser technology. Create responsive applications that make snappy connections for mobile browsers and give your website the latest design and development advantages to reach mobile devices. At the end of this course, you will learn to get and use all the tools you need to build and test your responsive web project performance and take your website to the next level. This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products: ?Responsive Web Design by Example: Beginner’s Guide - Second Edition by Thoriq Firdaus ?Responsive Web Design with HTML5 and CSS3 - Second Edition by Ben Frain ?HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone

Related Content you might be interested in

Current Title:

Small book image
HTML5 and CSS3: Building Responsive Websites
Ben Frain | Thoriq Firdaus | Benjamin LaGrone
Oct, 2016 | 11 hours 49 minutes
No titles found
Table of Contents (6 chapters)
Preface
Preface
What this learning path covers
What you need for this learning path
Who this learning path is for
Reader feedback
Customer support
Free Chapter
1
1. Module 1
1. Module 1
1. Responsive Web Design
2. Web Development Tools
3. Constructing a Simple Responsive Blog with Responsive.gs
4. Enhancing the Blog Appearance
5. Developing a Portfolio Website with Bootstrap
6. Polishing the Responsive Portfolio Website with LESS
7. A Responsive Website for Business with Foundation
8. Extending Foundation
A. Pop Quiz Answers
2
2. Module 2
2. Module 2
1. The Essentials of Responsive Web Design
2. Media Queries – Supporting Differing Viewports
3. Fluid Layouts and Responsive Images
4. HTML5 for Responsive Web Designs
5. CSS3 – Selectors, Typography, Color Modes, and New Features
6. Stunning Aesthetics with CSS3
7. Using SVGs for Resolution Independence
8. Transitions, Transformations, and Animations
9. Conquer Forms with HTML5 and CSS3
10. Approaching a Responsive Web Design
3
3. Module 3
3. Module 3
1. Responsive Elements and Media
2. Responsive Typography
3. Responsive Layout
4. Using Responsive Frameworks
5. Making Mobile-first Web Applications
6. Optimizing Responsive Content
7. Unobtrusive JavaScript
4
B. Bibliography
B. Bibliography
5
Index
Index

After constructing the website page markup in the previous chapter, we now start giving the website a look, feel, and colors. This time we will use Sassy CSS (SCSS), which also happens to be the underlying syntax of the Foundation default styles.

SCSS is a syntax variation of a CSS preprocessor named Sass. The Sass original syntax uses indentation formatting that makes the codes look neat. SCSS, on the other hand, uses curly braces and semicolons just like regular CSS. The similarity helps everyone to quickly grasp the syntax, in particular those who are new to Sass.

Since we are going to employ SCSS, we will start off this chapter by walking you through a couple of Sass features and its utilities. You will learn to define variables and functions, perform operations, and comply with other directives, which allows us to compose the website style rules more efficiently.

This might sound challenging. And if you like a challenge, we can just get started right away.

This chapter will revolve around the following topics:

Sass (http://sass-lang.com/) is a CSS preprocessor created by Hampton Catlin, Natalie Weizenbaum, and Chris Eppstein, which is the same team that also created Haml (http://haml.info/). Foundation, as mentioned at the beginning of this chapter, uses Sass to generate its CSS, and so will we. So, before we get our hands dirty, first we will delve into several Sass features, such as nesting, variables, mixins, functions, and others, that will allow us to write style rules more efficiently.

Sass allows us to nest style rules into one another. This feature eventually allows us to write style rules that resemble the HTML structure of the web page. That way, the style rules can be more concise and more easy to scan through. Say, we added the header markup of our website, as follows:

<header>
  <h1><a href="#">Website</a></h1>
</header>

With Sass, we can construct the style rules, as follows:

header {
  background: #000;
  h1 {
    margin: 0;
    a {
      color: #fff;
    }
  }
}

It's worth noticing that even though Sass allows you to nest style rules, you should not abuse this facility. So, don't do something like the following code:

body {
  nav {
    ul {
      li {
        a {
          &:before {

          }
        }
      }
    }
  }
}

Consider it before nesting style rules. The main objective of this feature is to make the style rules look simpler, more concise, easier to scan through, and not to make it unnecessarily look more complex.

A variable is one useful piece in programming language that allows us to define a value once within a specified name. Each language has a slightly different way to declare a variable. For example, JavaScript uses the keyword var, LESS uses @, and Sass in this case uses the $ sign.

One of the perfectly-suited implementations of a variable is to define the website colors, for example:

$primary: #000;	
$secondary: #bdc3c7;
$tertiary: #2ecc71;
$quaternary: #2980b9;
$quinary: #e67e22;

So, instead of declaring the color value every time we need it, we can simply declare the representative variables. In the following example, we declare $primary as the body text color and $secondary as the background color:

body {
  background-color: $secondary;
  color: $primary;
}

When compiled to regular CSS, these variables are replaced with the defined value, as follows:

body {
  background-color: #bdc3c7;
  color: #000;}

Using a variable with a proper name (of course), you will find it easier to write the variable rather than remembering the Hex or the RGB number; well, it is practically easier to write $primary than #bdc3c7, isn't it?

The Sass variable isn't exclusively aimed to define colors. We can also use a variable to define a string or plain text, as follows:

$var: "Hello World";
$body-font-family: "Helvetica Neue";

We can use a variable to store a number or a length:

$number: 9;
$global-radius: 3px;

We can use a variable to inherit the value of another variable:

$var: $anotherVar;
$header-font-family: $body-font-family;

We can use a variable to define the output of a function:

$h1-font-size: rem-calc(44);

Foundation centralized the declaration of its primary variables within a file named _settings.scss. We will look more into this matter later when we compose the website style rules.

There are certain circumstances when a variable is not applicable, such as when it is inserted within a string (plain text), as follows:

$var: "Hello";
$newVar: "$var World";
div {
  content: $newVar;
}

When compiled, the $var declaration within $newVar won't be replaced with the value of "Hello". This is because Sass interprets $var as a string or plain text. Thus, the output of the following example will simply be:

div {
  content: "$var World";
}

Another example where a variable won't work is when a declaration is begun with an @ rule or a directive, as follows:

$screen-size: (max-width: 600px);
@media $screen-size {
  div {
    display: none;
  } 
}

This example simply returns an error to the Sass compiler because @media is supposed to be followed by either the print or screen keyword.

There are a few cases where we have to use interpolation to declare a variable. Variable interpolation happens to other programming languages, such as PHP, Ruby, and Swift. But I'm not going into the details of the technicalities of its workings, as I don't exactly know either. Simply put, interpolation allows us to embed a variable in a situation where it does not allow the variable to work—especially where it is a string that is actually expected.

Each programming language has its notation to enable interpolation. In this case, Sass uses #{}. Given one of the previous examples, we can write the variable as follows:

$var: "Hello";
$newVar: "#{$var} World";
div {
  content: $newVar;
}

And the result will be as follows:

div {
  content: "Hello World";
}

Note

Follow Hugo Giraudel posts (https://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375) for further assistance about variable interpolation in Sass.

Now, we are going to look into Sass mixins. If you followed and accomplished the second project, you should know about LESS mixins. Mixins, both in Sass and LESS, have similar purposes; they allow developers to reuse code blocks and style rules within the entire style sheet and thus comply with the DRY principle (http://programmer.97things.oreilly.com/wiki/index.php/Don't_Repeat_Yourself). However, it is slightly different in terms of how we declare and reuse the mixins. This is how we declare a mixin in LESS:

.buttons { 
  color: @link-color;
  font-weight: normal;
  border-radius: 0; 
}

In Sass, we use the @mixins directive to create a mixin, for example:

$linkColor: $tertiary;
@mixin buttons { 
  color: $linkColor;
  font-weight: normal;
  border-radius: 0; 
}

Sass uses the @include directive to reuse the preceding code block within style rules. Given the preceding example, we can write:

.button {
   @include buttons;
}

The following is the output when the preceding example is compiled to CSS:

.button {
  color: #2ecc71;
  font-weight: normal;
  border-radius: 0;
}

That is a basic example of the application of Sass mixins.

Some CSS3 syntaxes are so complex that writing them can be really tedious work. And this is where mixins can be particularly useful. Fortunately, with Sass being so popular and supported by so many generous developers, we don't have to port all CSS3 syntax into Sass mixins on our own. Instead, we can simply employ Sass's mixin library that makes our work as a web developer more enjoyable.

The Sass library comes with a collection of useful mixins and functions (we will talk about functions shortly) that we can use right away out-of-the-box. There are dozens of popular libraries available, and one that we are going to use herein is called Bourbon (http://bourbon.io/).

Bourbon compiles a number of mixins in a library that simplifies the way we declare CSS3 syntax, including syntax that is still marked as experimental, such as image-rendering, filter, and the CSS3 calc function. Now, which do you think is easier and faster to write when it comes to specifying the Hi-DPI Media Query?

Note

Hi-DPI Media Query is used to measure the device pixel density, for which we can use it to deliver higher-resolution graphics on web pages, specifically on devices with hi-definition screens. The following are some references for further information on the subject.

Is the following standard syntax?

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  width: 500px;
}

Or, will it be the following one with the Bourbon mixin?:

@include hidpi(2) {
  width: 500px;
}

Without spending years researching, we can commonly agree that using the mixin should be a lot easier to write, as well as easier to remember.

Note

As mentioned, in addition to CSS3 mixins, Bourbon also ships with a couple of Sass functions, such as Triangle, which allows us to create CSS-based triangles. However, I'm not going to mention all the bits that are there in the Bourbon library. Since the library collection will most likely be updated or revised along with the introduction of new CSS specifications, it is better to refer to the list on the official documentation page (http://bourbon.io/docs/).

A function is one piece of a feature that makes creating style rules more dynamic. A function in Sass is declared using the @function directive, which is then followed by the function name, a parameter with preferably its default value. In its simplest form, a Sass function may look as follows:

@function color($parameter: green) {

}

This function, however, won't output anything yet. To generate a result of this function, we need to add a @return value. Given the preceding example, we want to output the default value parameter, which says "hello". To do so, we write the @return value, which is then followed by $parameter, as follows:

@function color($parameter: green) {
  @return $parameter;
}

Use this function within a selector, as follows:

@function name($parameter: green) {
  @return $parameter;
}
.selector {
  color: name();
}

Compile it, and you get the following output:

.selector {
  color: green;
}

Customize the output by specifying a new value out of the default one, as follows:

.selector {
  color: name(yellow);
}

We will get a new output, as shown in the following code:

.selector {
  color: yellow;
}

Note

This example merely shows the basic functionality of a function. There are a lot more examples on how we can utilize it in real cases to build reusable code series. So, I recommend you head over to the following references for further advanced discussion and find more examples.

Using pure Sass functions to make reusable logic more useful (http://thesassway.com/advanced/pure-sass-functions).

A couple of Sass functions (http://hugogiraudel.com/2013/08/12/sass-functions/).

One thing that I love about using CSS preprocessors such as Sass, is how easy it is to determine and alter colors. Sass, in this case, provides a bunch of built-in functions to manipulate colors seamlessly. The following is a list of a few Sass color functions for your reference, which may be useful to manipulate colors in the website later on:

Functions

Description

Example

lighten($color, $amount)

Turns a color lighter by the specified amount.

$black: #000000

lighten($black, 10%);

In this example, we lighten $black by 10 percent. The output is #1a1a1a.

darken($color, $amount)

Turns a color darker than the specified amount.

$white: #ffffff;

darken($white, 10%)

In this example, we darken $white by 10 percent. The output will be #e6e6e6.

fade-out($color, $amount)

Turns the color to be more transparent than the specified amount.

$black: #000000;

fade-out($black, .5);

In this example, we change the $black color to be compiled into RGB format and set the transparency to 50 percent. The output is rgba(0, 0, 0, 0.5).

Note

Please follow the Sass official documentation (http://sass-lang.com/documentation/Sass/Script/Functions.html) to find out the full list of the color functions available.

The Foundation framework comes with an array of its own functions. Foundation uses these functions to build its own default styles, and we can also use them to build our own. One such useful function therein is rem-calc(), which allows us to calculate the rem unit with less hassle.

The rem unit is a relative value that inherited concepts similar to em. Here is what Ian Yates expounded about the origin of em in his post (https://webdesign.tutsplus.com/articles/taking-the-erm-out-of-ems--webdesign-12321):

"Ems get their name from printing. Precisely when the term was first used is unclear, but as the uppercase M (pronounced emm) most closely represents the square printing block on which printing letters were placed, it came to lend its name to the measurement. Whatever the point size of the font in question, the block of the uppercase M would define the Em."

But the problem with the em unit, as Jonathan Snook described in his post (http://snook.ca/archives/html_and_css/font-size-with-rem), is its compounding nature. Since the size is relative to its closest parent, in my experience the size output can be unpredictably frustrating at best; the size will be varying depending on where it is specified. Examine the following example:

body {
    font-size:16px;
}
div {
    font-size: 1.2em; /* 19px */
} 
ul { 
    font-size: 1em; /* 19px */
}
ul li { 
    font-size: 1.2em; /* 23px */
}

This is where the rem unit comes in. The rem unit measures the calculation directly against the font size of <html>, the root element of an HTML document—thus, it is also dubbed as root em. Regardless of where the unit is specified, the result will be precise, consistent, and more importantly, easy to figure out (it's like the px unit, but it's relative).

The rem-calc function accepts both integer and length. Hence, the following code examples work:

div {
  font-size: rem-calc(12); 
}
span {
  font-size: rem-calc(10px); 
}
p {
  font-size: rem-calc(11em); 
}

In this case, they will turn out to be as follows:

div {
  font-size: 0.75rem;
}
span {
  font-size: 0.625rem;
}
p {
  font-size: 0.6875rem;
}

There is a lot more about Sass than we are able to cover In this module, such as placeholder, conditional statement, and operators, just to name a few. Thankfully, there are enough good references and books that have covered Sass, as well as its supporting utilities in greater depth, into which you can dig into on your own. The following are some of my best recommendations:

Before we resume the work, let's end this section with a couple of quizzes, shall we?

In the preceding section, we discussed about Sass function, as well as showed you the simplest example out of it. In the example, we created a function with only one parameter. The fact is that we can add multiple parameters within a single Sass function.

Q1. So, which among the following examples is the correct way to create a function with multiple parameters?

  1. Each parameter is separated with a semicolon.
    @function name($a:1px; $b:2px){ 
@return $a + $b
}
  2. Each parameter is separated with an addition operator.
    @function name($a:2px + $b:2px){ 
@return $a + $b
}
  3. Each parameter is separated with a comma.
    @function name($a:1px, $b:2px){ 
@return $a + $b
}

Q1. There are lots of Sass functions built-in. In this section, we named three, lighten(), darken(), and fade-out(), which I think are sufficient to help us to decorate the website of this project. The fade-out() function has an alias that also gives us the same result. So, which of the following is the name alias for the fade-out() function?

  1. transparentize($color, $amount)
  2. transparency($color, $amount)
  3. transparent($color, $amount)

In Chapter 7, A Responsive Website for Business with Foundation, we installed Foundation and Foundation Icons, along with their dependencies (jQuery, Fastclick, Modernizr, and so on) through Bower (http://bower.io/). We also prepared the website assets, namely, the images, image icons, and the website logo. In the last section of the chapter, we created index.html for the website home page, and we also constructed the markup using a couple of new HTML5 tags. So, the files and folders that are currently in the working directory are shown in the following screenshot:

Project recap

Files that are still missing from our working directories are the style sheets to compose our customized styles for the website, and the Bourbon library that we briefly mentioned in the preceding section to provide us with some ready-to-use mixins and functions. This is what we are going to do in this section. We are going to create style sheets and organize them in a way to make them easily maintainable in the future.

Well, let's resume the work.

Perform the following steps right to the end to properly organize the style sheets and compile them into CSS.

  1. We need to install Bourbon. Launch a terminal or the command prompt, and type the following command:
    bower install bourbon --save

    This command installs the Bourbon package through the Bower registry and registers it within the bower.json file of the project.

    Tip

    I've discussed the bower.json file exclusively in this post (https://webdesign.tutsplus.com/tutorials/quick-tip-what-to-do-when-you-encounter-a-bower-file--cms-21162), check it out!

  2. Create new style sheets named main.scss, responsive.scss, and styles.scss in the scss folder.
  3. The _main.scss style sheet is the one where we will put all our own style rules. We will use the _responsive.scss file to exclusively put in the media queries of the website. And the styles.scss file is where we will compile those style sheets together.

    Tip

    The underscore _ that began the file name is a special notation that tells the Sass compiler not to directly compile the file.

  4. Still within the scss folder, create two more style sheets. This time, name them _config.scss and foundation.scss.
  5. The _config.scss will contain a copy of all the variables used in Foundation, while foundation.scss will contain imported partials of Foundation style sheets. These copies will prevent us from directly modifying the original files, which will eventually be overridden when we update to the newest version.
  6. Next, copy the whole content of the Foundation _settings.scss file to the _config.scss file that we recently created. In our case, the _settings.scss file is located in the /components/foundation/scss/foundation/ directory.
  7. Also, copy the whole content of Foundation's own foundation.scss and paste it to our own foundation.scss that we also recently created.
  8. Then, we need to correct the path of the imported partials in our foundation.scss file. At this stage, all paths are pointing to the foundation folder, as follows:
    @import "foundation/components/grid";
@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
... /* other imports */

    This certainly is incorrect because we don't have a folder named foundation in the scss folder. Herein, we need to direct the path to the components folder instead, where the partials actually reside. So, change the path to be as follows:

    @import "../../components/foundation/scss/foundation/components/grid";
@import "../../components/foundation/scss/foundation/components/accordion";
@import "../../components/foundation/scss/foundation/components/alert-boxes";
... /* other imports */

    Tip

    A comprehensive snippet of Foundation partial references can be found in the Gist (http://git.io/ldITag).

    Note

    In Sass, we don't have to specify the .scss or .sass extension when it comes to importing external files. The Sass compiler is clever enough to determine the extension on its own. And this is also because a plain CSS is also a valid Sass.

  9. Another path that we have to correct is the path referring to the Foundation, _functions.scss, which contains the rem-calc() function. Open the _config.scss file, and change the line @import "foundation/functions"; to @import "../../components/foundation/scss/foundation/functions";.
  10. We are going to compile these style sheets into CSS using Koala. Launch Koala and add the working directory:
    Time for action – organizing and compiling style sheets
  11. Within the style list in Koala, you won't find the SCSS style sheets with the underscore prefix. Koala, by default, ignores this file since it eventually won't be compiled into CSS.
  12. However, you should find the two primary style sheets of the project listed therein, namely, styles.scss and foundation.scss. Be sure that this output is set to the css folder, as shown in the following screenshot:
    Time for action – organizing and compiling style sheets
  13. Then, make sure that the option of Auto Compile is checked so that they will be automatically compiled into CSS, as we've made changes. Also, check the Source Map option to make debugging the style sheet easier. Have a look at the following screenshot:
    Time for action – organizing and compiling style sheets
  14. Click the Compile button of styles.scss and foundation.scss to compile them into CSS.
  15. Open index.html and link both the compiled CSSs within the <head> tag, as follows:
    <link rel="stylesheet" href="assets/css/foundation.css">
<link rel="stylesheet" href="assets/css/styles.css">

We just installed Bourbon and put together several new style sheets to style the website. Then, we compiled them into CSS, and then linked them to index.html. Hence, as you can see in the following screenshot, the website is now starting to take place—with the Foundation default styles:

What just happened?
What just happened?

We just installed Bourbon and put together several new style sheets to style the website. Then, we compiled them into CSS, and then linked them to index.html. Hence, as you can see in the following screenshot, the website is now starting to take place—with the Foundation default styles:

What just happened?

With the style sheets organized and compiled, now comes the time to customize the website's styles. As it happens, we don't have to write every bit of the style rules on our own. In this case, since we are using a framework (Foundation), sometimes customizing the website styles can be as easy as changing the default value in a variable.

Without further ado, let's move on.

Styling the website will involve multiple style sheets. Hence, follow the following steps carefully:

  1. Import the following style sheets in foundation.scss:
    @import "config";
@import "../../components/foundation/scss/normalize";
@import "../../components/foundation-icons/foundation_icons_social/sass/social_foundicons.scss";
... /* other partials */

    That way, the variables, as well as the changes within _config.scss, will affect other component style sheets through Foundation. The normalize variable will standardize basic element styles, social_foundicons.scss; as you can guess, this allows us to apply Foundation's social icons.

  2. Open styles.scss and import Bourbon, _config.scss, main.scss, and responsive.scss, as follows:
    @import "../../components/bourbon/dist/bourbon";
@import "config";
@import "main";
@import "responsive";
  3. Then, I want to apply a custom font from Google Font simply because the custom fonts look better than the average font system, such as Arial or Times. Herein, I picked a font named Varela Round (https://www.google.com/fonts/specimen/Varela+Round).
  4. Open index.html, and add the font style sheet within the <head> tag, as follows:
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Varela+Round' type='text/css'>
  5. Now, we will change the font-family stack, which is currently specified as the Foundation default font, to use Varela Round.
  6. To do so, open _config.scss, uncomment the variable named $body-font-family, and insert "Varela Round", as follows:
    $body-font-family: "Varela Round", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

    Tip

    Sass commenting

    Typically, commenting will cause the code compiler or the engine to ignore the code—like a browser. However, it is also often used as an inline document, explaining what the code does.

    Every programming language has its own way to comment on code. In CSS, it will be this way:

    /* .property { content: ""' }*/

    In Sass, we can either use the CSS way, as shown previously, or add //, as follows:

    // .property { content: ""' }

    When // is added at the beginning of the line, the compiler will completely ignore the line, and thus won't compile it.

  7. We will style each of the website sections. To begin with, we will focus on the website header, and then, subsequently down to the footer. Let's start off by adding an image background. Open _main.scss and then add the following lines:
    .startup-header {
  background: url('../img/banner.jpg') no-repeat center center fixed;
  background-size: cover;
}

    Note

    CSS3 Background Size

    Background size is a special CSS3 property that controls the background stretch. The value of the cover that we used in the preceding snippets will proportionally stretch the background image to entirely cover the container. Head to the following references for further assistance on the CSS3 Background Size:

    The image, however, is currently hidden at the back of the background color that applies to the top bar and a section in which Foundation named it Panel (http://foundation.zurb.com/docs/components/panels.html), as shown in the following screenshot:

    Time for action – build on the website
  8. Remove these background colors so that we can see through the background image. To do so, open the _config.scss file and uncomment the following lines:
    $topbar-bg-color: #333;
$topbar-bg: $topbar-bg-color;

    Change the value of the $topbar-bg-color variable from #333 to transparent 

    $topbar-bg: transparent;
  9. Uncomment this following line, which specifies the panel's background color:
    $panel-bg: scale-color($white, $lightness: -5%);

    Then, change the value to transparent as well:

    $panel-bg: transparent;

    Now, we can see the background image, which is shown in the following screenshot:

    Time for action – build on the website
  10. From the preceding screenshot, it is evident that the top bar and the panel background color have been removed, but some of the menu items still have it.
  11. Let's remove these background colors. In _config.scss, uncomment the following line:
    $topbar-dropdown-bg: #333;

    And change the value to use the value of the $topbar-bg variable, as follows:

    $topbar-dropdown-bg: $topbar-bg;
  12. Save it and let a few seconds pass for the files to be compiled, and you should see now that the background color of those menu items are removed, as shown in the following screenshot:
    Time for action – build on the website
  13. Add padding-top to give more distance between the top bar and the upper boundary of the browser viewport:
    .startup-header {
...
  .startup-top-bar {
    padding-top: rem-calc(30);
  }
}

    And now, as you can see, there is more breadth therein:

    Time for action – build on the website

    The left-half of the image is before we add the padding-top, and the right-half definitely is after we add the padding-top.

  14. Give more padding at the top and bottom of the panel section; hence, we can view more of the background image. Nest the style rules under the .startup-header, as follows:
    .startup-header {
  ...
  .startup-hero {
    padding-top: rem-calc(150px);
    padding-bottom: rem-calc(150px);
  }
}
  15. Add the logo image, as follows:
    .startup-name {
  max-width: 60px;
  a {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url('../img/logo.svg') no-repeat center left;
    background-size: auto 90%;
    opacity: 0.9;
  }
}

    Now we have the logo added, as follows:

    Time for action – build on the website
  16. Hover over the menu links in the top bar, and you will find it with a dark background color, as follows:
    Time for action – build on the website

    This background color is not quite right when it comes to the website's aesthetic as a whole, so let's remove that. In _config.scss, uncomment the following lines:

    $topbar-link-bg-hover: #272727;

    Then, change the value to transparent by inheriting the value of the $topbar-bg variable, as follows:

    $topbar-link-bg-hover: $topbar-bg;
  17. Turn the menu links to uppercase so that it looks slightly bigger. Set the variable named $topbar-link-text-transform in _config.scss from none to uppercase:
    $topbar-link-text-transform: uppercase;
  18. The next thing we will do is change the styles of the two buttons: Login and Sign Up. We will make it just a little bit more fashionable, and the following are all the new styles for these buttons; nest these lines under the .startup-header:
    .startup-header {
...
.startup-top-bar {
  padding-top: rem-calc(30);
    ul {
$color: fade-out(#fff, 0.8);
$color-hover: fade-out(#fff, 0.5);
    background-color: transparent;
    .button {
@include transition (border 300ms ease-out, background-color 300ms ease-out);
    }
    .log-in {
  padding-right: 0;
      > .button {
        background-color: transparent;
        border: 2px solid $color;
        color: #fff;
        &:hover {
      background-color: transparent;
      border: 2px solid $color-hover;
      color: #fff;
        }
      }
    }
    .sign-up {
      > .button {
      background-color: $color;
      border: 2px solid transparent;
      color: #fff;
      &:hover {
        background-color: $color-hover;
        border: 2px solid transparent;
      }
    }
     }
   }
  } 
}

    Now, the buttons should look as shown in the following screenshot. Hover over the button, and you will see nice little transition effects that we added through the transition() mixin of Bourbon:

    Time for action – build on the website

    However, it's worth noticing that I consider this merely as decoration. It's up to you to customize the button styles.

  19. With buttons on a transparent background, let's make three menu link items on the left-hand side, namely, PRICES, PRICING, and BLOG, slightly transparent as well. To do so, uncomment and change the variable named $topbar-link-color in _config.scss to fade-out(#fff, 0.3), as follows:
    $topbar-link-color: fade-out(#fff, 0.3);
  20. Then, let's give the links a transition effect. Add the following lines in _main.scss:
    .startup-header {
...
  .startup-top-bar {
    ...
    a {
     @include transition(color 300ms ease-out);
      }
   }
 }
  21. Next, we will add a dark transparent layer on the header. By adding this dark layer, the text in the header can be more distinct over the background image.

    Add the following lines in _main.scss:

    .startup-header {
...
  .startup-top-bar,
  .startup-hero {
    background-color: fade-out(#000, 0.5);
  }
}
  22. Add the following lines as our last touch for the header section:
    .startup-header {
...
  .startup-hero {
    padding-top: rem-calc(150px);
    padding-bottom: rem-calc(150px);
    .hero-lead {
      color: darken(#fff, 30%);
    }
  }
...
}

    Now, we have a nice header for the website, as you can see in the following screenshot:

    Time for action – build on the website
  23. With the website styled, we will move to the next section. Below the header, we have the feature section that contains a number of key features of our products and services. And these are all the styles for the feature section:
    ...
.startup-features {
  padding: rem-calc(90 0);
  figure {
    margin: 0;
  }
  .columns {
    margin-bottom: rem-calc(15);
  }
}

    In the preceding snippet, we remove the margin from the figure element that wraps the image icon. This will give the image icons figure more room to span, as you can see in the following screenshot:

    Time for action – build on the website

    Other than that, margin-bottom, as well as the padding we added in conjunction with it, simply gives this section more whitespace.

  24. Below the feature section, we have the section that shows happy customers speaking. We call it the testimonial section. Add the following style rules to build on it:
    .startup-testimonial {
  padding: rem-calc(90 0);
  text-align: center;
  background-color: darken(#fff, 2%);
  blockquote {
    font-size: rem-calc(24);
  }
  figure {
    margin-top: 0;
    margin-bottom: 0;
    .avatar {
      border-radius: 50%;
      display: inline-block;
      width: 64px;
    }
  }
  figcaption {
    margin-top: rem-calc(20);
    color: darken(#fff, 30%);;
  }
}
  25. Also, remove the blockquote element's left-hand side border by changing the value of $blockquote-border in _config.scss, as follows:
    $blockquote-border: 0 solid #ddd;

    Note that the preceding styles are merely decoration. At this stage, this is how the testimonial section looks:

    Time for action – build on the website

    Don't freak out, it's not broken. The remaining styles will be added through the Orbit Slider plugin once it is enabled. We will take a look at the steps for this shortly.

  26. Next, we will style the price and plan tables. These are all the styles for the table price, and their main purpose is to give each table a distinct color.
    .startup-pricing {
  $basic-bg      : #85c1d0;
  $team-bg       : #9489a3;
  $enterprise-bg : #d04040;

  padding-top: rem-calc(120);
  padding-bottom: rem-calc(120);
  .pricing-table {
    background-color: darken(#fff, 2%);
  }
  .pricing-basic {
    .title {
      background-color: $basic-bg;
    }
    .price {
      background-color: lighten($basic-bg, 25%);
    }
  }
  .pricing-team {
    .title {
      background-color: $team-bg;
    }
    .price {
      background-color: lighten($team-bg, 25%);
    }
  }
  .pricing-enterprise {
  .title {
      background-color: $enterprise-bg;
    }
    .price {
      background-color: lighten($enterprise-bg, 25%);
    }
   }
}
  27. The footer section is bare and straightforward. There's nothing prominent. There is just a bunch of style rules to make the footer look nicer, as follows:
    .startup-footer {
  $footer-bg: darken(#fff, 5%);
  text-align: center;
  padding: rem-calc(60 0 30);
  background-color: $footer-bg;
  border-top: 1px solid darken($footer-bg, 15%);
  .footer-nav {
    ul {
      margin-left: 0;
    }
    li {
      display: inline-block;
      margin: rem-calc(0 10);
    }
    a {
      color: darken($footer-bg, 30%);
      @include transition (color 300ms ease-out);
      &:hover {
        color: darken($footer-bg, 70%);
      }
    }
  }
  .social-nav {
    li a:before {
      margin-right: rem-calc(5);
      position: relative;
      top: 2px;
    }
    .foundicon-facebook:hover {
      color: #3b5998;
    }
    .foundicon-twitter:hover {
      color: #55acee;
    }
  }
  .footer-copyright {
    margin-top: rem-calc(30);
    color: darken($footer-bg, 15%);
  }
}

In this section, we focused on the website's appearance. We just added styles that eventually make the website look a lot nicer from the header and down to the footer. However, a few things are not workable at this stage, such as Orbit, and we have yet to test how the website looks in the smaller viewport size. So, that is exactly what we are going to address in the next section. This is how the website should now look at this stage:

What just happened?

I realize that good, bad, nice, and not nice are highly subjective. It all depends on individual preference and their degree of taste. So, if the website decoration, such as colors, fonts, and sizes, that we specified in the preceding steps are not up your alley, you can freely change them and add your own creativity.

Q1. Hopefully, you followed the preceding steps fully through and paid attention to some of the minute details. We have imported a number of style sheets to compile them into a single style sheet. How do we make the Sass compiler ignore these imported style sheets so that the compiler won't compile them into a CSS file on its own?

  1. Remove the extension file's extension in the import declaration.
  2. Add an underscore as a prefix in the import declaration.
  3. Add an underscore as a prefix in the file name.
What just happened?

In this section, we

focused on the website's appearance. We just added styles that eventually make the website look a lot nicer from the header and down to the footer. However, a few things are not workable at this stage, such as Orbit, and we have yet to test how the website looks in the smaller viewport size. So, that is exactly what we are going to address in the next section. This is how the website should now look at this stage:

What just happened?

I realize that good, bad, nice, and not nice are highly subjective. It all depends on individual preference and their degree of taste. So, if the website decoration, such as colors, fonts, and sizes, that we specified in the preceding steps are not up your alley, you can freely change them and add your own creativity.

Q1. Hopefully, you followed the preceding steps fully through and paid attention to some of the minute details. We have imported a number of style sheets to compile them into a single style sheet. How do we make the Sass compiler ignore these imported style sheets so that the compiler won't compile them into a CSS file on its own?

  1. Remove the extension file's extension in the import declaration.
  2. Add an underscore as a prefix in the import declaration.
  3. Add an underscore as a prefix in the file name.
Have a go hero – colors and creativities

I realize that good, bad, nice, and not nice are highly subjective. It all depends on individual preference and their degree of taste. So, if the website decoration, such as colors, fonts, and sizes, that we specified in the preceding steps are not up your alley, you can freely change them and add your own creativity.

Q1. Hopefully, you followed the preceding steps fully through and paid attention to some of the minute details. We have imported a number of style sheets to compile them into a single style sheet. How do we make the Sass compiler ignore these imported style sheets so that the compiler won't compile them into a CSS file on its own?

  1. Remove the extension file's extension in the import declaration.
  2. Add an underscore as a prefix in the import declaration.
  3. Add an underscore as a prefix in the file name.
Pop quiz – importing an external Sass style sheet

Q1. Hopefully, you followed the preceding steps fully through and paid attention to some of the minute details. We have imported a number of style sheets to compile them into a single style sheet. How do we make the Sass compiler ignore these imported style sheets so that the compiler won't compile them into a CSS file on its own?

Remove the extension file's extension in the import declaration.
Add an underscore as a prefix in the import declaration.
Add an underscore as a prefix in the file name.

As mentioned, there are a couple of things we need to do before we call the website done. First, we are going to enable Orbit and the toggle function of the top bar, and optimize the website styles, such as the positioning and the sizing, for smaller viewport size. It's time for action again.

Perform the following steps to compile the JavaScript files and optimize the website for a small viewport size:

  1. Create a new JavaScript file in the assets/js directory named foundation.js.
  2. In foundation.js, import the following JavaScript files:
    // @koala-prepend "../../components/foundation/js/vendor/jquery.js"
// @koala-prepend "../../components/foundation/js/foundation/foundation.js"
// @koala-prepend "../../components/foundation/js/foundation/foundation.topbar.js"
// @koala-prepend "../../components/foundation/js/foundation/foundation.orbit.js"
  3. Via Koala, compile foundation.js.
  4. Then, open index.html and add the following lines right before </body> to enable the Orbit Slider functionalities:
    <script src="assets/js/foundation.min.js"></script>
<script>
$(document).foundation({
     orbit: {
       timer_speed: 3000,
       pause_on_hover: true,
       resume_on_mouseout: true,
       slide_number: false
     }
    });
</script>
  5. Now, we will refine the website layout for smaller viewport viewing with media queries. To do so, we need to uncomment the variables that define the media query ranges used in Foundation, so that we can use them in our style sheets as well:
    $small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

    Tip

    We can utilize these variables within our own style sheets, as follows:

    @media #{$small-up} {

    }

  6. Now, we will define a couple of style rules through these media queries to adjust the website's styles, particularly the sizing, positioning, and whitespace.
  7. And these are all the style rules to add in _responsive.scss.
    @media #{$small-up} {
  .startup-name a {
    position: relative;
    left: rem-calc(15);
  }
}
@media #{$small-only} {
  .startup-header {
    .startup-name a {
      background-size: auto 80%;
    }
    .startup-top-bar {
      padding-top: rem-calc(15);
      .top-bar-section {
        text-align: center;
      }
      .sign-up {
        padding-top: 0;
      }
    }
    .startup-hero {
      text-align: center;
    }
  }
  .startup-footer {
    .secondary-nav {
      li, a {
        display: block;
      }
      a {
        padding: rem-calc(10);
      }
    }
  }
}
@media #{$medium-up} {
  .startup-top-bar {
    .log-in {
      padding-right: 3px; 
    }
    .sign-up {
      padding-left: 3px; 
    }
  }
}
@media #{$large-only} {
    .startup-name a {
    position: relative;
    left: rem-calc(0);
  }
}

We just compiled the JavaScript to enable the Orbit Slider and the toggle function of the top bar. And we also refined the website layout for a smaller viewport size. And the following screenshot shows how the website looks in a small viewport:

What just happened?

It is nice, isn't it?

We include all the Foundation components, even ones we are not using in the website. Hence, it is better to remove all the styles which do not give an advantage to the website. Open _foundation.scss, and comment the @import components that we do not need (at least at this moment) and recompile the style sheets.

What just happened?

We just compiled the

JavaScript to enable the Orbit Slider and the toggle function of the top bar. And we also refined the website layout for a smaller viewport size. And the following screenshot shows how the website looks in a small viewport:

What just happened?

It is nice, isn't it?

We include all the Foundation components, even ones we are not using in the website. Hence, it is better to remove all the styles which do not give an advantage to the website. Open _foundation.scss, and comment the @import components that we do not need (at least at this moment) and recompile the style sheets.

Have a go hero – remove unnecessary Foundation components

We include all the Foundation components, even ones we are not using in the website. Hence, it is better to remove all the styles which do not give an advantage to the website. Open _foundation.scss, and comment the @import components that we do not need (at least at this moment) and recompile the style sheets.

We just finished working on the third project by building a responsive website for a new start-up company with Foundation. There are a lot of things we learned along the way to the end of this project, particularly about Sass. Sass is a powerful CSS preprocessor that allows us to compose styles in a more efficient and flexible form. We have learned to use variables, interpolation, mixins, and a couple of other Sass features.

Honestly speaking, the websites, including ones that we built in the previous chapters, are easy to build. Our work herein mostly involves making up the website appearance, such as the coloring and the sizing. Everything that matters most to make the website responsive, such as the Grid for example, has been covered by the frameworks we are using (Foundation, Bootstrap, and Responsive.gs).

To conclude, we hope the projects that we present In this module are a great start for you to build responsive websites on your own.

Previous Section
End of Section 9
Next Section