Web Design Blueprints电子书

Web Design Blueprints

Table of Contents

Web Design Blueprints

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Responsive Web Design

Introduction to responsive web design

Getting familiar with the basics

Using the inspector

Understanding the viewport meta tag

Learning about the viewport meta tag by example

Viewing your work on the tag

Fixing the problem by adding the proper meta tag

Further explanation of the viewport meta tag

Understanding and changing the user agent string

Using the user agent string for testing

How to change the user agent string in Chrome

What next?

Using media queries for responsive design

Some background information

A small example

A better example

Adding style

Viewing your example

Adding complexity to your stylesheet

Adding more media queries

More complicated examples

Working with responsive media

Creating responsive images with srcset

How things have changed

A brand-new solution

Enough theory, let's do something

Layout basics

Making the img element responsive

Viewing your responsive image

Creating responsive images with CSS

Getting started coding

Responsive style

Above and beyond

Calculating the responsive image size

Adding responsive video to your site

Working with two use cases

Use case #1 – self-hosted video

Use case #2 – embedded through the iframe element

Responsive video CSS

Modifying the layout

Viewing the example

Communicating with responsive typography

A good solution for responsive typography

Working with an example

Create the typography's CSS

Finished!

Building responsive layouts

Creating responsive padding with the box model property

A real-world example

Applying the box model property

Finished!

Going further

Viewing your example

Adding more complexity

Finished! Now view your work

Creating responsive navigation with CSS and JavaScript

Jump into an example

Creating the responsive CSS with media queries

Your first version is complete

Going further

Adding interaction

Finally, the interaction function

Viewing your interactive responsive navigation

Summary

2. Flat UI

A brief history of flat design

Flat UI color

Sample color swatches for flat UI

The vivid color swatch

The retro color swatch

The monotone color swatch

Creating a color swatch for your project

Creating a flat UI layout

Adding content

Creating a working JavaScript clock

Adding textual content

Let's talk about the weather, travel, and the stock market

Flat UI typography

Adding webfonts

Adding flat UI elements

Flat UI CSS cleanup

Creating universal classes

Fixing time

Fixing the news and tasks elements CSS

Adding CSS for the weather section

Creating more universal classes

Final cleanup of the landscape orientation

Final cleanup of the portrait orientation

Summary

3. Parallax Scrolling

Starting off

The HTML markup

Color classes

Using SVG font icons

Getting the fonts

That's no moon!

OMG, it's full of stars!

Clouds, birds, and airplanes

The rocket

Terra firma

Next up, the CSS

Styling the objects with CSS

Styling the ground objects

Writing the JavaScript effects

Setting the row height

Spreading the objects

Spreading the clouds

Loading the page functions

Smoothening the scroll

Updating elements on the scroller

Collecting the moving elements

Creating functions for the element types

Setting the left positions

Creating the rocket's movement function

Finally, moving the earth

Summary

4. Single Page Applications

What is an SPA?

The SPA's relevance

Getting to work

Getting the old files

Getting the project set up

Object and function conventions

Creating utility functions

Creating a services layer for AJAX

Creating and using the file structure

Working with the home structure

Putting the content in the new file structure for the home

Modifying index.html and CSS

Modifying the JavaScript to use the structure

Finish the home to make it work

Setting up other sections

Breaking out the content into directories

Separating concerns and making objects

Making the routing registry tables

Using routing registry tables to load home content

Loading all sections in the structure

Making #hashes

Using #hash for routing

Performing housekeeping

Creating a callBack function for the API

Using the callBack function

Using the callBack function

Adding links that use hashes

Using APIs

Summary

5. The Death Star Chapter

Where to begin?

Deleting unnecessary features

Adding new routes

Adding the directories

Adding levels to JavaScript

Editing home.html

Dropping in the parallax game

Fixing the broken level

Moving the load functions to levels.js

Fixing the namespacing in Level1.js

Loading elements from JSON

Using the data requests

Parsing the AJAX

Moving the spreadObjects function to a general pattern

What can be done in the shared levels service

Updating elements on the scroll

Modifying the CSS

Adding message objects

Creating a clickable object

Creating a moving object

Editing the home JavaScript

Adding more to make the home interesting

Creating the other pages – credits and leaderboard

Replicating credits for the leaderboard

Creating the second level

Getting SVG objects

Creating the directory structure and routes

Creating the new JSON for each level

Creating the level 2 HTML

Creating the level2 JS

Parsing the AJAX

Updating the elements

Moving the elements

Adding some CSS

Creating the home page version

Adding final touches

Creating explosive final touches

Summary

Index