Landing Page Example

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

• Nodejs
• Gruntjs

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

• Bootstrap
• Font Awesome
• jQuery
• Animate CSS
• Google Fonts
• {less}
• David

Build Tooling

• Sublime Text
• Nodejs
• Gruntjs
• Bower

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

• Picturefill Responsive Images
• Scrollto Scroll to parts on the page
• Leaflet Open Street Map maps
• Swipe Swipable carousel

Parallax

• Stellar.js Simple parallax library
• Parallax.js very cool!

Useful Tools

• HTML to Jade converter
• Codepen - Great examples
• Codrops - fantastc design examples with code

Recommended Design

• Google Bootstrap - Google-styled theme for Bootstrap
• Colors - a nicer color palette for the web.
• CSS Spinning Loaders - spinning loader in css.
• Creative Button Styles - awesome button styles.
• 3D Dropdown Menu - CSS3 3D Dropdown Menu that folds and unfolds.
• Calendar in CSS - Nice looking calendar in pure HTML and CSS.
• Creative Link Effects - Beautiful link effects in CSS.

Stock Photos

• Little Visuals
• Unsplash
• Death to the Stock Photo
• New Old Stock
• Superfamous (requires attribution)
• Picjumbo
• The Pattern Library
• Gratisography
• Getrefe

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

• Morris.js