BootstrapCDN has been serving up many gigabytes of Bootstrap and Font Awesome using NetDNA’s content delivery network. Starting with 2.1.0, Bootswatch is joining their ranks. Check out this handy resource, and don’t miss the BootstrapCDN blog for some Bootstrap analytics.
Bootstrap has just been updated to 2.1.0, and one of the most obvious changes is the new white navbar. For those who prefer the old, fear not: you can bring it back by adding the .navbar-inverse class.
The Bootswatch themes haven’t retired their navbars yet, but with the latest update, they introduce alternate navbars. Simply add the same .navbar-inverse class your navbar to try on a new look! Check out the screenshot below, or view them live.
Other major changes that 2.1.0 brings include submenus, an affix JS plugin, and a larger default font-size. You can read all about the changes on the Bootstrap blog.
Or visit Bootswatch to see all of the new navbars.
Announcing the Bootswatchlet. This bookmarklet makes it quick and easy for you to apply different swatches to yours or someone else’s Bootstrap page.
Scroll down to the bottom of the Bootswatch homepage. Drag the “Bootswatchlet” link to your bookmarks bar.
While on a Bootstrap page, click the bookmarklet in your bookmarks bar to activate a random theme. A dropdown menu appears in the top-right corner where you can specify another theme. Click the bookmarklet again to toggle it off.
Try it out on the current page, Twitter Bootstrap’s demo page, or any other page built with Bootstrap.
The bookmarklet won’t work perfectly with bootstrap-responsive.css, since it appends the stylesheets after it.
For pages that are heavily customized and use Bootstrap more as an underlying framework than a theme, a lot of the swatch styles will be overridden.
There’s no substitute for attentive design tailored to the content, even when using a theme. This bookmarklet is meant to give you a rough feel for how the page would look with a particular theme, not the optimal look.
If you’re interested, you can check out the gist for the bookmarklet.
Two Bootswatch themes have undergone makeovers, looking less like Bootstrap than ever before.
Simplex now sports a lighter and sleeker look, an orangered accent, and Josefin Sans for its typeface.
Journal gets serious, adopting more of a newspaper feel. Headers use the sans-serif News Cycle, while body text uses good old Georgia.
The previous versions of Simplex and Journal are available on GitHub here and here.
Swatches have been updated for Bootstrap 2.0.4. Most relevant to Bootswatch, the minor bump introduces two new variables for styling .dropdown .divider.
In entirely-unrelated news, a script has been added to the swatchmaker that watches your Bootswatch LESS files and automatically rebuilds upon saving changes. Thanks to Zack Maril for the contribution.
Bootswatchr is a slick new tool for rolling your own Bootstrap swatches right in the browser. As you modify each variable, you get a live preview of the changes.
We’ve seen a similar service offered for several months already with StyleBootstrap, but each site takes a unique approach. Bootswatchr’s options map directly to Bootstrap’s variables.less, while StyleBootstrap presents options based on each component.
Do you see yourself using one of these sites? Which do you prefer?
Bootswatch now offers an API, making it easier than ever to integrate with your platform!
Send your request to:
This returns a themes array, and each theme has the following properties:
name “Amelia”description “Sweet and cheery.”preview “http://bootswatch.com/amelia/thumbnail "http://bootswatch.com/amelia/thumbnail.png”css “http://bootswatch.com/amelia/bootstrap.css”cssMin “http://bootswatch.com/amelia/bootstrap.min.css”less “http://bootswatch.com/amelia/bootswatch.less”lessVariables “http://bootswatch.com/amelia/variables.less”It also returns version, which gives the current version number of the themes.
Here’s a simple demo, with templating by mustache.js.
My thanks to James Taylor for cors-lite.
Kickstrap combines several open-source enhancements to Bootstrap, including icon fonts by Font Awesome, workflow tools by HTML5 Boilerplate, and themes by Bootswatch. It also adds a theme called Sandra, featured on the project site itself.
Kickstrap has just reached release candidate status, so check it out!
The new Simplex takes another step toward a clean and minimalist look. Notable features include a compact font and a gray background / white well color scheme. Wrap your main content in a well for a modern appearance.
Just released to the WrapBootstrap marketplace is Bootstrap Shopping Cart, a professionally designed template for use with e-commerce sites.
What’s notable about this is that it’s the first fully Bootswatch-compatible template available on WrapBootstrap. It even comes with a style switcher, so you can compare different swatches with just a click of the mouse. Try the switcher out for yourself in the live preview.