dannydrinkwater / thefrontend

A Front End development project template.

thefrontend

Getting Started

Create a new directory

Open a terminal window, navigate to the new directory and run:

git clone https://github.com/dannydrinkwater/thefrontend.git .

Public

Ensure that your server webroot points to this directory.

A sample robots.txt file is also included for convenience.

A sample crossdomain.xml file is also included for convenience.

.gitattributes

Normalise line endings within the Git repository.

.gitignore

Project specific files and folders to be ignored. The contents of this file is quite minimal because the majority of standard ignores should be set within a global .gitignore file.

package.json

Defines the dependecies required by Gulp for the tasks outlined above.

Implemented code/features

• OOCSS framework and mixins from InuitCSS: https://github.com/inuitcss/inuitcss
• Normalize.css: https://github.com/necolas/normalize.css
• Sass-MQ: https://github.com/sass-mq/sass-mq/
• Boilerplate HTML5 and assets from H5BP: https://html5boilerplate.com/

Recommended feature plugins & polyfills

• Owl Carousel: https://owlcarousel2.github.io/OwlCarousel2/

• Custom icons: http://google.github.io/material-design-icons/#setup-method-2-self-hosting or https://icomoon.io/app/#/select

• Typeahead: https://twitter.github.io/typeahead.js/

• Responsive tables: https://github.com/filamentgroup/tablesaw or https://zurb.com/playground/responsive-tables

• Charting/data: https://github.com/d3/d3/wiki/Gallery or https://github.com/filamentgroup/jQuery-Visualize

• Parallax: https://github.com/wagerfield/parallax or https://github.com/Prinzhorn/skrollr

• Page transitions: https://github.com/codrops/PageTransitions

• Transitions & animations: https://github.com/h5bp/Effeckt.css

• Element sorting/ordering (inc. Masonry): https://isotope.metafizzy.co/

• Picturefill (responsive image polyfill): https://github.com/scottjehl/picturefill

• Other cool stuff: https://www.filamentgroup.com/code/