What is BalfRibbon?
I am so proud to finally be releasing a free to use ribbon for the web. This project was inspired by working in the classroom with Microsoft Office 2010. I then had a look at already existing projects such as the one found here.
Me being me, I decided I'd rather write my own one. I am so proud to announce, a fully working ribbon (more features will come in the future.)
Please note, although the ribbon runs in a frame here, it is not required. I simply do this so my own website stylesheets do not affect it.
This project was started on 23rd of November 2015 at 23.40 as a spontaneous project I suddenly thought of. Since then I have been using it in one of my own projects called ClickIt. I have built this lightweight ribbon bar in very little time, but I don't see any bugs being possible at this point in time.
At the moment, there are just a few themes. I only added the blue theme as an opportunity to test it out with the interface. It's quite nice, but it's really just for testing.
Features
BalfRibbon supports almost any HTML/CSS element with any type of styling. This means that you can add a BalfPick box, a custom radio button or your own style of input boxes.
Getting started
Getting started with BalfRibbon is easy and the best way to do this is by using the generator on this page.
By using the provided CSS and JavaScript alongside the HTML from the generator, it should be easy to get started with BalfRibbon.
Sample HTML
The following is an example of BalfRibbon found on my own Secure Drive.
<div id="ribbon_container" style="overflow:auto;">
<div class="balfribbon" style="min-width:600px;">
<ul class="ribbon_tabs">
<li>
<a>Home</a>
</li>
<li>
<a>Edit</a>
</li>
<li>
<a>View</a>
</li>
<li>
<a>Directory</a>
</li>
</ul>
<div class="ribbonbar">
<div class="ribbon_tab">
<div class="group">
<div class="title">
Navigation
</div>
<ul>
<li id="go_back">
<label class="large">
<img class="icon" src="/images/back.png">
<span>Go back</span>
</label>
</li>
<li id="go_up">
<label class="large">
<img class="icon" src="/images/up.png">
<span>Go up</span>
</label>
</li>
<li id="refresh">
<label class="large">
<img class="icon" src="/images/refresh.png">
<span>Reload</span>
</label>
</li>
<li id="download" style="opacity:0.5">
<label class="large">
<img class="icon" src="/images/download.png">
<span>Download</span>
</label>
</li>
<li id="getlink">
<label class="large">
<img class="icon" src="/images/link.png">
<span>Show link</span>
</label>
</li>
</ul>
</div>
<div class="group">
<div class="title">Preview</div>
<ul>
<li id="preview_file" style="opacity:0.5">
<label class="large">
<img class="icon" src="/images/eye.png">
<span>Preview</span>
</label>
</li>
</ul>
</div>
</div>
<div class="ribbon_tab">
<div class="group">
<div class="title">
File management
</div>
<ul>
<li id="rename" style="opacity:0.5">
<label class="large">
<img class="icon" src="/images/pencil.png">
<span>Rename</span>
</label>
</li>
<li id="delete" style="opacity:0.5">
<label class="large">
<img class="icon" src="/images/delete.png">
<span>Delete</span>
</label>
</li>
<li id="move_file" style="opacity:0.5">
<label class="large">
<img class="icon" src="/images/cut.png">
<span>Cut</span>
</label>
</li>
</ul>
</div>
</div>
<div class="ribbon_tab">
<div class="group">
<div class="title">
Theme
</div>
<ul>
<li id="toggle_theme">
<label class="large">
<img class="icon" src="/images/brush.png">
<span>Toggle theme</span>
</label>
</li>
</ul>
</div>
<div class="group">
<div class="title">
Display
</div>
<ul>
<li id="toggle_list">
<label class="large">
<img class="icon" src="/images/list.png">
<span>List</span>
</label>
</li>
</ul>
<ul class="list">
<li>
<label>
<input type="checkbox" id="toggle_file_extension">
<span></span>
Hide file extensions
</label>
</li>
<li>
<label>
<input type="checkbox" id="toggle_file_types">
<span></span>
Hide file types
</label>
</li>
</ul>
<ul class="list">
<li>
<label>
<input type="checkbox" id="toggle_file_sizes">
<span></span>
Hide file size
</label>
</li>
</ul>
</div>
<div class="group">
<div class="title">
Full screen
</div>
<ul>
<li id="toggle_full_screen">
<label class="large">
<img class="icon" src="/images/full-screen.png">
<span>Full screen</span>
</label>
</li>
</ul>
</div>
</div>
<div class="ribbon_tab">
<div class="group">
<div class="title">
Management
</div>
<ul>
<li id="new_dir">
<label class="large">
<img class="icon" src="/images/folder.png">
<span>New folder</span>
</label>
</li>
<li>
<label class="large">
<form style="height:33px;width:60px;background:transparent;" action="/actions/upload.do" class="dz">
<img class="icon" src="/images/upload.png">
<input type="hidden" name="path" id="dzpath">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<span>Upload</span>
</label>
</li>
<li id="dirdownload">
<label class="large">
<img class="icon" src="/images/archive.png">
<span>ZIP all</span>
</label>
</li>
<li id="link_file" style="opacity:0.5">
<label class="large">
<img class="icon" src="/images/arrows.png">
<span>New shortcut</span>
</label>
</li>
</ul>
</div>
<div class="group">
<div class="title">
Information
</div>
<ul>
<li id="whereami">
<label class="large">
<img class="icon" src="/images/info.png">
<span>Show path</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
On the fly generation
The following sample is generated using my generator on the fly. The code generated is all 100% valid too.
Generator
Validate this page using the W3 validator by clicking here.
