Responsive Web Design by Example Beginner's Guide -- Table of Contents -- Responsive Web Design by Example Beginner's Guide -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Time for action - heading -- What just happened? -- Pop quiz - heading -- Have a go hero - heading -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 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 -- 2. Constructing a Responsive Portfolio Page with Skeleton -- Getting started with Skeleton -- Time for action - creating a working directory and getting Skeleton -- What just happened? -- 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 -- What just happened? -- Adding custom fonts -- Time for action - embedding Google Web Fonts -- What just happened? -- Preparing the images -- Social media icons -- Time for action - sprite images -- What just happened? -- Contact icons -- HTML5 elements -- HTML5 custom data attributes -- Time for action - structuring the HTML document -- What just happened? -- Summary -- 3. Enhancing the Portfolio Website with CSS3 -- CSS box model -- An introduction to the CSS3 box-sizing property -- Time for action - specifying box-sizing -- What just happened? -- 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 -- What just happened? -- Header styles -- Time for action - adding the header styles -- What just happened? -- 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 -- What just happened? -- CSS3 2D Transformations -- The translate() function -- Vendor prefixes -- CSS3 Transition -- CSS3 Transition values -- Time for action - creating a thumbnail hover effect -- What just happened? -- Website navigation for filtering the portfolio -- Time for action - creating a portfolio filter -- What just happened? -- Footer section.

Time for action - styling the footer section -- What just happened? -- Adjusting website styles in a smaller viewport -- Time for action - viewport size less than 960 px -- What just happened? -- Time for action - viewport size between 767 px and 480 px -- What just happened? -- Time for action - viewport size less than 480 px -- What just happened? -- Testing the website in a different viewport size -- Summary -- 4. Developing a Product Launch Site with Bootstrap -- Getting started with Bootstrap -- Time for action - setting up Bootstrap -- What just happened? -- Preparing the website images -- Introducing LESS applications -- Time for action - installing CrunchApp -- What just happened? -- Creating new LESS files -- Time for action - creating a new LESS file with CrunchApp -- What just happened? -- Compiling LESS syntax into standard CSS -- Time for action - adding LESS files to CrunchApp and compiling them into standard CSS -- What just happened? -- 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 -- What just happened? -- 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 -- What just happened? -- Establishing navigation with Bootstrap -- Creating HTML documents -- Time for action - creating basic HTML5 documents -- What just happened? -- Pop quiz -- The homepage content -- Time for action - adding an HTML content structure for our homepage -- What just happened? -- The HTML5 placeholder attribute -- New input types in HTML5 -- The Gallery page content -- Time for action - adding HTML content structure for the Gallery page.

What just happened? -- Contact page content -- Time for action - adding HTML structure for the Contact page -- What just happened? -- The About page content -- Time for action - adding HTML content structure for the About page -- What just happened? -- The Policy page -- Time for action - adding HTML content structure for the Privacy and Policy page -- What just happened? -- Summary -- 5. Enhancing the Product Launch Site with CSS3 and LESS -- Custom LESS variables -- Time for action - defining custom variables -- What just happened? -- Custom LESS mixins -- Time for action - defining custom LESS mixins -- What just happened? -- LESS color functions -- Introducing the Scope concept -- General style rules -- Time for action - adding general style rules -- What just happened? -- Eliminating vendor prefixes -- The button styles -- Time for action - overwriting the Bootstrap button styles -- What just happened? -- Why are the buttons that large? -- The header styles -- Time for action - adding website header styles -- What just happened? -- The footer styles -- Time for action - adding footer styles -- What just happened? -- Working on the homepage -- The Hero section -- Time for action - adding styles for the Hello World section -- What just happened? -- The Call-to-action section -- Time for action - adding styles for the Call-to-action section -- What just happened? -- The Gallery section -- Time for action - adding styles for the Gallery section -- What just happened? -- The Testimonial section -- Time for action - adding styles for the Testimonial section -- What just happened? -- Subscribe Form -- Time for action - adding styles for an input email -- What just happened? -- The Gallery page -- Time for action - adjusting the page title styles -- What just happened? -- The Contact page -- Time for action - adding styles for the Contact page.

What just happened? -- 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 -- What just happened? -- Time for action - enhancing the website's appearance for a viewport size of 480px or less -- What just happened? -- Excluding unnecessary style rules -- Testing the website -- Summary -- 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 -- What just happened? -- Sass and SCSS syntax -- Sass and SCSS code editor -- Time for action - installing Sublime Text and enabling SCSS syntax highlighting -- What just happened? -- Custom SCSS stylesheets -- Time for action - creating new SCSS stylesheets for maintainability -- What just happened? -- Introducing Compass -- Compass Helper Functions -- Compass project configuration -- Time for action - configuring the project path in config.rb -- What just happened? -- Compiling SCSS to CSS -- Time for action - watch SCSS stylesheets for changes -- What just happened? -- 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 -- What just happened? -- The website homepage -- Time for action - constructing the homepage content -- What just happened? -- The Services page -- Time for action - constructing the Services page content markup -- What just happened? -- The Pricing page -- Time for action - constructing the Pricing page content markup -- What just happened? -- The About Us page -- Time for action - constructing the About Us page content markup -- What just happened?.

The Contact Us page.