I love Twitter Bootstrap and I love creating Orchard Modules that support it. A lot of my Orchard Training is using an Orchard CMS Bootstrap Theme and various Orchard Modules for it. Earlier I mentioned the Bootstrap Carousel Widget for Orchard CMS, which is just one of a number of widgets. Late last night I created a Bootstrap Skills Widget for kicks.

Twitter Bootstrap Skills Widget for Orchard CMS

Bootstrap has a number of components and one of them is the progress bar. The progress bar is what you often see used in Twitter Bootstrap websites to denote a skill and the expertise one has in that skill. If you're an expert in Orchard CMS for example, you may use a progress bar to denote that.

Orchard CMS Expert

If you're a freelance web developer, you may want to list your skills on your professional website so clients know if you're a good fit for their project. A handy-dandy skills widget would make this simple if your Orchard website theme was based on Bootstrap. After entering your skills the results look like this.

Twitter Bootstrap Skills Widget for Orchard CMS

I'm guessing a dubstepping mime is hard to come by so these skills are definitely worth sharing on your Orchard website.

Entering Your Skills

I went with a really simple and crude method of entering skills. I used the "big 'ol textarea" approach just like the Warmup Module and Enumeration Field in Orchard where you enter data separately on each line. I've never used this approach before and don't recommend it in general. However, in this case, I like the simplicity both from a development and user perspective. If it begins to annoy me, I'll change it :)

Custom Orchard CMS Widget to Display Skills


Anyway, this is just good fun developing various custom Orchard CMS widgets and modules for Twitter Boostrap during the evenings.