Book Image

Responsive Web Design by Example : Beginner's Guide

By : Thoriq Firdaus
Book Image

Responsive Web Design by Example : Beginner's Guide

By: Thoriq Firdaus

Overview of this book

<p>Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. You can now create your very own responsive website quickly and efficiently, allowing you to showcase your content in a format that will work on any device with an Internet browser.<br /><br />By following our detailed step-by-step instructions in this structured reference guide, you will learn how you can build engaging responsive websites. With coverage of Bootstrap, Skeleton, and Zurb Foundation you'll learn about three of the most powerful responsive frameworks available today.<br /><br />Leading you through by practical example, you'll find that this essential reference develops your understanding by actually helping you create beautiful websites step by step in front of your very eyes. After going over the basics, you'll be able to choose between creating your own responsive portfolio page with Skeleton, building a stunning product page with Bootstrap, or setting up your own professional business website with Zurb Foundation. Ultimately you'll learn how to decide which framework is right for you, and how you can deploy and customize it to your exact specifications!</p>
Table of Contents (14 chapters)
Responsive Web Design by Example Beginner's Guide
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Custom LESS variables


In the previous chapter, we imported the built-in variables from Bootstrap. However, we need to define our own variables to meet the special requirement for our website.

In Chapter 1, Responsive Web Design, we discussed how to define a variable in LESS. But just in case you are not willing to flip back to the previous chapter, the variable in LESS is simply defined with the @ symbol.

For example, the following code snippet defines the white color with the @color variable:

@color: #fff;

This is just a small tip. You can name the variable as desired, but make sure that the name is logical to the variable purpose, descriptive, easy to memorize, and also easy to write.