From Zero to Hero – How we brand SharePoint using Yeoman

Branding SharePoint has been taken to a new level with SharePoint 2013, you can now easily brand your SharePoint (on Premises and on Demand) by using HTML MasterPages and HTML PageLayouts. This step allows many design agencies to brand SharePoint sites without digging deep into SharePoint insights. About a year ago Experts Inside was faced with the first huge (really huge) SharePoint 2013 project were we had to provide both custom MasterPages and custom PageLayouts. Starting with HTML was fine, but after a few days working on these artefacts we recognized that the development workflow isn’t as smart as it could be. Kevin Mees (one of our developers) started with combining both, latest SharePoint capabilities and latest web development tools. After some iterations we’ve build an incredible development workflow for branding SharePoint portals using latest languages such as * Jade * CoffeeScript / TypeScript * SASS Combined by the fastest web development workflow you’ve ever seen – yeoman. (

http://yeoman.io)

Yeoman itself is a composition of great tools driven by the web development community around the world. Yo which is actually responsible for scaffolding new projects; grunt which is the most popular task-runner based on JavaScript and last but not least bower a client-side dependency manager.

Throughout this article series I’ll first explain some important things about yeoman that every web developer has to know, before I move over to the SharePoint related stuff. Here is the outline for the upcoming posts on this topic

1. This introduction
2. Yeoman the web development workflow
3. An Introduction to Jade
4. An Introduction to CoffeeScript
5. An Introduction to SASS
6. Our yeoman generators
7. Hands  On – Let’s create a custom MasterPage
8. Hands On – Let’s create a custom PageLayout
9. A forecast – What are we currently working on I tried to keep the amount of posts as small as possible, but because many SharePoint’ers out there have never seen real web development using technologies as Jade, CoffeeScript or SAAS, I’ve to give them a rough introduction for these languages.   *Pictures are taken form http://yeoman.io