Mar-a-lago-100 Landing Page

The key files are only:

• HTML Page: index.htm
• Stylesheet (built with LESS): /less/style.less
• ...but baked in is passport, monogo/mongoose, cors, api, routing, etc.

Technical Dependencies

• Nodejs
• Gruntjs

Steps to build and run locally

1. Clone this repository.
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. Or after building with Grunt, just run node app.js to run locally with node
8. 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!
4. Or rely on nodemon with running without Grunt and using nodemon

Credits and Resources

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

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