RAADHUIS MODX Meetup 21 mei 2015

WelcomeMODX Meetup May 21st 2015

• Introduction • Design agency • Why choose MODX? • Basic (static) workflow

INTRODUCTION

[email protected]

@_jorgen

MODX forum: Jorgen H.

INTRODUCTION

Regular A.K.A

[email protected] @_jorgen

MODX forum: Jorgen H.

• 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

Showcase: SWA.nl

Showcase: SWA.nl

http://www.swa.nl

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?