Book Image

Responsive Web Design by Example : Beginner's Guide

By : Thoriq Firdaus
Book Image

Responsive Web Design by Example : Beginner's Guide

By: Thoriq Firdaus

Overview of this book

<p>Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. You can now create your very own responsive website quickly and efficiently, allowing you to showcase your content in a format that will work on any device with an Internet browser.<br /><br />By following our detailed step-by-step instructions in this structured reference guide, you will learn how you can build engaging responsive websites. With coverage of Bootstrap, Skeleton, and Zurb Foundation you'll learn about three of the most powerful responsive frameworks available today.<br /><br />Leading you through by practical example, you'll find that this essential reference develops your understanding by actually helping you create beautiful websites step by step in front of your very eyes. After going over the basics, you'll be able to choose between creating your own responsive portfolio page with Skeleton, building a stunning product page with Bootstrap, or setting up your own professional business website with Zurb Foundation. Ultimately you'll learn how to decide which framework is right for you, and how you can deploy and customize it to your exact specifications!</p>
Table of Contents (14 chapters)
Responsive Web Design by Example Beginner's Guide
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – finalizing the website


We will do a few style improvements to the website.

  1. First we will put all the elements under the footer to the center:

    @media only screen and (max-width: 48em) {
      .footer {
        text-align: center;
        .footnav, .social {
          margin-bottom: 20px;
          ul {
            float: none;
          }
          li {
            display: inline-block;
            float: none;
            margin: {
              left: 10px;
              right: 10px;
            }
          }
        }
      }
    }
  2. Then, we will remove unnecessary styles from Foundation. So, let's open base.scss and comment out the following @import rule:

    // @import "foundation";
  3. Uncomment the following @import rules:

    @import "foundation/foundation-global";
    @import "foundation/components/grid";
    @import "foundation/components/visibility";
    @import "foundation/components/type";
    @import "foundation/components/buttons";
    @import "foundation/components/forms";
    @import "foundation/components/top-bar";
    @import "foundation/components/orbit";
    @import "foundation...