Originally posted at http://rogerpincombe.com/ribbon on June 8, 2011
I have created an implementation of the Office 2010 Ribbon toolbar that can be used in any website. It is written in HTML, CSS, and JS. Try a demo at http://okgodoit.com/ribbon/ or watch the video at http://www.youtube.com/watch?v=5YOpn2W-fQ8.
- Default (silver and blue) and alternate (silver and red) themes
- .less styling so you can make your own themes easily
- 2010-style Backstage feature (optional)
- 2 button sizes
- Buttons can have a disabled state
- Tabs, sections, and buttons can all have custom HTML (such as bold or entities) in their titles
- Optional hot and disabled icon states
- Full HTML in ScreenTip (tooltip) supported
- So far I’ve tested it in Chrome, Firefox, Safari, and IE 8+.
- Uses the jQuery framework.
There’s still a lot of work left to be done, but I wanted to get it on here.
Please note that you legally should license the ribbon UX from Microsoft (for free) at http://msdn.microsoft.com/en-us/office/aa973809.