Tools you need: W3 Schools color libraries and Bootstrap Studio for Web building

Color libraries and an integrated development environment for Bootstrap will make engineering your Web content a whole lot easier.

rusty tools wikipedia sa
Credit: Biser Todorov

I often find myself hacking away at web sites and today I have a couple of tools to share that have made my life easier. Well, slightly easier.

The first is a neat set of CSS libraries I discovered on W3 Schools. These libraries define commonly used color values for things like safety standards, highway signs, army camouflage colors, and so on. The libraries can be linked to your Web pages by referencing them directly:

<link rel="stylesheet" href=“http://www.w3schools.com/lib/w3-colors-highway.css">

.. and then by simply including the classes in your HTML you can use the predefined colors. Thus:

<div class=“w3-safety-red">DANGER</div>

… produces:

danger

Another useful and far more complex tool for engineering Web content is Bootstrap Studio, a desktop application for Windows 7+, OS X, and Linux, that makes it much easier to build Web content based on the Bootstrap framework than doing so by hand.

twitter bootstrap under firefox 32

Twitter Bootstrap under Firefox 32

If you haven’t explored Bootstrap it’s an excellent foundation for creating responsive, mobile-aware web pages and arguably, at current, the most popular framework around. Created by Twitter developers and released as open source in 2011, Bootstrap was designed to solve the company’s internal struggle with too many development libraries. The offspring of the first version of Bootstrap, Bootstrap 3 (the version currently supported by Bootstrap Studio) is a 12-column design that has evolved to be mobile-first and implements “flat design”. Compatible with all of the leading Web browsers though not on all platforms, Bootstrap focusses consistent, elegant styles and the use of  reusable and jQuery-based components.

What Bootstrap Studio brings to the party is essentially an Integrated Development Environment that’s slick and beautifully designed. It comes with a large number of components for building responsive pages including headers, footers, galleries, slideshows along with the basic elements such as spans and divs.

Bootstrap also holds your hand by making it easy to drag and drop components but only to locations where they can logically be used. You can import existing Web content, add your own CSS elements, create your own components (which can be linked across multiple pages so that updating, say, a footer changes all linked footers), edit JavaScript, use Google Webfonts, … the list of features is huge.

Currently Bootstrap Studio is priced, extremely reasonably, at $25 which includes one year of free upgrades. The license allows you to install the software on up to three machines you own without any commercial limitations. If you want to test drive Bootstrap Studio, a Web-based demo is available. Bootstrap Studio gets a Gearhead rating of 5 out of 5.

Comments? Thoughts? Drop me a line or comment below then follow me on Twitter and Facebook. And sign up for my new newsletter!

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.
Related:
Must read: Hidden Cause of Slow Internet and how to fix it
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.