Office-Ribbon-2010 - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #typescript #llm #machine-learning #deep-learning #docker #macos #nodejs #awesome #awesome-list #mcp #openai #open-source

Office-Ribbon-2010

(★ 114)

Office 2010 Style Ribbon Toolbar in HTML/CSS/JS

File Explorer

Download Latest Version (.zip)

- - bold.png
  - box.png
  - bullet-orange.png
  - bullets.png
  - delete-page.png
  - delete-table.png
  - italic.png
  - new-page.png
  - new-table.png
  - open-page.png
  - open-table.png
  - repeat.png
  - run.png
  - save-page.png
  - save.png
  - script.png
  - underline.png
  - web_sheet.png
- - bold.png
  - box.png
  - bullet-orange.png
  - bullets.png
  - delete-page.png
  - delete-table.png
  - italic.png
  - new-page.png
  - new-table.png
  - open-page.png
  - open-table.png
  - repeat.png
  - run.png
  - save.png
  - script.png
  - underline.png
  - web_sheet.png
- - bold.png
  - box.png
  - bullet-orange.png
  - bullets.png
  - delete-page.png
  - delete-table.png
  - italic.png
  - new-page.png
  - new-table.png
  - open-page.png
  - open-table.png
  - repeat.png
  - run.png
  - save-page.png
  - save.png
  - script.png
  - underline.png
  - web_sheet.png
- jquery.tooltip.min.js
- ribbon-red.css
- ribbon.css
- ribbon.js
.gitattributes
.gitignore
custom-color.chirp.less.css
custom-color.css
index-red.htm
index.htm
README.md
soft_button.css

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Office 2010 Style Ribbon Toolbar in HTML/CSS/JS
===============================================

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.

![example](http://rogerpincombe.com/wp-content/uploads/2011/06/light.png "example")

Some highlights
---------------

- 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.

Shameless plug for my new project
---------------------------------

Do you want to look up people's personal information?  Try my new service, AllThePeople.net.  [AllThePeople is the personal contact information database](http://www.allthepeople.net) that allows you to look up information for anyone, including [personal email addresses for celebrities like Felicia Day](http://www.allthepeople.net/felicia-day), [birthdays of interesting entrepreneurs](http://www.allthepeople.net/tony-amoyal), and [the phone number of pioneers like Steve Wozniak](http://www.allthepeople.net/woz-woz).