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/