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.
- Clone this repository.
- Run
npm install. - Copy the latest Bootstrap .less source into
less/bootstrap(I don't keep it in the repository). - You need to have the Grunt CLI installed. If you don't you can install it with:
npm install -g grunt-cli. - Type
gruntto [do a bunch of stuff and] start up the server. - Browse to "http://localhost:3000" on your machine.
- Or after building with Grunt, just run node app.js to run locally with node
- Voila! Type
ctrl+cto exit.
- Install the free LiveReload addin from the Chrome Web Store
- When Grunt is serving the page: Click the LiveReload applet in Chrome to activate it. The center dot should become solid.
- Make some changes to the code and save the changes...and...boom!
- Or rely on nodemon with running without Grunt and using nodemon
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.
- Picturefill Responsive Images
- Scrollto Scroll to parts on the page
- Leaflet Open Street Map maps
- Swipe Swipable carousel
- Stellar.js Simple parallax library
- Parallax.js very cool!
- HTML to Jade converter
- Codepen - Great examples
- Codrops - fantastc design examples with code
- 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.
- Little Visuals
- Unsplash
- Death to the Stock Photo
- New Old Stock
- Superfamous (requires attribution)
- Picjumbo
- The Pattern Library
- Gratisography
- Getrefe
- 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.
- 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.