A Symphony of Codestruction: Mixing Office UI Fabric with Bootstrap in Codeply While Prototyping Office add-ins (sigh, the WEB kind…)

(great, how am I going to fit that title in a Tweet without runni

I recently read Stefan Bauer’s recent post on riffing with the Office Yeoman generator – “Speed up development in ‘Yo Office’ through browser-sync“.  That’s a bitchin’ idea and I’ll definitely keep that in mind.

Then I stumbled on Codeply, which knocked my socks off.  Which as they describe is “A Responsive Design Playground & Frontend Editor”.  I’ve used CodePen, but Codeply really shines with Bootstrap.  The Office UI Fabric is obviously inspired by Bootstrap and I’ve been mixing the best components of both worlds while designing the new UI for MessageFiler Beta 2.0 – here’s a sneak peek (BTW join the Beta and enter to win a $25 Amazon gift card):

So I wondered if I could “ply” with Fabric – and the answer is YES!

 

That effort was definitely helped along by tinkering with Codeply and playing around (and banging my head against the desk at times, of course) – but the end result made it all worthwhile. The time I spent on this can save you a similar effort – although with the Winnipeg Jets vs. St.Louis Blues game on while I was doing this it may be tricky calculating the exact effort but I’m ballparking 4-6 hours that you’ll save!! So read on but whatever GREAT shot by Scheifele to win it in a shoot-out over the Blues!!!

So here’s how to start givn’r…

Fire up Codeply and click the settings icon.  Wiring up the Fabric brains is essential and we just need to set references to the CSS and JavaScript files.  I bet if Microsoft takes the Codeply team out for drinks we’ll see Fabric get baked in pretty fast like BootStrap and the rest so we wouldn’t have to do this manually.  I’m sure Jeremy Thake could get on this… So add two references to the Fabric CSS’esses via CDN in the External References section on the HTML tab:

https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css Codeply settings

And for the tricky bit: adding the third reference to jquery.fabric.js.  Buuuuut, since this component is not actively distributed over CDN you’ll have to get it from the full release package on GitHub and host that file yourself on your own webserver.  I’m using my own but if you reference it in your own projects and eat up my Azure credit with all the traffic coming from your test add-in then I’ll hunt you down and make you listen to a boring history of Outlook legacy forms development. Anyway here’s what I came up with for a sample project: it’s a simple mashup of some random Fabric components within Bootstrap Wells and Labels: Codeply plus Fabric is like when the chocolate met the peanut butter Anyway, feel free to fork my Codeply (yeeeesh that sound’s aggressive) to see how it’s done and come up with your own face melting mix of Fabric and Bootstrap or whatever other monstrously rockin’ codebeast you come up with.

Cheers! \m/

Rocker Logo Red 64x64


Eric Legault

Microsoft Outlook MVP (15 yrs). Author: Microsoft Office 2013 Pro Step By Step. Consultant/speaker/Outlook add-in builder/SharePoint pioneer. Guitarist: Maiden Canada (Iron Maiden tribute band)

You may also like...

1 Response

  1. DutchDan says:

    Great stuff! Many thanks!

%d bloggers like this: