Book Image

Creating Flat Design Websites

By : António Pratas
Book Image

Creating Flat Design Websites

By: António Pratas

Overview of this book

<p>Flat design is a simple yet visually appealing and increasingly popular style, particularly good for people just starting to develop their own websites. This book helps you to create a simple and good looking product in the flat design style.</p> <p>Creating Flat Design Websites will cover the origins of flat design, its principles as a visual style, and how to start designing right away, always making sure that the interface designed doesn't suffer from usability problems. Learn to design and develop your flat website with external frameworks to save time and money in your project. The book also provides you with tips to avoid the usability mistakes that commonly accompany this style due to its simple look and elements, as well as how to start developing the look of your website in HTML and CSS. Finally, you will learn how you can create your own Flat UI kit to suit your needs.</p>
Table of Contents (14 chapters)

Using jQuery for navigation


As we said before, we can use a slide to the section code to create our single page website navigation, so that when the user clicks in the menu, the page scrolls to the beginning of that section. To accomplish that effect, we will be using a jQuery plugin called PageScroller, available at http://pagescroller.com/. There are two versions: Pro and Lite. For this exercise, the Lite version will be enough, as we only need the minimum functionality. The way we're going to implement this is extremely easy as well, but if you're looking for more options, you can check the plugin readme file and the website.

First of all, we'll need to load the JavaScript files needed for this. After unpacking the plugin, copy and paste the jquery.pagescroller.lite.js file into your js folder. We will also need jQuery for this, but we will load it from the Content Delivery Network (CDN) from an external path. So, include these two lines in your <head> element, ideally before the...