jQuery UI Bootstrap is an open-source effort by @addyosmani to introduce the Bootstrap styling into the standard jQuery UI widgets.  It covers many of the widgets available on the jQuery UI website including:

• Accordion
• Tabs
• Buttons and Button Sets
• Horizontal slider
• Progress Bar
• Dialogs
• Icons
• Date Picker

Whilst it’s still a work in process, what’s available already is fantastic and I’d love to see where this project goes.  It’s the next logical step for the Bootstrap framework; we have the standard web elements and layouts, now it’s about making those pages interactive using one of the most popular widget libraries available, jQuery UI, and making that look like the rest of the site…well it just makes good sense.

Bootstrap

Here’s a quick introduction to Bootstrap for those that haven’t yet heard of it, or aren’t sure what it does.

Bootstrap is a prototyping framework introduced by Twitter in mid-2011.  It’s aimed at making more consistent browsing experience for users as they browse various sites and applications on the web.  It’s free, open-source, and uses LessCSS making it a breeze to modify to suit your own needs.

Since it’s launch, it has been very well received by the developer community, and I’ve noticed it being adopted by many popular websites and open-source software including:

• Concrete5
• CodeAcademy
• WHMCS

I’ve even used it on the Cube Websites website for the form elements and as a grid system.

Get Started

• jQuery UI Bootstrap
• jQuery UI Bootstrap on GitHub
• Bootstrap

jQuery UI Bootstrap seems like a great idea, and has a lot of potential for making Bootstrap even better.  I’ll definitely be trying it on my next project involving UI widgets.  Whilst it looks fantastic already, I’d love to see where it goes from here.  One of the things I’d like to see is the stylesheets done in Less so that the widgets can be customised to look exactly how the web designer wants.

The post jQuery UI Bootstrap – A Bootstrap-themed kickstart for jQuery UI widgets appeared first on Cube Websites.

To use Less on a website you have 2 options:

1. Use JavaScript to compile on-the-fly.  This isn’t really recommended as you’re now relying on JavaScript for your website to look the way it should.  It also creates additional overhead as your page needs to load in the JS file, load your less stylesheet and finally render your stylesheet by parsing it through the Less Javascript library.
2. Compile your Less stylesheet into CSS, and include is as a normal stylesheet.

The compilation method is obviously the best option as you get the benefits of using Less, and then using it as any other CSS stylesheet.

Whilst the compiled method might be great for when you’ve finished developing, during development you’d still have to use the Less JS method or compile your Less file into CSS each time you make modifications, which can easily become tedious.

This is where SimpLESS comes in.  SimpLess is real-time Less compiler.  You simply drag and drop your less file(s) into the app, and it recompiles your Less file into a CSS file every time you save it.

This app is totally free, open-source and available on Windows, Mac and Linux. As well as doing the compilation, it minifies your CSS too saving you precious bytes during HTTP requests.

Download SimpLESS
Fork SimpLESS on Github

The post SimpLESS – A Free Open-Source LESS CSS Compiler appeared first on Cube Websites.