You are previewing Responsive Web Design by Example : Beginner's Guide - Second Edition.
O'Reilly logo
Responsive Web Design by Example : Beginner's Guide - Second Edition

Book Description

Build powerful and engaging responsive websites with ease

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.

By following our detailed step-by-step instructions in this reference guide, you will learn to build engaging responsive websites. With coverage of Responsive Grid System, Bootstrap, and Foundation, you will learn about three of the most powerful frameworks in responsive web design. You will learn to create a cool blog page, a beautiful portfolio site, and a crisp professional business site and make them all totally responsive. You'll also find out which framework works best for your project specifications.

What You Will Learn

  • Use Responsive Grid System, Bootstrap, and Foundation frameworks for responsive web design
  • Build a semantic website structure with HTML5 elements
  • Determine the responsive website persona with CSS3
  • Harness the power of CSS preprocessor to compose programmable and more maintainable CSS
  • Customize and extend responsive design frameworks
  • Use Bower to organize website dependencies
  • Learn how to decide which framework best suits your project specification
  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. Responsive Web Design by Example Beginner's Guide Second Edition
      1. Table of Contents
      2. Responsive Web Design by Example Beginner's Guide Second Edition
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Sections
        5. Time for action – heading
          1. What just happened?
          2. Pop quiz – heading
          3. Have a go hero – heading
        6. Conventions
        7. Reader feedback
        8. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Responsive Web Design
        1. Responsive web design in a nutshell
          1. Viewport meta tag
            1. A word on screen size and viewport
          2. Media queries
        2. A look into responsive frameworks
          1. The Responsive.gs framework
            1. A word on CSS box model
            2. CSS3 box sizing
          2. The Bootstrap framework
          3. The Foundation framework
          4. A brief introduction to CSS preprocessors
          5. Have a Go Hero — delve into responsive web design
          6. Pop Quiz — responsive web design main components
        3. Responsive web design inspiration sources
        4. Summary
      9. 2. Web Development Tools
        1. Choosing a code editor
          1. Sublime Text Package Control
        2. Time for action – installing Sublime Text Package Control
          1. What just happened?
          2. Have a go hero – install the LESS and Sass syntax-highlighting package
          3. Setting up a local server
        3. Time for action – installing XAMPP
          1. What just happened?
          2. Choosing a CSS preprocessor compiler
          3. Browser for development
            1. Source maps
            2. Mobile emulator
        4. Managing project dependency with Bower
        5. Time for action – installing Node.js
          1. What just happened?
          2. Have a go hero – get yourself familiar with command lines
        6. Time for action – installing Bower
          1. What just happened?
          2. Bower commands
          3. Pop quiz – web development tools and command lines
        7. Summary
      10. 3. Constructing a Simple Responsive Blog with Responsive.gs
        1. Responsive.gs components
          1. The classes
        2. Using HTML5 elements for semantic markups
          1. HTML5 search input types
            1. HTML5 placeholder attribute
          2. HTML5 in Internet Explorer
          3. A look into polyfills in the Responsive.gs package
            1. Box sizing polyfills
            2. CSS3 media queries polyfill
        3. Examining the blog's wireframe
        4. Organizing project directories and files
        5. Time for action – creating and organizing project directories and assets
          1. What just happened?
          2. Have a go hero – making the directory structure more organized
          3. Pop quiz – using polyfill
        6. The blog HTML structures
        7. Time for action – constructing the blog
          1. What just happened?
          2. Have a go hero – creating more blog pages
          3. Pop quiz – HTML5 elements
        8. Summary
      11. 4. Enhancing the Blog Appearance
        1. Using CSS3
          1. Creating rounded corners with CSS3
          2. Creating drop shadow
          3. CSS3 browser supports and the use of vendor prefix
          4. Customizing to placeholder text styles
          5. Using CSS libraries
        2. Working with Koala
        3. Time for action – integrating project directory into Koala and combining the style sheets
          1. What just happened?
          2. Have a go hero – renaming the output
          3. Pop quiz – website performance rules
        4. Thinking mobile first
        5. Composing the blog styles
        6. Time for action – composing the base style rules
          1. What just happened?
          2. Have a go hero – customizing the link color
        7. Time for action – enhancing the header and the navigation appearance with CSS
          1. What just happened?
          2. Have a go hero – customizing the header
        8. Time for action – enhancing the content section appearance with CSS
          1. What just happened?
          2. Have a go hero – improving the content section
        9. Time for action – enhancing the footer section appearance with CSS
          1. What just happened?
        10. Optimize the blog for desktop
        11. Time for action – composing style rules for desktop
          1. What just happened?
        12. Making Internet Explorer more capable with polyfills
        13. Time for action – patch Internet Explorer with polyfills
          1. What just happened?
          2. Have a go hero – polish the blog for Internet Explorer
        14. Summary
      12. 5. Developing a Portfolio Website with Bootstrap
        1. The Bootstrap components
          1. The Bootstrap responsive grid
          2. Bootstrap buttons and forms
          3. Bootstrap Jumbotron
          4. Bootstrap third-party extensions
            1. Jasny Bootstrap off-canvas
        2. Digging into Bootstrap
        3. Using font icons
        4. Examining the portfolio website layout
        5. Project directories, assets, and dependencies
        6. Time for action – organizing project directories, assets, and installing project dependencies with Bower
          1. What just happened?
          2. Have a go hero – specifying Bower custom directory
          3. Pop quiz – test your understanding on Bower commands
          4. Updating Bower components
        7. The portfolio website HTML structure
        8. Time for action – building the website HTML structure
          1. What just happened?
          2. Have a go hero – extending the portfolio website
          3. Pop quiz – Bootstrap button classes
        9. Summary
      13. 6. Polishing the Responsive Portfolio Website with LESS
        1. Basic LESS syntax
          1. Variables
          2. Nesting style rules
          3. Mixins
            1. Parametric mixins
              1. Specify a default value in a parametric mixin
            2. Merging mixins with extend syntax
          4. Generating value with mathematical operations
          5. Generating color with mathematical operations and LESS functions
          6. Referential import
            1. Using a variable in an import statement
          7. Using source map for easier style debugging
          8. More on LESS
        2. External style sheet references
        3. Time for action – creating style sheets and organizing external style sheet references
          1. What just happened?
          2. Have a go hero – name and organize the style sheets
          3. Pop quiz – which of the following option is not LESS Import option?
        4. Working with Koala
        5. Time for action – compiling LESS into CSS using Koala
          1. What just happened?
        6. Polishing the portfolio website with LESS
        7. Time for action – composing the website styles with LESS syntax
          1. What just happened?
          2. Have a go hero – being more creative
          3. Pop quiz — using LESS function and extend syntax
        8. Improve and make the website functioning with JavaScript
        9. Time for action – compiling JavaScript with Koala
          1. What just happened?
        10. Summary
      14. 7. A Responsive Website for Business with Foundation
        1. Examining the website layout
        2. A look into Foundation
          1. The grid system
          2. The buttons
          3. The navigation and top bar
          4. The pricing tables
          5. Moving around Orbit
            1. How is Orbit constructed?
          6. Adding add-ons, the font Icons
          7. Further on Foundation
        3. Additional required assets
        4. The project directories, assets, and dependencies
        5. Time for action – organizing the project directories, assets, and dependencies
          1. What just happened?
        6. Time for action – building the website's HTML structure
          1. What just happened?
        7. Summary
      15. 8. Extending Foundation
        1. Syntactically Awesome Style Sheets
          1. Nesting rules
          2. Storing a value with a variable
            1. Variable interpolation
          3. Reusable code block with mixins
            1. A brief on the Sass mixin library
          4. Creating and using a Sass function
          5. Manipulating color with Sass functions
          6. Useful Foundation's own function
            1. Em and Rem
          7. Have a go hero – diving into Sass
          8. Pop quiz – multiple parameters in Sass function
          9. Pop quiz – Sass color manipulation
        2. Project recap
        3. Style sheet organizations
        4. Time for action – organizing and compiling style sheets
          1. What just happened?
        5. The website's look and feel
        6. Time for action – build on the website
          1. What just happened?
          2. Have a go hero – colors and creativities
          3. Pop quiz – importing an external Sass style sheet
        7. Fine-tuning the website
        8. Time for action – compiling JavaScript and styling the website with media queries
          1. What just happened?
          2. Have a go hero – remove unnecessary Foundation components
        9. Summary
      16. A. Pop Quiz Answers
        1. Chapter 1, Responsive Web Design
          1. Pop quiz – responsive web design main components
        2. Chapter 2, Web Development Tools
          1. Pop quiz – web development tools and command lines
        3. Chapter 3, Constructing a Simple Respons3ive Blog with Responsive.gs
          1. Pop quiz – using polyfill
          2. Pop quiz – HTML5 elements
        4. Chapter 4, Enhancing the Blog Appearance
          1. Pop quiz – website performance rules
        5. Chapter 5, Developing a Portfolio Website with Bootstrap
          1. Pop quiz – test your understanding on Bower commands
          2. Pop quiz – Bootstrap button classes
        6. Chapter 6, Polishing the Responsive Portfolio Website with LESS
          1. Pop quiz – which of the following option is not LESS Import option?
          2. Pop quiz – using LESS function and extend syntax
        7. Chapter 8, Extend Foundation
          1. Pop quiz – multiple parameters in Sass function
          2. Pop quiz – Sass color manipulation
          3. Pop quiz – importing external Sass style sheet
      17. Index