BASIC WORKFLOW Design Static HTML css, js, html & browser check MODX Development Cloud or directly at target domain
BASIC WORKFLOW Create dev cloud from Basic snapshot common extras, user management, media sources etc Templating adding chunks, snippets, extras, contexts Adding content by client or by us after MODX workshop
BASIC WORKFLOW Migration + live!
BASIC WORKFLOW Pro Con - straight forward - versioning - fast for small sites - co-creation - dev in manager - js conflicts
Questions? Are there any questions?
Workflow 2.0 • Introduction • Showcase: SWA.nl • Tools used • GIT and MODx elements
Tools used during development • git • Version-control • bower • Dependency management • grunt • Automated tasks
Tools used during development • The “Build” task • as input it takes the app folder • Compile SASS • Merge dependencies into single files • minify the generated CSS and JS (not HTML) • Lots of other cool stuff • Outputted build is in the dist folder
GIT and MODx elements • We add our elements to the app folder with the following structure • project/app • /scripts • /styles • /images • /elements • /chunks • /snippets • /templates • /plugins
GIT and MODx elements • Our “Build” task does some extra: • copy the elements folder from app to the dist folder • When this is done it uploads everything from DIST to assets/site/ via FTP • Then it runs the snippet clearCache which clears the cache (obvious is obvious which is…)
GIT and MODx elements • We create the static elements in MODx • We have to do this once for every new created element
GIT and MODx elements • Maintenance • We modify our elements • We make changes to our stylesheet • We add images etc. Aaaand…… Build!