1. Dutch Umbraco Festival 2013
J&J’s adventures with frameworks base sites
Jeavon Leopold - Twitter: @crumpled_Jeavon
Jeroen Breuer - Twitter: @j_breuer

2. What and why?
What is our framework/base site…?
• It’s a prebuilt Umbraco 6.1.x Mvc implementation with a very simple front end site
• We always start a new project with a copy of the current framework version
• Contains latest Umbraco core, packages, config tweaks, customisations, common Razor Mvc snippets
& starter base document types
• It comes with a Bootstrap UI but this isn’t generally used for the basis of front end development
You are on page 220/09/2013

3. Why do we need a framework?
Creating a site from scratch is pretty easy with Umbraco, right?
• Yes, but if you have a common approach at the beginning of each project, it makes it easy for a new
developer to get to grips very quickly with something they haven’t worked on before.
• Example, a document type structure and naming from 3 different sites
You are on page 320/09/2013

4. Why do we need a framework?
Reducing YSOD fear
• For a C# developer, a YSOD is just something to fix, for a front end developer or project manager a
YSOD can be a very scary thing
• By checking and confirming compatibility of packages against the current Umbraco version included in
our framework we significantly reduce the chance of a package causing a YSOD and that makes a
happy team!
You are on page 420/09/2013
Scott – Crumpled Production Director,
fed on a diet of team efficiency

5. Why do we need a framework?
Save team time when starting every new project & enables our front end developers to do more
• Compatible packages preinstalled
• Common Razor helpers and snippets ready to go for news, galleries and others
• Configured for SASS support using Optimus so our front end developers get going straight away
You are on page 520/09/2013
Will & Gui – Crumpled front end development team, fed on a diet of Sass, jQuery & HTML5

6. Packages shipped with Crumpled Framework
The Umbraco bare bones packages…
…if you are not using all of these already, you should be!
All Open Source and Free, wow!
• uComponents v6.0 (nightly release)
• DAMP v2.6 CropUp version + DAMP Property Editor Value Converter
• Eksponent CropUp
• Imageresizer
• SlimImage and SlimResponse
• Umbraco Core Property Editor Value Converters (we created this as a result of using it in our framework)
Additionally
• Imageresizer Disk Cache Plugin ($849, worth every dime!)
All made possible by these amazing people
You are on page 620/09/2013

7. Packages shipped with Crumpled Framework
The Essentials for us
• SEO Checker (€99 per domain, €499 unlimited!)
• Structure Extensions v2.0
• Optimus + SASS transformer
• uSync v1.4
• Config Tree
• Diplo Trace Log Viewer
The helpful starters
• Document Sorter
• Contour (€99 per domain)
• ezSearch
All made possible by these amazing people and a dinosaur
You are on page 720/09/2013

8. Packages shipped with Crumpled Framework
The alternative options
• Image Cropper Extended
• AST Amazon S3
Why?
• For some very high usage websites it is cost effective to serve media and crops from Cloudfront CDN
• These two packages together now enable this to happen out of the box!
• Includes a RTE content parser to ensure that media placed into the RTE is also served from CDN!
• http://www.screenr.com/P8NH
Made possible by these amazing people
You are on page 820/09/2013

9. Custom Umbraco Dashboards
You are on page 920/09/2013

10. Configuration Tweaks – web.config
You are on page 1020/09/2013
Maximum upload size
and also, within system.webserver element
Maximum JSON serialization length

11. Configuration Tweaks – web.config
You are on page 1120/09/2013
SVG and other common Mime types
Static content client caching

12. Configuration Tweaks – web.config
You are on page 1220/09/2013
Static and Dynamic Url Compression
Note: Compression module must be installed in IIS and also isn’t available in IIS Express

13. Configuration Tweaks – umbracoSettings.config
Url character replacement
You are on page 1320/09/2013
Thanks to Tim at Site Doctor for his
ultimate list that has been incorporated
http://blogs.thesitedoctor.co.uk/tim/2012
/11/09/The+Ultimate+UrlReplacing+Char
acter+List+For+Umbraco.aspx

14. Developing in a team with a shared database
You are on page 1420/09/2013
Disable XML Cache whilst in development
Setup QA server in load balancing distribution

15. Starter snippets, conventions & doc types
Razor Starter Views/Snippets for
• Common navigations and navigation groups – we created a package
called NavIt
• Breadcrumbs
• Starter news section – section page, master/detail pattern & archive
• Starter team section
• Additionally, case studies, galleries, contact pages etc…
Initial master document types
You are on page 1520/09/2013
After much discussion we have adopted a
inheriting structure:
• MasterDocType – contains the properties
that every page used on a site must have
• Site-MasterDocType – Container for multiple
sites contains specific properties for that site
• Site-Homepage – Properties for that sites’
homepage
• Site-Content-MasterDocType – Container for
every page on the website, has pageH1Title
& bodyText
An additional convention we have adopted is a
label property with a alias of
isDataNode, navigation snippets, sitemaps etc
will all ignore any node with property in
existence.

16. Get a copy of our framework now from
https://github.com/jbreuer/Hybrid-Framework-Best-Practices
Crumpled Dog Design - 18 Phipp St, London EC2A 4NU
020 7739 5553 | jeavon@crumpled-dog.com | www.crumpled-dog.com