Skip to content

dstroot/landing-page-example

Repository files navigation

Dependency Status devDependency Status

Background

I wanted to create a reasonably nice landing page as a learning process. Feel free to use and abuse as you see fit.

The key files are only:

  • HTML Page: index.htm
  • Stylesheet (built with LESS): /less/style.less

Technical Dependencies

Steps to build and run locally

  1. Clone this repository. git clone https://github.com/dstroot/landing-page-example.git && cd landing*
  2. Run npm install.
  3. Copy the latest Bootstrap .less source into less/bootstrap (I don't keep it in the repository).
  4. You need to have the Grunt CLI installed. If you don't you can install it with: npm install -g grunt-cli.
  5. Type grunt to [do a bunch of stuff and] start up the server.
  6. Browse to "http://localhost:3000" on your machine.
  7. Voila! Type ctrl+c to exit.

Live Reload

  1. Install the free LiveReload addin from the Chrome Web Store
  2. When Grunt is serving the page: Click the LiveReload applet in Chrome to activate it. The center dot should become solid.
  3. Make some changes to the code and save the changes...and...boom!

Credits and Resources

Build Tooling

Bower has one minor quirk that you need to be aware of – it will install components into a “bower_components” directory by default, which unfortunately is not under the public directory. I suggest you create a directory called “vendor” under “public/js.” You can do this by running the command mkdir public/js/vendor. Next, in the app directory, create a plain text file called “.bowerrc” that contains:

{ "directory" : "public/js/vendor" }

This configuration file will tell Bower to install tools into the “public/javascripts/vendor” directory.

Design and Utilities

Parallax

Useful Tools

Recommended Design

Stock Photos

Recommended Node.js Libraries

  • nodemon - automatically restart node.js server on code change.
  • geoip-lite - get location name from IP address.
  • email.js - send emails with node.js (without sendgrid or mailgun).
  • filesize.js - make file size pretty, e.g. filesize(265318); // "265.32 kB".
  • Numeral.js - a javascript library for formatting and manipulating numbers.

Recommended Client-Side libraries

  • Hover - Awesome css3 animations on mouse hover.
  • platform.js - Get client's operating system name, version, and other useful information.
  • iCheck - Custom nice looking radio and check boxes.
  • Magnific Popup - Responsive jQuery Lightbox Plugin.
  • jQuery Raty - Star Rating Plugin.
  • Headroom.js - Hide your header until you need it.
  • Fotorama - Very nice jQuery gallery.
  • X-editable - Edit form elements inline.
  • Offline.js - Detect when user's internet connection goes offline.
  • Color Thief - Grabs the dominant color or a representative color palette from an image.
  • Alertify.js - Sweet looking alerts and browser dialogs.

Charts