with code
Realism
Test ideas in the browser
Close collaboration
Learn from each other
Skinnable
Take your wires further
Bootstrap
most popular tool
Foundation
most flexible tool
JetStrap
no coding skills required
CodePen*
Great for playing with CSS
codepen.io
JSFiddle
Great for JavaScript...obvs
jsfiddle.net
Browser inspector
Chrome, Firefox
Image downloader
https://chrome.google.com/webstore/detail/fatkun-batch-download-ima/nnjjahlikiabnchcpehcpkdeckfgnohf?hl=en
CSS Shapes
https://css-tricks.com/examples/ShapesOfCSS/
Test templates
Experiment with content flow
Understand how components work together
Test specific UI features
Managing elements
Dig into layout and visual detail
Experiment with styles and transitions
Trial and error look and feel
Test the emotional response
Install foundation for sites / foundation for apps: http://foundation.zurb.com/sites | http://foundation.zurb.com/apps.html
Install the dependancies via npm and bower. run `npm start`
Images are created inside src/assets/img and copied only when `npm start` is run again
Overriding basic settings is done through the src/assets/scss/_settings.scss file
Custom components can be added in src/assets/components folder and then imported via the src/assets/scss/app.scss file
For HTML snippets: http://foundation.zurb.com/sites/docs/
Architecture
See config.yml - stores paths
See gulp.babel.js
Uses Bower for plugin management
NPM - need to investigate
Uses Panini (built on handlebars) for template management