raadhuis modx meetup 21 mei 2015
TRANSCRIPT
WelcomeMODX Meetup May 21st 2015
• Introduction • Design agency • Why choose MODX? • Basic (static) workflow
• Communication solutions • Multichannel
- online - offline
• Front-end dev • Functionality follows design
DESIGN AGENCY
DESIGN AGENCY - PORTFOLIO
DESIGN AGENCY - PORTFOLIO
DESIGN AGENCY - PORTFOLIO
DESIGN AGENCY - PORTFOLIO
DESIGN AGENCY - PORTFOLIO
DESIGN AGENCY - PORTFOLIO
DESIGN AGENCY - PORTFOLIO
raadhuis.com/werk
• Creative freedom• Flexible expansion • Ease of use for our client • Integration with 3rd party
tools (API)
WHY CHOOSE MODX
BASIC WORKFLOW
Intake
Defining goals, KPI’s
Wireframes
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 - fast for small sites - dev in manager
- versioning - co-creation - js conflicts
Questions?
Are there any questions?
• Introduction • Showcase: SWA.nl • Tools used • GIT and MODx elements
Workflow 2.0
Introduction
Bart van Dorp
a.k.a.: Henk 3rd Bart
Tools used during development
• git • Version-control
• bower • Dependency management
• grunt • Automated tasks
• 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
Tools used during development
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!
Action
Time to see it in action!
Questions?
Are there any questions?