TY  - BOOK
AU  - Firdaus,Thoriq
AU  - Minessale,A.
AU  - Collins,M.
TI  - Responsive Web Design by Example
SN  - 9781849695435
AV  - TK5105.888 -- .F57 2013eb 
U1  - 006.74 
PY  - 2013///
CY  - Olton
PB  - Packt Publishing Ltd
KW  - Cascading style sheets
KW  - HTML (Document markup language)
KW  - Web sites -- Design
KW  - Electronic books
N1  - Intro -- 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
N2  - 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.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
UR  - https://ebookcentral.proquest.com/lib/buse-ebooks/detail.action?docID=1115453
ER  -