Book Image

Mobile First Design with HTML5 and CSS3

By : Jason Gonzales
Book Image

Mobile First Design with HTML5 and CSS3

By: Jason Gonzales

Overview of this book

<p>The mobile first design philosophy aims to develop websites that will be lean and fast on small screens without sacrificing a tablet or desktop experience. Using HTML5, CSS3, and simple, standardized modern web tools you can make one site to rule them all.</p> <p>Mobile First Design with HTML5 and CSS3 will teach you the tools you need to make a modern, standards-based web page that displays beautifully on nearly any web browser—essential knowledge for anyone who makes websites!</p> <p>In this book, you will learn how to set up a project from scratch and quickly get up and running with a full portfolio website that will form the base for making almost any kind of web page. Learn to develop web pages that fit the web conventions we all have to conform to. You will learn how to make responsive image slideshows; image galleries with detail pages; and bold, eye-catching banners and forms. Best of all, you will learn how to make these things fast without compromising quality.</p> <p>This book will walk you through the process step by step with all the code required, as well as the thinking that goes behind planning a mobile first responsive website.</p>
Table of Contents (14 chapters)

Awesome icon fonts


For future reference, take a look at the _font-awesome.scss (or similar) file and you will see a list of all the icons created by the styles to facilitate the use of the font-awesome icon fonts. These are just prerolled for us but if you need a new icon that has been added to font-awesome, you will need to add it to this list (or one of your own making). You will notice that the icon is actually specified with the content attribute. For example, the lemon icon CSS looks as follows:

. icon-lemon:before              { content: "\f094"; }

This is because the icon is specified with the Unicode character F094. You can look this up at http://fortawesome.github.io/Font-Awesome/icons/. Just click on each icon to get to know a little more about each one.

While we're here, let's take a quick look at what else is going on to support these icon fonts. At the top of the _font-awesome.scss sheet, you will see that anything that has a class beginning with icon- gets some style by default...