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

Book Description

Discover how you can easily create engaging, responsive websites with minimum hassle!

  • 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

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!

Table of Contents

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