Responsive Web Design by Example: Beginner's Guide, 2nd Edition

Description

Build powerful and engaging responsive websites with ease About This Book 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: Responsive Grid System, Bootstrap, and Foundation Who This Book Is For This 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. 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 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. Cover Copyright Credits About the Author About the Reviewers www.PacktPub.com Table of Contents Preface Chapter 1: Responsive Web Design Responsive web design in a nutshell Viewport meta tag A word on screen size and viewport Media queries A look into responsive frameworks The Responsive.gs framework A word on CSS box model CSS3 box sizing The Bootstrap framework The Foundation framework A brief introduction to CSS preprocessors Responsive web design inspiration sources Summary Chapter 2: Web Development Tools Choosing a code editor Time for action – installing Sublime Text Package Control Time for action – installing XAMPP Choosing a CSS preprocessor compiler Browser for development Source maps Mobile emulator Managing project dependency with Bower Time for action – installing Node.js Time for action – installing Bower Bower commands Summary Chapter 3: Constructing a Simple Responsive Blog with Responsive.gs Responsive.gs components The classes Using HTML5 elements for semantic markups HTML5 search input types HTML5 placeholder attribute HTML5 in Internet Explorer A look into polyfills in the Responsive.gs package Box sizing polyfills CSS3 media queries polyfill Examining the blog's wireframe Organizing project directories and files Time for action – creating and organizing project directories and assets The blog HTML structures Time for action – constructing the blog Summary Chapter 4: Enhancing the Blog Appearance Using CSS3 Creating rounded corners with CSS3 Creating drop shadow CSS3 browser supports and the use of vendor prefix Customizing to placeholder text styles Using CSS libraries Working with Koala Time for action – integrating project directory into Koala and combining the style sheets Thinking mobile first Composing the blog styles Time for action – composing the base style rules Time for action – enhancing the header and the navigation appearance with CSS Time for action – enhancing the content section appearance with CSS Time for action – enhancing the footer section appearance with CSS Optimize the blog for desktop Time for action – composing style rules for desktop Making Internet Explorer more capable with polyfills Time for action – patch Internet Explorer with polyfills Summary Chapter 5: Developing a Portfolio Website with Bootstrap The Bootstrap components The Bootstrap responsive grid Bootstrap buttons and forms Bootstrap Jumbotron Bootstrap third-party extensions Jasny Bootstrap off-canvas Digging into Bootstrap Using font icons Examining the portfolio website layout Project directories, assets, and dependencies Time for action – organizing project directories, assets, and installing project dependencies with Bower Updating Bower components The portfolio website HTML structure Time for action – building the website HTML structure Summary Chapter 6: Polishing the Responsive Portfolio Website with LESS Basic LESS syntax Variables Nesting style rules Mixins Parametric mixins Merging mixins with extend syntax Generating value with mathematical operations Generating color with mathematical operations and LESS functions Referential import Using a variable in an import statement Using source map for easier style debugging More on LESS External style sheet references Time for action – creating style sheets and organizing external style sheet references Working with Koala Time for action – compiling LESS into CSS using Koala Polishing the portfolio website with LESS Time for action – composing the website styles with LESS syntax Improve and make the website functioning with JavaScript Time for action – compiling JavaScript with Koala Summary Chapter 7: A Responsive Website for Business with Foundation Examining the website layout A look into Foundation The grid system The buttons The navigation and top bar The pricing tables Moving around Orbit How is Orbit constructed? Adding add-ons, the font Icons Further on Foundation Additional required assets The project directories, assets, and dependencies Time for action – organizing the project directories, assets, and dependencies Time for action – building the website's HTML structure Summary Chapter 8: Extending Foundation Syntactically Awesome Style Sheets Nesting rules Storing a value with a variable Variable interpolation Reusable code block with mixins A brief on the Sass mixin library Creating and using a Sass function Manipulating color with Sass functions Useful Foundation's own function Em and Rem Project recap Style sheet organizations Time for action – organizing and compiling style sheets The website's look and feel Time for action – build on the website Fine-tuning the website Time for action – compiling JavaScript and styling the website with media queries Summary Appendix: Pop Quiz Answers Index