To build the website, we will adopt a new framework called Foundation. Foundation is built by ZURB, a web-development agency based in California. It's a meticulously crafted framework with a stack of interactive widgets. On the technical side, Foundation styles are built on top of Sass and SCSS. Hence, we will also walk through the subject during the course of working on the project.
So, without further ado, let's get the project started.
First and foremost, unlike the previous two projects we did, we are going to examine the website layout in wireframe before going any further in the chapter. After examining it, we will discover the Foundation components that are required for the website, along with the components and assets that may not be available in the Foundation package. The following is the website layout in the normal desktop screen size:
The preceding wireframe shows that the website will have five sections. The first section, plainly, is the header. The header section will contain the website logo, menu navigation, a few lines of catchphrases, and a button—many call it a call-to-action button.
- Call to Action Buttons: Examples and Best Practices (http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/).
- "Call To Action" Buttons: Guidelines, Best Practices And Examples (http://www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/).
- How To Design Call to Action Buttons That Convert (http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/).
Normally, people need to get as much information as they can about the advantages and disadvantages before deciding to buy. So, under the header, we will display the list of items of the product or the key features offered.
In addition to the features list, we will also display customer testimonials within a slider. According to www.entrepreneur.com (http://www.entrepreneur.com/article/83752), displaying customer testimonials is one of the effective ways to drive more customers or sales, which is eventually good for business.
Below the testimonial section, the website will display the plan and price tables. And the last section will be the footer, containing secondary website navigation and links to Facebook and Twitter.
Let's now see how the website's layout will be in a smaller viewport size, which is as follows:
Much like the websites we built in the previous projects, all the content will be stacked. The catchphrases and the call-to-action button are aligned to the center. The menu in the navigation is now depicted as the hamburger icon. Next, we will see what Foundation has to offer in its package to build the website.
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 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.
You may also omit the s from columns, as follows:
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).
These classes can be applied in conjunction within a single element. For example:
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 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:
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 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:
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:
Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.
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:
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.
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:
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.
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:
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
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.
You may also omit the s from columns, as follows:
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).
These classes can be applied in conjunction within a single element. For example:
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 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:
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 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:
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:
Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.
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:
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.
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:
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.
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:
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
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:
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 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:
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:
Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.
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:
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.
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:
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.
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:
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
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 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:
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:
Certainly, you will have to link the Foundation CSS style sheet beforehand in the document to see the top bar look.
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:
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.
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:
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.
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:
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
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:
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.
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:
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.
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:
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
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.
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:
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.
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:
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
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)
list element to construct the slide container, as well as the slides, and initiates the functionality
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.
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:
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
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:
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
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)
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)
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:
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.
- In the
htdocsfolder, create a new folder, and name itstartup. This is the folder in which the website will live. - Within the
startupfolder, create a folder namedassetsto contain all the assets like the style sheets, JavaScripts, images, and others. - Inside the
assetsfolder create folders to group these assets:cssfor the style sheets.jsto contain the JavaScripts.scssto contain SCSS style sheet (more about SCSS in the next chapter).imgto contain the images.fontsto 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
cdcommand:- In Windows:
cd \xampp\htdocs\startup - In OSX:
cd /Applications/XAMPP/htdocs/startup - In Ubuntu:
cd /opt/lampp/htdocs/startup
- In Windows:
- 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.jsonto 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--saveparameter is included to record Foundation within thebower.json file.Note
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 --savecommand. - 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
fontsfolder. Have a look at the following screenshot:
- 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-Compatiblevariable with the content valueIE=edgeto 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
viewporttag 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-6columns, 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>
