Responsive Web Design by Example


Responsive Web Design by Example
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.95
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$67.94
save 6%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Rapidly develop and prototype responsive websites by utilizing powerful open source frameworks
  • Focus less on the theory and more on results, with clear step-by-step instructions, previews, and examples to help you along the way
  • Learn how you can utilize three of the most powerful responsive frameworks available today: Bootstrap, Skeleton, and Zurb Foundation

Book Details

Language : English
Paperback : 338 pages [ 235mm x 191mm ]
Release Date : March 2013
ISBN : 1849695423
ISBN 13 : 9781849695428
Author(s) : Thoriq Firdaus
Topics and Technologies : All Books, Web Development, Beginner's Guides, Web Development

Table of Contents

Preface
Chapter 1: Responsive Web Design
Chapter 2: Constructing a Responsive Portfolio Page with Skeleton
Chapter 3: Enhancing the Portfolio Website with CSS3
Chapter 4: Developing a Product Launch Site with Bootstrap
Chapter 5: Enhancing the Product Launch Site with CSS3 and LESS
Chapter 6: A Responsive Website for Business with Foundation Framework
Chapter 7: Extending Foundation
Index
  • Chapter 1: Responsive Web Design
    • Basic responsive web design
      • Viewport meta tag and CSS3 media queries
    • Limitations of responsive web design
      • Responsive image with picture element
    • Learn more about HTML5 and CSS3
    • Introduction to RWD frameworks
      • Why use frameworks?
        • Skeleton
        • Bootstrap
        • Foundation
      • Who is using these frameworks?
        • Hivemind
        • Living.is
        • Swizzle
      • The cons
    • Tools required to build responsive websites
      • Web browsers
      • Code editors
      • Responsive bookmarklets
    • A brief introduction to CSS preprocessors
      • CSS preprocessor compiler tool
      • LESS
        • Nesting rules
        • Variables
        • Mixins
        • Parametric mixins
        • Operations
      • Sass (Syntactically Awesome Stylesheets)
        • Variables
        • Mixins
        • Nested rules
        • Selector inheritance
    • Learning more on CSS preprocessors
      • Learning LESS
      • Learning Sass
    • What are we going to create in this book?
    • Summary
    • Chapter 2: Constructing a Responsive Portfolio Page with Skeleton
      • Getting started with Skeleton
      • Time for action – creating a working directory and getting Skeleton
      • What is included in Skeleton?
        • Starter HTML document
          • The viewport meta tag
          • HTML5 Shim
        • Responsive Grid
        • Clearing styles
        • Media queries
        • Typography styles
        • Button styles
        • Form styles
        • Apple icon devices
        • Photoshop template
      • How will the website look?
        • Website navigation
        • Thumbnail hover effect
      • Setting up the Skeleton document
      • Time for action – adding an extra CSS file
      • Adding custom fonts
      • Time for action – embedding Google Web Fonts
      • Preparing the images
        • Social media icons
      • Time for action – sprite images
        • Contact icons
      • HTML5 elements
      • HTML5 custom data attributes
      • Time for action – structuring the HTML document
      • Summary
      • Chapter 3: Enhancing the Portfolio Website with CSS3
        • CSS box model
          • An introduction to the CSS3 box-sizing property
        • Time for action – specifying box-sizing
        • CSS units of measurement
          • The pixel unit
            • The pixel unit in higher DPI screens
          • The em unit
            • Converting px to em
            • Calculating the em unit manually
            • Browser quirk for the em unit
          • The percent unit
        • Setting font families
        • Time for action – setting the Headings font family
        • Header styles
        • Time for action – adding the header styles
        • Using CSS selectors
          • Direct child selector
          • Adjacent sibling selector
          • General sibling selector
        • Using CSS3 pseudo classes
          • The CSS3 checked pseudo class
          • The CSS3 nth-child pseudo class
        • Portfolio thumbnail and caption styles
        • Time for action – adding thumbnail and caption styles
        • CSS3 2D Transformations
          • The translate() function
            • Vendor prefixes
        • CSS3 Transition
          • CSS3 Transition values
        • Time for action – creating a thumbnail hover effect
        • Website navigation for filtering the portfolio
        • Time for action – creating a portfolio filter
        • Footer section
        • Time for action – styling the footer section
        • Adjusting website styles in a smaller viewport
        • Time for action – viewport size less than 960 px
        • Time for action – viewport size between 767 px and 480 px
        • Time for action – viewport size less than 480 px
        • Testing the website in a different viewport size
        • Summary
        • Chapter 4: Developing a Product Launch Site with Bootstrap
          • Getting started with Bootstrap
          • Time for action – setting up Bootstrap
          • Preparing the website images
          • Introducing LESS applications
          • Time for action – installing CrunchApp
            • Creating new LESS files
          • Time for action – creating a new LESS file with CrunchApp
            • Compiling LESS syntax into standard CSS
          • Time for action – adding LESS files to CrunchApp and compiling them into standard CSS
          • Introducing the @font-face rule to add a custom font family
            • Finding free fonts for embedding on the web
            • Writing the @font-face rule
            • Font formats for cross-browser compatibility
          • Time for action – adding a new font with @font-face
          • Responsive features in Bootstrap
            • Bootstrap grid system
            • CSS3 media queries in Bootstrap
          • Time for action – creating a new LESS file to store CSS3 media queries
            • Establishing navigation with Bootstrap
          • Creating HTML documents
          • Time for action – creating basic HTML5 documents
            • The homepage content
          • Time for action – adding an HTML content structure for our homepage
            • The HTML5 placeholder attribute
            • New input types in HTML5
          • The Gallery page content
        • Time for action – adding HTML content structure for the Gallery page
          • Contact page content
        • Time for action – adding HTML structure for the Contact page
          • The About page content
        • Time for action – adding HTML content structure for the About page
          • The Policy page
        • Time for action – adding HTML content structure for the Privacy and Policy page
        • Summary
          • Chapter 5: Enhancing the Product Launch Site with CSS3 and LESS
            • Custom LESS variables
            • Time for action – defining custom variables
            • Custom LESS mixins
            • Time for action – defining custom LESS mixins
            • LESS color functions
            • Introducing the Scope concept
            • General style rules
            • Time for action – adding general style rules
              • Eliminating vendor prefixes
            • The button styles
            • Time for action – overwriting the Bootstrap button styles
            • Why are the buttons that large?
            • The header styles
            • Time for action – adding website header styles
            • The footer styles
            • Time for action – adding footer styles
            • Working on the homepage
              • The Hero section
            • Time for action – adding styles for the Hello World section
              • The Call-to-action section
            • Time for action – adding styles for the Call-to-action section
              • The Gallery section
            • Time for action – adding styles for the Gallery section
              • The Testimonial section
            • Time for action – adding styles for the Testimonial section
              • Subscribe Form
            • Time for action – adding styles for an input email
            • The Gallery page
            • Time for action – adjusting the page title styles
            • The Contact page
            • Time for action – adding styles for the Contact page
            • The About page
            • The Privacy Policy page
            • Making the website responsive
            • Time for action – enhancing the website's appearance for a viewport size of 767px or less
            • Time for action – enhancing the website's appearance for a viewport size of 480px or less
            • Excluding unnecessary style rules
            • Testing the website
            • Summary
            • Chapter 6: A Responsive Website for Business with Foundation Framework
              • A Ruby-based framework
              • The Foundation gem
              • Time for action – installing the Foundation framework and setting up a new project
              • Sass and SCSS syntax
                • Sass and SCSS code editor
              • Time for action – installing Sublime Text and enabling SCSS syntax highlighting
              • Custom SCSS stylesheets
              • Time for action – creating new SCSS stylesheets for maintainability
              • Introducing Compass
                • Compass Helper Functions
                • Compass project configuration
              • Time for action – configuring the project path in config.rb
              • Compiling SCSS to CSS
              • Time for action – watch SCSS stylesheets for changes
              • Preparing the website images
              • Foundation framework components
                • The grid
                • CSS3 media queries
                • User interface styles
                • Orbit
              • Constructing the HTML documents
                • Basic HTML document
              • Time for action – configuring a basic HTML document
                • The website homepage
              • Time for action – constructing the homepage content
                • The Services page
              • Time for action – constructing the Services page content markup
                • The Pricing page
              • Time for action – constructing the Pricing page content markup
                • The About Us page
              • Time for action – constructing the About Us page content markup
                • The Contact Us page
              • Time for action – structuring the Contact Us page content
              • Summary
              • Chapter 7: Extending Foundation
                • Monitoring the project
                • Time for action – running the command line to monitor the project
                • An introduction to Sass color functions
                • Sass variables
                • Time for action – customizing the Foundation framework Sass variables for colors
                • Custom font families
                  • An introduction to the Compass font face mixin
                • Time for action – adding custom font families with the Compass mixin
                • The website navigation
                • Time for action – styling the header section
                • An introduction to Compass Sprite Helpers
                • The website's footer section
                • Time for action – adding styles for the footer section
                • An introduction to CSS3 structural selectors
                • The homepage
                • Time for action – adding styles to the homepage
                • The Services page
                • Time for action – adding styles to the service page
                • The Pricing page
                • Time for action – adding styles to the Pricing page
                • The About page and the Contact page
                • Time for action – adding styles for the About and the Contact page
                • Time for action – finalizing the website
                • Testing the website
                • Summary
                • Further references
                  • Books
                  • On the Web

                Thoriq Firdaus

                Thoriq Firdaus is a graphic and web designer living in Indonesia. He has been working in web designing projects with several clients from startup to notable companies and organizations worldwide for over five years. He is very passionate on HTML5 and CSS3 and writes on these subjects regularly at http://www.hongkiat.com/ and at his own blog http://creatiface.com/. Occasionally, he also gives presentations on web design at some local colleges and institutions. Outside of work, he enjoys watching movies with his family and trying out some good food in a new cafe or restaurant nearby.
                Sorry, we don't have any reviews for this title yet.

                Code Downloads

                Download the code and support files for this book.


                Submit Errata

                Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                Errata

                - 7 submitted: last submission 18 Feb 2014

                Errata type: Code   

                Code bundle has been updated. Please download and check the new code bundle

                Errata Type: Typo |  Errata page: 53

                The styles.css file should be style.css.

                Errata Type: Typo  |  Errata page: 75

                The text:
                The san-serif fonts Georgia and Times New Roman are set for the headings...

                Should be:

                The text The serif fonts Georgia and Times New Roman are set for the headings...

                Errata Type: Typo | Errata page: 84

                The code is:

                        .portoflio > figure img {

                        max-width: 100%;

                        }

                It should be:

                        .portfolio > figure img {

                        max-width: 100%;

                        }

                Errata Type: Typo

                Errata File: contact.html (present in the downloadable code folder -- 5428OT_Code | Chapter 04 & Chapter 05 | kudosplush)

                The code is:

                <h1>Contact Us <small>we would like to here from you</small></h1>

                It should be:

                <h1>Contact Us <small>we would like to hear from you</small></h1>

                Errata Type: Typo |  Errata page: 130

                The sentence in the tip is:

                You can also use other font families; just make sure that you do not violent the font license.

                It should be:

                You can also use other font families; just make sure that you do not violate the font license.

                Errata Type: Technical |  Errata page: 135

                The code is:

                <footer class="header"> </footer>

                It should be:

                <footer class="footer"> </footer>

                Sample chapters

                You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                Frequently bought together

                Responsive Web Design by Example +    Haskell Data Analysis Cookbook =
                50% Off
                the second eBook
                Price for both: $41.55

                Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                What you will learn from this book

                • Learn how to decide which responsive framework is right for you
                • Harness the flexibility of Skeleton to create a truly unique portfolio
                • Use Bootstrap to almost effortlessly create a stunning product launch page
                • Create an online presence for your business that will work on any device with Zurb Foundation
                • Discover how you can leverage CSS to its full potential for refining your responsive websites

                In Detail

                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.

                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.

                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!

                Approach

                Written as a concise yet practical guide with an explicit focus on showing beginners how to get their very own responsive websites up and running, this essential reference includes coverage of tried-and-tested responsive frameworks in a project-based format that simultaneously provides visible results whilst developing core understanding.

                Who this book is for

                Ideal for anybody who wants their online presence to be compatible with devices and resolutions of any size, "Responsive Web Design by Example" shows you how to select the right framework for your own project requirements and then guides you through the process of installation, configuration, and customization. With three highly structured and meticulously designed projects to choose from, it is the ideal reference for both new and existing web developers who want to be able to augment their skills and showcase their content in a truly professional manner.

                Code Download and Errata
                Packt Anytime, Anywhere
                Register Books
                Print Upgrades
                eBook Downloads
                Video Support
                Contact Us
                Awards Voting Nominations Previous Winners
                Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                Resources
                Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software