6. Polishing the Responsive Portfolio Website with LESS | Responsive Web Design by Example : Beginner's Guide - Second Edition

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Responsive Web Design by Example : Beginner's Guide - Second Edition - Second Edition

By : Thoriq Firdaus

4.7 (3)

Responsive Web Design by Example : Beginner's Guide - Second Edition

4.7 (3)

By: Thoriq Firdaus

Overview of this book

This 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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Time for action – heading

Conventions

Reader feedback

Customer support

Free Chapter

1. Responsive Web Design

1. Responsive Web Design

Responsive web design in a nutshell

A look into responsive frameworks

Responsive web design inspiration sources

Summary

2. Web Development Tools

2. Web Development Tools

Choosing a code editor

Time for action – installing Sublime Text Package Control

Time for action – installing XAMPP

Managing project dependency with Bower

Time for action – installing Node.js

Time for action – installing Bower

Summary

3. Constructing a Simple Responsive Blog with Responsive.gs

3. Constructing a Simple Responsive Blog with Responsive.gs

Responsive.gs components

Using HTML5 elements for semantic markups

Examining the blog's wireframe

Organizing project directories and files

Time for action – creating and organizing project directories and assets

The blog HTML structures

Time for action – constructing the blog

Summary

4. Enhancing the Blog Appearance

4. Enhancing the Blog Appearance

Using CSS3

Working with Koala

Time for action – integrating project directory into Koala and combining the style sheets

Thinking mobile first

Composing the blog styles

Time for action – composing the base style rules

Time for action – enhancing the header and the navigation appearance with CSS

Time for action – enhancing the content section appearance with CSS

Time for action – enhancing the footer section appearance with CSS

Optimize the blog for desktop

Time for action – composing style rules for desktop

Making Internet Explorer more capable with polyfills

Time for action – patch Internet Explorer with polyfills

Summary

5. Developing a Portfolio Website with Bootstrap

5. Developing a Portfolio Website with Bootstrap

The Bootstrap components

Digging into Bootstrap

Using font icons

Examining the portfolio website layout

Project directories, assets, and dependencies

Time for action – organizing project directories, assets, and installing project dependencies with Bower

The portfolio website HTML structure

Time for action – building the website HTML structure

Summary

6. Polishing the Responsive Portfolio Website with LESS

6. Polishing the Responsive Portfolio Website with LESS

Basic LESS syntax

External style sheet references

Time for action – creating style sheets and organizing external style sheet references

Working with Koala

Time for action – compiling LESS into CSS using Koala

Polishing the portfolio website with LESS

Time for action – composing the website styles with LESS syntax

Improve and make the website functioning with JavaScript

Time for action – compiling JavaScript with Koala

Summary

7. A Responsive Website for Business with Foundation

7. A Responsive Website for Business with Foundation

Examining the website layout

A look into Foundation

Additional required assets

The project directories, assets, and dependencies

Time for action – organizing the project directories, assets, and dependencies

Time for action – building the website's HTML structure

Summary

8. Extending Foundation

8. Extending Foundation

Syntactically Awesome Style Sheets

Project recap

Style sheet organizations

Time for action – organizing and compiling style sheets

The website's look and feel

Time for action – build on the website

Fine-tuning the website

Time for action – compiling JavaScript and styling the website with media queries

Summary

A. Pop Quiz Answers

Chapter 1, Responsive Web Design

Chapter 2, Web Development Tools

Chapter 3, Constructing a Simple Respons3ive Blog with Responsive.gs

Chapter 4, Enhancing the Blog Appearance

Chapter 5, Developing a Portfolio Website with Bootstrap

Chapter 6, Polishing the Responsive Portfolio Website with LESS

Chapter 8, Extend Foundation

Index

Index

Time for action – compiling LESS into CSS using Koala

Perform the following steps to compile LESS into CSS using Koala:

Add the project directory in the Koala sidebar, as follows:
Select all the style sheets except frameworks.less and style.less. Right-click and select Toggle Auto Compile. Have a look at the following screenshot:
This will turn off the Auto Compile option on the selected style sheets and prevent Koala from compiling these style sheet unintentionally.
On the other hand, ensure that Auto Compile is checked for the two remaining style sheets, frameworks.less and style.less:
Make sure that the frameworks.less and style.less output is set to /assets/css directory, as shown in the following screenshot:
Check the Source Map option for both style sheets to generate the source map files, which will help us when debugging:
Select the output styles for the two style sheets, frameworks.less and style.less, to compress:
This option will generate a small-sized CSS style sheet, as the codes within...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Responsive Web Design by Example : Beginner's Guide - Second Edition

Search

Your notes and bookmarks