Cargando…
Responsive web design by example beginner's guide /
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 resul...
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Birmingham :
Packt Publishing Limited,
2013.
|
| Temas: | |
| Acceso en línea: | Texto completo |
Tabla de Contenidos:
- Table of Contents; Responsive Web Design by Example Beginner's Guide; 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 designViewport 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 templateHow 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 propertyTime 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.