(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…
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: 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.