modules first level: - slider (olw, slick, dangerous) - content - search - menu - footer - gallery - product second level: - filters - quick cart - cart list - flyer - map - lookbook atoms first level: - button - form - table - tab - widget #campercss https://github.com/Semantic-Org/Semantic-UI/tree/master/dist/components atomic design origami rizzo patternlab http://ink.sapo.pt/javascript-ui/ semantic-ui lightning design system intuitcss bem oocss, smacss styleguides.io prefixes: p - for pages (parent selector) b - for main structure blocks js- for js binding m - for modules a - for generic atoms is - for states test: jasmine nightwatch js: underscore babel gulp/webpack es6 react native jquery ### css // google fonts? - https://www.npmjs.com/package/gulp-google-webfonts // typekit? // images sprite + pngmin // ie8 styles'' // hash for cache images // scss-to-json // css uncss // # env // contentfull // errors nunjucks // pages menu // docs // ui // minify html // page-speed // #js // js hint // jasmine - https://syropia.net/journal/javascript-testing-with-jasmine-and-gulp-redux // uglify // show modules/blocks/pages/js bindings // #css // google fonts? - https://www.npmjs.com/package/gulp-google-webfonts // typekit? // images sprite + pngmin // ie8 styles'' // hash for cache images // scss-to-json // css uncss // gulp clean _dist from .scss files // changed .https://github.com/sindresorhus/gulp-changed http://labertheme.com/demo/lab_eren/layout3/en/ http://delphinus.demo.arw.tf/?___store=german http://zeiran6.demo.towerthemes.com/index.php?route=common/home 1. modular architecture 2. template inheritance via apps 3. react modules 4. json data driven modules (also from contentfull) 5. responsive modules 6. scss 7. landing page development 8. mail template development 9. js testing via Jasmine and nichtwatch with browserstack 10. gulp task runner 11. babel es6 transpiler 12. living styleguide 13. ui docs 14. layout helper (show blocks, modules, atoms)