Frontend Workflow with Umbraco

Frontend Workflow with Umbraco Umbraco Meetup, Aarhus, november 2015

Chriztian Steinmeier @greystate Vokseværk

Tools

Tools » TextEditor: TextMate » Preprocessing: CodeKit » Live Preview: CodeKit » Graphics: Avocode » Device Stuff:

Viewport Resizer Bookmarklet

Responsive Design Mode (Safari) » Source Control: GitHub Desktop

TextMate » Snippets & Commands » Scope

CodeKit » Concatenates and compiles CoffeeScript, LESS & Kit files

Kit

Kit ?

Kit ??

Kit ???

So, CodeKit » Concatenates and compiles CoffeeScript, LESS & Kit files » Has a built-in webserver with synced live preview » Also does image optimization

Responsive Design Mode

GRAND fromage

grand-fromage.dk

Features some rather large images with banners

on them...

Nested Content Allow you to essentially attach documents of another Document Type as children, but neatly tucked away in a single property.

How to not have to account for the banner’s position when taking the image?

“Actually, R2 has been known to make mistakes... ...From time to time.” C-3PO

“nuPickers with

Custom Labels are all kinds of awesome ”

Custom Labels » Yes, it's very simple » But they make a whole lot of difference

“Can we have a look behind the scenes?”

PROJECT_FOLDER

Now, about those assets ...

Only uncached files, please...

I'm so not fond of these:

background-image : url(/images/logo.png) ; } #icon .tools.chainsaw {

background-image : url(../../css/skins/leather.jpg) ; }

OTOH, I like ! this:

background-image : url(logo.png) ; } #icon .tools.chainsaw {

background-image : url(leather.jpg) ; }

SiteSettings.config <SiteSettings>

GitHub Desktop » Hides all the geeky stuff » Submit Pull-Request from within the app

Time for some ad lib?

Questions, questions? ?

Tak! !