O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

Perform the following steps to compile the JavaScript files and optimize the website for a small viewport size:

  1. Create a new JavaScript file in the assets/js directory named foundation.js.
  2. In foundation.js, import the following JavaScript files:
    // @koala-prepend "../../components/foundation/js/vendor/jquery.js"
    // @koala-prepend "../../components/foundation/js/foundation/foundation.js"
    // @koala-prepend "../../components/foundation/js/foundation/foundation.topbar.js"
    // @koala-prepend "../../components/foundation/js/foundation/foundation.orbit.js"
  3. Via Koala, compile foundation.js.
  4. Then, open index.html and add the following lines right before </body> to enable the Orbit ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required