万本电子书0元读

万本电子书0元读

顶部广告

Responsive Web Design by Example电子书

售       价:¥

22人正在读 | 0人评论 9.8

作       者:Thoriq Firdaus

出  版  社:Packt Publishing

出版时间:2013-03-20

字       数:110.5万

所属分类: 进口书 > 外文原版书 > 电脑/网络

温馨提示:此类商品不支持退换货,不支持下载打印

为你推荐

  • 读书简介
  • 目录
  • 累计评论(0条)
  • 读书简介
  • 目录
  • 累计评论(0条)
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.
目录展开

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

Time for action – structuring the Contact Us page content

What just happened?

Summary

7. Extending Foundation

Monitoring the project

Time for action – running the command line to monitor the project

What just happened?

An introduction to Sass color functions

Sass variables

Time for action – customizing the Foundation framework Sass variables for colors

What just happened?

Custom font families

An introduction to the Compass font face mixin

Time for action – adding custom font families with the Compass mixin

What just happened?

The website navigation

Time for action – styling the header section

What just happened?

An introduction to Compass Sprite Helpers

The website's footer section

Time for action – adding styles for the footer section

What just happened?

An introduction to CSS3 structural selectors

The homepage

Time for action – adding styles to the homepage

What just happened?

Have a go hero

The Services page

Time for action – adding styles to the service page

What just happened?

The Pricing page

Time for action – adding styles to the Pricing page

What just happened?

The About page and the Contact page

Time for action – adding styles for the About and the Contact page

What just happened?

Time for action – finalizing the website

Testing the website

Summary

Further references

Books

On the Web

Index

累计评论(0条) 0个书友正在讨论这本书 发表评论

发表评论

发表评论,分享你的想法吧!

买过这本书的人还买过

读了这本书的人还在读

回顶部