A look into Foundation

Foundation (http://foundation.zurb.com/) is one of the most popular frontend development frameworks. It is used by a number of notable companies, such as Pixar, Washington Post, Warby Parker (https://www.warbyparker.com/), and so on. As mentioned, Foundation ships with common web components and interactive widgets. Herein, we will look into the components, as well as the widgets we are going to employ for the website.

The grid system

The grid system is an integral part of a framework. It is one thing that makes managing web layout feel like a breeze. Foundation's grid system comprises twelve columns that can adapt to narrow viewport size through the drop-in classes provided. Similar to both the frameworks we explored in the previous chapters, the grid consists of rows and columns. Every column has to be wrapped within a row for the layout to span properly.

In Foundation, apply the row class to define an element as a row, and apply the element with the columns or column class to define it as a column. For example:

<div class="row">
<div class="columns">
</div>
<div class="columns">
</div>
</div>

You may also omit the s from columns, as follows:

<div class="row">
<div class="column">
</div>
<div class="column">
</div>
</div>

The column size is defined through the following series of classes:

small-{n}: This specifies the grid column width in the small viewport size scope (approximately 0 px – 640 px).
medium-{n}: This specifies the grid column width in the medium viewport size scope (approximately 641 px – 1,024 px).
large-{n}: This specifies the grid column width in the large viewport size scope (approximately 1,025 px – 1,440 px).
Note
The {n} variable we gave in the preceding class names represents a number that spans from 1 to 12. The sum of the column number within a row should be no more than 12.

These classes can be applied in conjunction within a single element. For example:

<div class="row">
<div class="small-6 medium-4 columns"></div>
<div class="small-6 medium-8 columns"></div>
</div>

The preceding example gives the following result in the browser:

Resize the viewport size such that it is small enough and that the columns' width shifts following the assigned classes. In this case, each column has an equal width since both of them are assigned with the small-6 class:

Note

Generally, you may resize the viewport size by dragging the browser window. If you are using Chrome, you can activate the device mode and mobile emulator (https://developer.chrome.com/devtools/docs/device-mode). Or, if you use Firefox, you can enable the responsive design view (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View), which will allow you to resize the viewport size without having to drag the Firefox window.

The buttons

The button is essential for any kind of website, and we will certainly add a button in some places in the website. Foundation uses the button class to define an element as a button. You can assign the class to the elements, such as <a> and <button>. This class applies the default button styles, as shown in the following screenshot:

Furthermore, you can include additional classes to define the button color or context. Use one of the classes—secondary, success, alert—to set the button color:

You can also specify the button size using one of the following classes: tiny, small, or large:

Make the button fancier with rounded corners using one of the classes, radius and round:

Note

There are a few more classes to form a button. Additionally, Foundation also provides multiple types of buttons, such as button groups, split buttons, and dropdown buttons. Hence, you may go to the Buttons section of the Foundation documents to find more about them.

The navigation and top bar

One of the important sections on a website is the navigation. The navigation helps users to browse the website from one page to another. Foundation, in this case, provides a couple of navigation types, and among them, one is called the top bar. Foundation's top bar will reside at the very top of the website before any content or section. The following is how the top bar will appear with the Foundation default style:

The top bar is responsive. Try resizing the browser's viewport size such that it is small enough, and you will find that the navigation is concealed within the menu, which requires us to click on MENU to reveal the full list of the menu items:

The Foundation top bar is primarily formed with the top-bar class to apply the styles, the data-topbar attribute to run the JavaScript function related to the top bar, and finally role="navigation" for better accessibility.

So, the following code is how we start to build the top bar in Foundation:

<nav class="top-bar" data-topbar role="navigation">      
  ...
</nav>

Foundation splits the top bar content into two sections. The left-hand side area is called the title area, consisting of the website name or logo. Foundation constructs this section with the list element, as follows:

<ul class="title-area">
<li class="name">
    <h1><a href="#">Hello</a></h1>
  </li>
  <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>

The second section is simply called the top bar section. Typically, this section contains the menu, buttons, and search form. Foundation sets this section using the top-bar-section class, along with the left and right class to specify the alignment. So, to put it all together, the following is the complete code to build a basic Foundation top bar, as you see in the preceding screenshots:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Hello</a></h1>
    </li>
    <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
  </ul>
<section class="top-bar-section">
    <ul class="right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </section>
</nav>

Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.

The pricing tables

Whether you are selling products or services, you should name your price.

As we will build a website for business, we will need to display pricing tables. Fortunately, Foundation has included this component at its core, hence we won't need a third-party extension. For flexibility, Foundation structures a pricing table with the list element, as follows:

<ul class="pricing-table pricing-basic">
   <li class="title">Basic</li>
   <li class="price">$10<small>/month</small></li>
   <li class="description">Perfect for personal use.</li>
   <li class="bullet-item">1GB Storage</li>
   <li class="bullet-item">1 User</li>
   <li class="bullet-item">24/7 Support</li>
<li class="cta-button">
<a class="button success round" href="#">Sign Up</a>
</li>
</ul>

Each item in the list is set with a class, which I'm sure has explained itself through the name. Given the preceding HTML structure and the default style given through the Foundation CSS, the output turns out quite nicely, as shown in the following screenshot:

Moving around Orbit

The carousel or slider is one of the most popular design patterns on the web. Despite the debate with respect to its accessibility, many people still love to have it on their website—and so do we. Herein, we want to employ Orbit (http://foundation.zurb.com/docs/components/orbit.html), the Foundation jQuery plugin to display a content slider.

Orbit is customizable in that we can fully control the output, as well as the behavior of the slide through classes, attributes, or JavaScript initiation. We can also add almost anything within the Orbit slides, including textual content, images, links, and the mix. And needless to say, we can style most of its parts.

How is Orbit constructed?

Foundation uses the list element to construct the slide container, as well as the slides, and initiates the functionality using the HTML5 data- attribute named data-orbit. The following is a basic example of the Orbit slider structure, containing two slides of images:

<ul class="example-orbit" data-orbit>
<li><img src="image.jpg" alt="" /></li>
<li class="active"><img src="image2.jpg" alt="" /></li>
</ul>

Deploying Orbit is downright easy, and technically, it can contain almost any type of content within the slide and not only images. We will look more in that regard later as we build the website.

Note

For the time being, feel free to explore the Orbit slider section (http://foundation.zurb.com/docs/components/orbit.html) in Foundation's official website, which, to my account is the best place to get into the Orbit slider.

Adding add-ons, the font Icons

Foundation also provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

viewport size through the drop-in classes provided. Similar to both the frameworks we explored in the previous chapters, the grid consists of rows and columns. Every column has to be wrapped within a row for the layout to span properly.

In Foundation, apply the row class to define an element as a row, and apply the element with the columns or column class to define it as a column. For example:

<div class="row">
<div class="columns">
</div>
<div class="columns">
</div>
</div>

You may also omit the s from columns, as follows:

<div class="row">
<div class="column">
</div>
<div class="column">
</div>
</div>

The column size is defined through the following series of classes:

small-{n}: This specifies the grid column width in the small viewport size scope (approximately 0 px – 640 px).
medium-{n}: This specifies the grid column width in the medium viewport size scope (approximately 641 px – 1,024 px).
large-{n}: This specifies the grid column width in the large viewport size scope (approximately 1,025 px – 1,440 px).
Note
The {n} variable we gave in the preceding class names represents a number that spans from 1 to 12. The sum of the column number within a row should be no more than 12.

These classes can be applied in conjunction within a single element. For example:

<div class="row">
<div class="small-6 medium-4 columns"></div>
<div class="small-6 medium-8 columns"></div>
</div>

The preceding example gives the following result in the browser:

Resize the viewport size such that it is small enough and that the columns' width shifts following the assigned classes. In this case, each column has an equal width since both of them are assigned with the small-6 class:

Note

Generally, you may resize the viewport size by dragging the browser window. If you are using Chrome, you can activate the device mode and mobile emulator (https://developer.chrome.com/devtools/docs/device-mode). Or, if you use Firefox, you can enable the responsive design view (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View), which will allow you to resize the viewport size without having to drag the Firefox window.

The buttons

The button is essential for any kind of website, and we will certainly add a button in some places in the website. Foundation uses the button class to define an element as a button. You can assign the class to the elements, such as <a> and <button>. This class applies the default button styles, as shown in the following screenshot:

Furthermore, you can include additional classes to define the button color or context. Use one of the classes—secondary, success, alert—to set the button color:

You can also specify the button size using one of the following classes: tiny, small, or large:

Make the button fancier with rounded corners using one of the classes, radius and round:

Note

There are a few more classes to form a button. Additionally, Foundation also provides multiple types of buttons, such as button groups, split buttons, and dropdown buttons. Hence, you may go to the Buttons section of the Foundation documents to find more about them.

The navigation and top bar

One of the important sections on a website is the navigation. The navigation helps users to browse the website from one page to another. Foundation, in this case, provides a couple of navigation types, and among them, one is called the top bar. Foundation's top bar will reside at the very top of the website before any content or section. The following is how the top bar will appear with the Foundation default style:

The top bar is responsive. Try resizing the browser's viewport size such that it is small enough, and you will find that the navigation is concealed within the menu, which requires us to click on MENU to reveal the full list of the menu items:

The Foundation top bar is primarily formed with the top-bar class to apply the styles, the data-topbar attribute to run the JavaScript function related to the top bar, and finally role="navigation" for better accessibility.

So, the following code is how we start to build the top bar in Foundation:

<nav class="top-bar" data-topbar role="navigation">      
  ...
</nav>

Foundation splits the top bar content into two sections. The left-hand side area is called the title area, consisting of the website name or logo. Foundation constructs this section with the list element, as follows:

<ul class="title-area">
<li class="name">
    <h1><a href="#">Hello</a></h1>
  </li>
  <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>

The second section is simply called the top bar section. Typically, this section contains the menu, buttons, and search form. Foundation sets this section using the top-bar-section class, along with the left and right class to specify the alignment. So, to put it all together, the following is the complete code to build a basic Foundation top bar, as you see in the preceding screenshots:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Hello</a></h1>
    </li>
    <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
  </ul>
<section class="top-bar-section">
    <ul class="right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </section>
</nav>

Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.

The pricing tables

Whether you are selling products or services, you should name your price.

As we will build a website for business, we will need to display pricing tables. Fortunately, Foundation has included this component at its core, hence we won't need a third-party extension. For flexibility, Foundation structures a pricing table with the list element, as follows:

<ul class="pricing-table pricing-basic">
   <li class="title">Basic</li>
   <li class="price">$10<small>/month</small></li>
   <li class="description">Perfect for personal use.</li>
   <li class="bullet-item">1GB Storage</li>
   <li class="bullet-item">1 User</li>
   <li class="bullet-item">24/7 Support</li>
<li class="cta-button">
<a class="button success round" href="#">Sign Up</a>
</li>
</ul>

Each item in the list is set with a class, which I'm sure has explained itself through the name. Given the preceding HTML structure and the default style given through the Foundation CSS, the output turns out quite nicely, as shown in the following screenshot:

Moving around Orbit

The carousel or slider is one of the most popular design patterns on the web. Despite the debate with respect to its accessibility, many people still love to have it on their website—and so do we. Herein, we want to employ Orbit (http://foundation.zurb.com/docs/components/orbit.html), the Foundation jQuery plugin to display a content slider.

Orbit is customizable in that we can fully control the output, as well as the behavior of the slide through classes, attributes, or JavaScript initiation. We can also add almost anything within the Orbit slides, including textual content, images, links, and the mix. And needless to say, we can style most of its parts.

How is Orbit constructed?

Foundation uses the list element to construct the slide container, as well as the slides, and initiates the functionality using the HTML5 data- attribute named data-orbit. The following is a basic example of the Orbit slider structure, containing two slides of images:

<ul class="example-orbit" data-orbit>
<li><img src="image.jpg" alt="" /></li>
<li class="active"><img src="image2.jpg" alt="" /></li>
</ul>

Deploying Orbit is downright easy, and technically, it can contain almost any type of content within the slide and not only images. We will look more in that regard later as we build the website.

Note

For the time being, feel free to explore the Orbit slider section (http://foundation.zurb.com/docs/components/orbit.html) in Foundation's official website, which, to my account is the best place to get into the Orbit slider.

Adding add-ons, the font Icons

Foundation also provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

essential for any kind of website, and we will certainly add a button in some places in the website. Foundation uses the button class to define an element as a button. You can assign the class to the elements, such as <a> and <button>. This class applies the default button styles, as shown in the following screenshot:

Furthermore, you can include additional classes to define the button color or context. Use one of the classes—secondary, success, alert—to set the button color:

You can also specify the button size using one of the following classes: tiny, small, or large:

Make the button fancier with rounded corners using one of the classes, radius and round:

Note

There are a few more classes to form a button. Additionally, Foundation also provides multiple types of buttons, such as button groups, split buttons, and dropdown buttons. Hence, you may go to the Buttons section of the Foundation documents to find more about them.

The navigation and top bar

One of the important sections on a website is the navigation. The navigation helps users to browse the website from one page to another. Foundation, in this case, provides a couple of navigation types, and among them, one is called the top bar. Foundation's top bar will reside at the very top of the website before any content or section. The following is how the top bar will appear with the Foundation default style:

The top bar is responsive. Try resizing the browser's viewport size such that it is small enough, and you will find that the navigation is concealed within the menu, which requires us to click on MENU to reveal the full list of the menu items:

The Foundation top bar is primarily formed with the top-bar class to apply the styles, the data-topbar attribute to run the JavaScript function related to the top bar, and finally role="navigation" for better accessibility.

So, the following code is how we start to build the top bar in Foundation:

<nav class="top-bar" data-topbar role="navigation">      
  ...
</nav>

Foundation splits the top bar content into two sections. The left-hand side area is called the title area, consisting of the website name or logo. Foundation constructs this section with the list element, as follows:

<ul class="title-area">
<li class="name">
    <h1><a href="#">Hello</a></h1>
  </li>
  <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>

The second section is simply called the top bar section. Typically, this section contains the menu, buttons, and search form. Foundation sets this section using the top-bar-section class, along with the left and right class to specify the alignment. So, to put it all together, the following is the complete code to build a basic Foundation top bar, as you see in the preceding screenshots:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Hello</a></h1>
    </li>
    <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
  </ul>
<section class="top-bar-section">
    <ul class="right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </section>
</nav>

Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.

The pricing tables

Whether you are selling products or services, you should name your price.

As we will build a website for business, we will need to display pricing tables. Fortunately, Foundation has included this component at its core, hence we won't need a third-party extension. For flexibility, Foundation structures a pricing table with the list element, as follows:

<ul class="pricing-table pricing-basic">
   <li class="title">Basic</li>
   <li class="price">$10<small>/month</small></li>
   <li class="description">Perfect for personal use.</li>
   <li class="bullet-item">1GB Storage</li>
   <li class="bullet-item">1 User</li>
   <li class="bullet-item">24/7 Support</li>
<li class="cta-button">
<a class="button success round" href="#">Sign Up</a>
</li>
</ul>

Each item in the list is set with a class, which I'm sure has explained itself through the name. Given the preceding HTML structure and the default style given through the Foundation CSS, the output turns out quite nicely, as shown in the following screenshot:

Moving around Orbit

The carousel or slider is one of the most popular design patterns on the web. Despite the debate with respect to its accessibility, many people still love to have it on their website—and so do we. Herein, we want to employ Orbit (http://foundation.zurb.com/docs/components/orbit.html), the Foundation jQuery plugin to display a content slider.

Orbit is customizable in that we can fully control the output, as well as the behavior of the slide through classes, attributes, or JavaScript initiation. We can also add almost anything within the Orbit slides, including textual content, images, links, and the mix. And needless to say, we can style most of its parts.

How is Orbit constructed?

Foundation uses the list element to construct the slide container, as well as the slides, and initiates the functionality using the HTML5 data- attribute named data-orbit. The following is a basic example of the Orbit slider structure, containing two slides of images:

<ul class="example-orbit" data-orbit>
<li><img src="image.jpg" alt="" /></li>
<li class="active"><img src="image2.jpg" alt="" /></li>
</ul>

Deploying Orbit is downright easy, and technically, it can contain almost any type of content within the slide and not only images. We will look more in that regard later as we build the website.

Note

For the time being, feel free to explore the Orbit slider section (http://foundation.zurb.com/docs/components/orbit.html) in Foundation's official website, which, to my account is the best place to get into the Orbit slider.

Adding add-ons, the font Icons

Foundation also provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

sections on a website is the navigation. The navigation helps users to browse the website from one page to another. Foundation, in this case, provides a couple of navigation types, and among them, one is called the top bar. Foundation's top bar will reside at the very top of the website before any content or section. The following is how the top bar will appear with the Foundation default style:

The top bar is responsive. Try resizing the browser's viewport size such that it is small enough, and you will find that the navigation is concealed within the menu, which requires us to click on MENU to reveal the full list of the menu items:

The Foundation top bar is primarily formed with the top-bar class to apply the styles, the data-topbar attribute to run the JavaScript function related to the top bar, and finally role="navigation" for better accessibility.

So, the following code is how we start to build the top bar in Foundation:

<nav class="top-bar" data-topbar role="navigation">      
  ...
</nav>

Foundation splits the top bar content into two sections. The left-hand side area is called the title area, consisting of the website name or logo. Foundation constructs this section with the list element, as follows:

<ul class="title-area">
<li class="name">
    <h1><a href="#">Hello</a></h1>
  </li>
  <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>

The second section is simply called the top bar section. Typically, this section contains the menu, buttons, and search form. Foundation sets this section using the top-bar-section class, along with the left and right class to specify the alignment. So, to put it all together, the following is the complete code to build a basic Foundation top bar, as you see in the preceding screenshots:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Hello</a></h1>
    </li>
    <li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
  </ul>
<section class="top-bar-section">
    <ul class="right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </section>
</nav>

Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.

The pricing tables

Whether you are selling products or services, you should name your price.

As we will build a website for business, we will need to display pricing tables. Fortunately, Foundation has included this component at its core, hence we won't need a third-party extension. For flexibility, Foundation structures a pricing table with the list element, as follows:

<ul class="pricing-table pricing-basic">
   <li class="title">Basic</li>
   <li class="price">$10<small>/month</small></li>
   <li class="description">Perfect for personal use.</li>
   <li class="bullet-item">1GB Storage</li>
   <li class="bullet-item">1 User</li>
   <li class="bullet-item">24/7 Support</li>
<li class="cta-button">
<a class="button success round" href="#">Sign Up</a>
</li>
</ul>

Each item in the list is set with a class, which I'm sure has explained itself through the name. Given the preceding HTML structure and the default style given through the Foundation CSS, the output turns out quite nicely, as shown in the following screenshot:

Moving around Orbit

The carousel or slider is one of the most popular design patterns on the web. Despite the debate with respect to its accessibility, many people still love to have it on their website—and so do we. Herein, we want to employ Orbit (http://foundation.zurb.com/docs/components/orbit.html), the Foundation jQuery plugin to display a content slider.

Orbit is customizable in that we can fully control the output, as well as the behavior of the slide through classes, attributes, or JavaScript initiation. We can also add almost anything within the Orbit slides, including textual content, images, links, and the mix. And needless to say, we can style most of its parts.

How is Orbit constructed?

Foundation uses the list element to construct the slide container, as well as the slides, and initiates the functionality using the HTML5 data- attribute named data-orbit. The following is a basic example of the Orbit slider structure, containing two slides of images:

<ul class="example-orbit" data-orbit>
<li><img src="image.jpg" alt="" /></li>
<li class="active"><img src="image2.jpg" alt="" /></li>
</ul>

Deploying Orbit is downright easy, and technically, it can contain almost any type of content within the slide and not only images. We will look more in that regard later as we build the website.

Note

For the time being, feel free to explore the Orbit slider section (http://foundation.zurb.com/docs/components/orbit.html) in Foundation's official website, which, to my account is the best place to get into the Orbit slider.

Adding add-ons, the font Icons

Foundation also provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

has included this component at its core, hence we won't need a third-party extension. For flexibility, Foundation structures a pricing table with the list element, as follows:

<ul class="pricing-table pricing-basic">
   <li class="title">Basic</li>
   <li class="price">$10<small>/month</small></li>
   <li class="description">Perfect for personal use.</li>
   <li class="bullet-item">1GB Storage</li>
   <li class="bullet-item">1 User</li>
   <li class="bullet-item">24/7 Support</li>
<li class="cta-button">
<a class="button success round" href="#">Sign Up</a>
</li>
</ul>

Each item in the list is set with a class, which I'm sure has explained itself through the name. Given the preceding HTML structure and the default style given through the Foundation CSS, the output turns out quite nicely, as shown in the following screenshot:

Moving around Orbit

The carousel or slider is one of the most popular design patterns on the web. Despite the debate with respect to its accessibility, many people still love to have it on their website—and so do we. Herein, we want to employ Orbit (http://foundation.zurb.com/docs/components/orbit.html), the Foundation jQuery plugin to display a content slider.

Orbit is customizable in that we can fully control the output, as well as the behavior of the slide through classes, attributes, or JavaScript initiation. We can also add almost anything within the Orbit slides, including textual content, images, links, and the mix. And needless to say, we can style most of its parts.

How is Orbit constructed?

Foundation uses the list element to construct the slide container, as well as the slides, and initiates the functionality using the HTML5 data- attribute named data-orbit. The following is a basic example of the Orbit slider structure, containing two slides of images:

<ul class="example-orbit" data-orbit>
<li><img src="image.jpg" alt="" /></li>
<li class="active"><img src="image2.jpg" alt="" /></li>
</ul>

Deploying Orbit is downright easy, and technically, it can contain almost any type of content within the slide and not only images. We will look more in that regard later as we build the website.

Note

For the time being, feel free to explore the Orbit slider section (http://foundation.zurb.com/docs/components/orbit.html) in Foundation's official website, which, to my account is the best place to get into the Orbit slider.

Adding add-ons, the font Icons

Foundation also provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

slider is one of the most popular design patterns on the web. Despite the debate with respect to its accessibility, many people still love to have it on their website—and so do we. Herein, we want to employ Orbit (http://foundation.zurb.com/docs/components/orbit.html), the Foundation jQuery plugin to display a content slider.

Orbit is customizable in that we can fully control the output, as well as the behavior of the slide through classes, attributes, or JavaScript initiation. We can also add almost anything within the Orbit slides, including textual content, images, links, and the mix. And needless to say, we can style most of its parts.

How is Orbit constructed?

Foundation uses the list element to construct the slide container, as well as the slides, and initiates the functionality using the HTML5 data- attribute named data-orbit. The following is a basic example of the Orbit slider structure, containing two slides of images:

<ul class="example-orbit" data-orbit>
<li><img src="image.jpg" alt="" /></li>
<li class="active"><img src="image2.jpg" alt="" /></li>
</ul>

Deploying Orbit is downright easy, and technically, it can contain almost any type of content within the slide and not only images. We will look more in that regard later as we build the website.

Note

For the time being, feel free to explore the Orbit slider section (http://foundation.zurb.com/docs/components/orbit.html) in Foundation's official website, which, to my account is the best place to get into the Orbit slider.

Adding add-ons, the font Icons

Foundation also provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

using the HTML5 data- attribute named data-orbit. The following is a basic example of the Orbit slider structure, containing two slides of images:

<ul class="example-orbit" data-orbit>
<li><img src="image.jpg" alt="" /></li>
<li class="active"><img src="image2.jpg" alt="" /></li>
</ul>

Deploying Orbit is downright easy, and technically, it can contain almost any type of content within the slide and not only images. We will look more in that regard later as we build the website.

Note

For the time being, feel free to explore the Orbit slider section (http://foundation.zurb.com/docs/components/orbit.html) in Foundation's official website, which, to my account is the best place to get into the Orbit slider.

Adding add-ons, the font Icons

Foundation also provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

provides a handful of add-ons, one of which is Webicons (http://zurb.com/playground/social-webicons). Needless to say, we will need social icons, and since these icons are basically vectors, they are infinitely scalable and thus will remain crisp and sharp in any screen resolution–—normal or high definition. Have a look at the following icon set:

A few of the glyphs in the icon set

Aside from this icon set, you can also find the following:

A collection of starter templates (http://foundation.zurb.com/templates.html) that will be useful to kick-off a new website and webpage
Responsive tables (http://foundation.zurb.com/responsive-tables.html)
Stencils (http://foundation.zurb.com/stencils.html), which you will find useful for sketching and prototyping new websites

Further on Foundation

Detailing every corner and aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

aspect of Foundation is beyond the scope of this module. These are, by far, the most essential components of the framework that we are going to employ in the project and the website.

Fortunately, Packt Publishing has published a couple of titles that exclusively cover Foundation. I suggest you have a look at one of the following books if you are keen on further exploring the framework:

Learning Zurb Foundation, Kevin Horek, Packt Publishing (https://www.packtpub.com/web-development/learning-zurb-foundation)
ZURB Foundation Blueprints, James Michael Stone, Packt Publishing (https://www.packtpub.com/web-development/zurb-foundation-blueprints)

Additional required assets

There are several files that we will need in addition to Foundation's own components. These files encompass the image cover for the website header, the icons that will represent the feature in the website feature list section, the favicon image as well as the Apple icons, the avatar image to display in the testimonial section, and finally (which is also important) the website logo.

In terms of the header image, we will use the following image photographed by Alejandro Escamilla, which shows a man working with his Macbook Air; the screen seems off though (http://unsplash.com/post/51493972685/download-by-alejandro-escamilla):

The icons to display alongside the feature list items are designed by Nick Frost from Ballicons (http://ballicons.net/). Among the icons in the collection that we will include in the website are the following:

The following are the favicon and the Apple icon, which are generated using a Photoshop action called AppIconTemplate (http://appicontemplate.com/):

Favicon and the Apple icon

We will use the mystery man of WordPress as the default avatar. This avatar image will be displayed above the testimonial lines, as shown in the following wireframe:

The mystery man

The logo of this website is made with SVG for the sake of clarity and scalability. The logo is shown in the following screenshot:

You can get all these assets from the source files that come along with this module. Otherwise, grab them from the URL that we showed in the preceding paragraphs.

The project directories, assets, and dependencies

Once we assess the website layout, the framework features, and all the assets required, we will start working on the project. Herein, we will start getting the project directories and the assets organized. Also, we will grab and record all the project dependencies through Bower, the second project with Bootstrap. So, it's time for action.

Time for action – organizing the project directories, assets, and dependencies

In the htdocs folder, create a new folder, and name it startup. This is the folder in which the website will live.
Within the startup folder, create a folder named assets to contain all the assets like the style sheets, JavaScripts, images, and others.
Inside the assets folder
create folders to group these assets:
- css for the style sheets.
- js to contain the JavaScripts.
- scss to contain SCSS style sheet (more about SCSS in the next chapter).
- img to contain the images.
- fonts to contain the font icons.
Add the images, including the website logo, header image, icons, and the avatar image, as shown in the following screenshot:
Now, we will download the project dependencies, which will include the Foundation framework, the icons, jQuery, and a couple of other libraries. Hence, let's open a terminal or command prompt if you are using Windows. Then, navigate to the project
directory with the cd command:
- In Windows: cd \xampp\htdocs\startup
- In OSX: cd /Applications/XAMPP/htdocs/startup
- In Ubuntu: cd /opt/lampp/htdocs/startup
As we did in the second project, type the command, fill out the prompts to set the project specification, including the project name and the project version, as shown in the following screenshot:
When all the prompts are filled and completed, Bower will generate a new file named bower.json to put all the information in.
Before we install the
project dependencies, we will set the dependencies folder destination. To do so, create a dot file named .bowerrc. Save the file with the following lines in it:
```
{
  "directory": "components"
}
```
This line will tell Bower to name the folder components instead of bower_components. And once the configuration is set, we are ready to install the libraries, starting with installing the Foundation package.
To install the Foundation package through Bower, type bower install foundation ––save. Make sure that the --save parameter is included to record Foundation within the bower.json file.
Note
Apart from the Foundation primary package (files like the style sheet and JavaScript), this command will also grab libraries that are associated with Foundation, namely:
Fastclick (https://github.com/ftlabs/fastclick)
jQuery (http://jquery.com/)
jQuery Cookie (https://github.com/carhartl/jquery-cookie)
jQuery Placeholder (https://github.com/mathiasbynens/jquery-placeholder)
Modernizr (http://modernizr.com/)
The Foundation font icon is set in a separate repository. To install it, type the bower install foundation-icons --save command.
The Foundation icon package comes with the style sheet that specifies and presents the icon through HTML classes and also the icon files. Herein, we need to make a copy of the font from the package folder into our own fonts folder. Have a look at the following screenshot:

What just happened?

We just created the project directory, as well as folders to organize the project assets. In addition, we also installed the libraries that are required to build the website through Bower, which include the Foundation framework.

Having added in the images and the libraries, we will build the website's home page markup in the next section. So, without further ado, let's move on, and it's time for action again.

Time for action – building the website's HTML structure

Create a new HTML file named index.html. Then, open it in Sublime Text, our code editor of choice In this module.

Let's add the basic HTML5 structure as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Startup</title>
</head>
<body>
  
</body>
</html>

Add the meta X-UA-Compatible variable with the content value IE=edge to allow Internet Explorer to use its latest cutting-edge rendering version:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
Not to forget the meta viewport tag required to make the website responsive; add it in <head> as follows:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```

Add the favicon, as well as the Apple icon, below the meta viewport tag, as follows:

<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">

Add the meta description for the search engine result purposes:

<meta name="description" content="A startup company website built using Foundation">

The HTML markup for the content will follow the Foundation guidelines, as we have discussed in the early sections of this module. In addition, we may add extra classes in the elements to customize the styles. Let's start off by adding the website <header>, for which, add the following lines within <body>:
```
<header class="startup-header">
...
</header>
```

Next, add the website navigation bar within the header, as follows:

<header class="startup-header">
<div class="contain-to-grid startup-top-bar">
<nav class="top-bar" data-topbar>
     <ul class="title-area">
           <li class="name startup-name">
                 <h1><a href="#">Startup</a></h1>
               </li>
<li class="toggle-topbar menu-icon">
                 <a href="#"><span>Menu</span></a>
</li>
</ul>
         <section class="top-bar-section">
           <ul class="right">
                 <li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
<li class="has-form log-in"><a href="" class="button secondary round">Log In</a></li>
<li class="has-form sign-up"><a href="#" class="button round">Sign Up</a></li>
               </ul>
</section>
</nav>
</div>
</header>

Below the navigation bar HTML markup, we add the catchphrase and call-to-action button, as follows:

<header class="startup-header"> 
  ...
<div class="panel startup-hero">
       <div class="row">
<h2 class="hero-title">Stay Cool and be Awesome</h2>
<p class="hero-lead">The most awesome web application in the galaxy.</p>
</div>
       <div class="row">
<a href="#" class="button success round">Signup</a>
       </div>
</div>
</header>

Next, we will add the website's body content that will contain the product feature list section, the testimonial section, and the plan table price. First, add a <div> that will wrap the body content sections below the header, as follows:
```
<div class="startup-body">
  ...
</div>
```

Within <div>, we add the HTML markup for the feature list section, as follows:

<div class="startup-body">
<div class="startup-features">
<div class="row">
     <div class="medium-6 columns">
           <div class="row">
               <div class="small-3 medium-4 columns">
               <figure>
<img src="assets/img/analytics.png" height="128" width="128" alt="">
               </figure>
</div>
         <div class="small-9 medium-8 columns">
           <h4>Easy</h4>
<p>This web application is super easy to use. No complicated setup. It just works out of the box.</p>
 </div>
          </div>
          </div>
          <div class="medium-6 columns">
            <div class="row">
<div class="small-3 medium-4 columns">
                     <figure>
                    <img src="assets/img/clock.png" height="128" width="128" alt="">
                    </figure>
                        </div>
                        <div class="small-9 medium-8 columns">
                            <h4>Fast</h4>
                            <p>This web application runs in a blink of eye. There is no other application that is on par with our application in term of speed.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="medium-6 columns">
                    <div class="row">
<div class="small-3 medium-4 columns">
                         <figure>
<img src="assets/img/target.png" height="128" width="128" alt="">
</figure>
                        </div>
<div class="small-9 medium-8 columns">
    <h4>Secure</h4>
<p>Your data is encyrpted with the latest Kryptonian technology. It will never be shared to anyone. Rest assured, your data is totally safe.</p>
                        </div>
                    </div>
                </div>
                <div class="medium-6 columns">
                    <div class="row">
                        <div class="small-3 medium-4 columns">
                            <figure>
                                <img src="assets/img/bubbles.png" height="128" width="128" alt="">
                            </figure>
                        </div>
                        <div class="small-9 medium-8 columns">
                            <h4>Awesome</h4>
                            <p>It's simply the most awesome web application and make you the coolest person in the galaxy. Enough said.</p>
                        </div>
</div>
            </div>
       </div>
</div>
</div>

The column division for this section refers to the layout shown in the website wireframe. So, as you can see from the preceding code that we just added, each feature list item is assigned with medium-6 columns, hence the column width of each item will be equal.

Below the feature list section, we add the testimonial section's HTML markup, as follows:

<div class="startup-body">
...
<div class="startup-testimonial">
            <div class="row">
                <ul class="testimonial-list" data-orbit>
                    <li data-orbit-slide="testimonial-1">
                        <div>
                            <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor numquam quaerat doloremque in quis dolore enim modi cumque eligendi eius.</blockquote>
                            <figure>
                                <img class="avatar" src="assets/img/mystery.png" height="128" width="128" alt="">
                                <figcaption>John Doe</figcaption>
                            </figure>
                        </div>
                    </li>
                    <li data-orbit-slide="testimonial-2">
                        <div>
                            <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
                            <figure>
                                <img class="avatar" src="assets/img/mystery.png" height="128" width="128" alt="">
                                <figcaption>Jane Doe</figcaption>
                            </figure>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
</div>

Referring to the layout in the wireframe, we should add the plan price table below the testimonial section, as follows:

<div class="startup-body">
<!-- ... feature list section … -->
<!-- ... testimonial section … --> 
<div class="startup-pricing">
            <div class="row">
                <div class="medium-4 columns">
                    <ul class="pricing-table pricing-basic">
                        <li class="title">Basic</li>
                        <li class="price">$10<small>/month</small></li>
                        <li class="description">Perfect for personal use.</li>
                        <li class="bullet-item">1GB Storage</li>
                        <li class="bullet-item">1 User</li>
                        <li class="bullet-item">24/7 Support</li>
                        <li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
                    </ul>
                </div>
                <div class="medium-4 columns">
                    <ul class="pricing-table pricing-team">
                        <li class="title">Team</li>
                        <li class="price">$50<small>/month</small></li>
                        <li class="description">For a small team.</li>
                        <li class="bullet-item">50GB Storage</li>
                        <li class="bullet-item">Up to 10 Users</li>
                        <li class="bullet-item">24/7 Support</li>
                        <li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
                    </ul>
                </div>
                <div class="medium-4 columns">
                    <ul class="pricing-table pricing-enterprise">
                        <li class="title">Enterprise</li>
                        <li class="price">$300<small>/month</small></li>
                        <li class="description">For large corporation</li>
                        <li class="bullet-item">Unlimited Storage</li>
                        <li class="bullet-item">Unlimited Users</li>
                        <li class="bullet-item">24/7 Priority Support</li>
                        <li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
                    </ul>
                </div>
            </div>
        </div>
</div>

Finally, we add the website footer below the body content, as follows:

</div> <!—the body content end --> 
<footer class="startup-footer">
        <div class="row footer-nav">
            <ul class="secondary-nav">
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Privacy</a></li>
            </ul>
            <ul class="social-nav">
                <li><a class="foundicon-facebook" href="#">Facebook</a></li>
                <li><a class="foundicon-twitter" href="#">Twitter</a></li>
            </ul>
        </div>
        <div class="row footer-copyright">
            <p>Copyright 2014 Super Awesome App. All rights reserved.</p>
        </div>
    </footer>
</body>

What just happened?

We just built the HTML markup for the website content and sections by following the Foundation guidelines. We also added extra classes along the way to customize the Foundation default styles later on.

Since building the HTML markup, we haven't added any of the styles; the website, at this point, looks white and plain, as shown in the following screenshot:

Tip

The full code of the HTML that we have just added can also be found at http://git.io/qvdupQ.

styles later on.

Since building the HTML markup, we haven't added any of the styles; the website, at this point, looks white and plain, as shown in the following screenshot:

Tip

The full code of the HTML that we have just added can also be found at http://git.io/qvdupQ.

Summary

This chapter effectively started off our third project. In this project, we use Foundation to build a website for a start-up company. We walked through the Foundation features and adopted some of them into the website. We only added the website's HTML structure in this chapter though. The website, at this point, still looks plain and white. We have to compose the styles to define what the website looks and feels like, which is exactly what we will do in the next chapter.

We will compose the website styles using Sass, the CSS preprocessor that also defined the Foundation basic styles. Hence, at the beginning of the next chapter, first, we will learn to use Sass variable, mixins, functions, and other Sass features before we write the website styles.

It looks like there is still a lot of work left to do in order to accomplish this project. So, without further ado, let's move on to the next chapter.

You're reading from HTML5 and CSS3: Building Responsive Websites One-stop guide for Responsive Web Design

Table of Contents (6) Chapters

Chapter 7. A Responsive Website for Business with Foundation

Examining the website layout

Note

A look into Foundation

The grid system

Note

Note

The buttons

Note

The navigation and top bar

The pricing tables

Moving around Orbit

How is Orbit constructed?

Note

Adding add-ons, the font Icons

Further on Foundation

Note

Note

The buttons

Note

The navigation and top bar

The pricing tables

Moving around Orbit

How is Orbit constructed?

Note

Adding add-ons, the font Icons

Further on Foundation

Note

The navigation and top bar

The pricing tables

Moving around Orbit

How is Orbit constructed?

Note

Adding add-ons, the font Icons

Further on Foundation

The pricing tables

Moving around Orbit

How is Orbit constructed?

Note

Adding add-ons, the font Icons

Further on Foundation

Moving around Orbit

How is Orbit constructed?

Note

Adding add-ons, the font Icons

Further on Foundation

How is Orbit constructed?

Note

Adding add-ons, the font Icons

Further on Foundation

Note

Further on Foundation

Additional required assets

The project directories, assets, and dependencies

Time for action – organizing the project directories, assets, and dependencies

Note

What just happened?

Time for action – building the website's HTML structure

What just happened?

Tip

Tip

Summary

Unlock this book and the full library FREE for 7 days

Authors (3)

Personalised recommendations for you