Book Image

Responsive Design High Performance

By : Els
Book Image

Responsive Design High Performance

By: Els

Overview of this book

This book is ideal for developers who have experience in developing websites or possess minor knowledge of how responsive websites work. No experience of high-level website development or performance tweaking is required.
Table of Contents (11 chapters)
7
7. Speeding Up Development with Design Concepts, Patterns, and Programs
10
Index

Adjusting the sections

Let's now tweak the settings:

  1. Open the layout.js file from the js folder, as shown in the following screenshot:
    Adjusting the sections
  2. You should see the following code:
    Adjusting the sections
  3. Below the comment (denoted by //), adjust the section. On line 5, add the following code to let the sections fit into the viewport:
    $('.full-h').css({
        height: win.height()
    });
  4. Refresh the site in your browser, and you should now see that the sections fit into the document window, as shown in the following screenshot:
    Adjusting the sections

Even though the site loads perfectly well and the sections fit well into the viewport, just as the site loads you see the sections on the page for a brief moment, as shown in the following screenshot:

Adjusting the sections

So what happened here? It's quite simple. The jQuery CDN and layout.js files are placed just before the closing </body> tag. While the DOM is being rendered, the JavaScript is still downloading and executes a brief moment after the DOM has been parsed. This is a very small example of a project...