Bootswatch

Flatly: A Flat Theme by Jenil Gogari

Thu, 16 May 2013 07:00:51 -0400

I’m pleased to announce that Flatly is the newest theme in the Bootswatch library (this time for real). Contributed by Jenil Gogari, Flatly is based on the flat UI trend that’s currently making waves in the web design world.

Why don’t you try Flatly out for your next Bootstrap project!

Geo: A Timeless Bootstrap Theme from Divshot

Mon, 01 Apr 2013 13:22:00 -0400

Introducing Geo, a new Bootstrap theme by Divshot. Combining state-of-the-art web technologies with impeccable taste, Geo takes Bootstrap to the next level.

Features include:

Subtle textured background
Built-in library of badges
Dynamic graphical effects
New components such as marquee and blink

You can check out Geo here.

Smashing Magazine article: Customizing Bootstrap

Tue, 12 Mar 2013 12:11:22 -0400

If you’ve ever had an interest in customizing Bootstrap — whether to tweak its defaults or create a whole new theme — then check out my new article on Smashing Magazine. It shares various approaches to customization, and some tricks I learned on the way to making Bootswatch. As always, thanks for your support!

Read the article and share your comments here.

Shamrock: A limited edition theme celebrating St. Patrick's Day

Fri, 01 Mar 2013 08:57:00 -0500

In honor of Saint Patrick, I downed a pint of Guinness and created a new theme called Shamrock. It’s only available until March 17, so get it while it’s green*!

*Although you can always get it on GitHub if you know where to look.

Bootswatch Year 1

Mon, 25 Feb 2013 10:01:00 -0500

One year ago, Bootswatch was born.

I had just used Bootstrap for a small site, and it seemed that everyone else was using it too. I searched for a Bootstrap theme though, and was surprised that I couldn’t find a single one — all the more so given that Bootstrap was written in LESS and practically begging to be customized.

And so over a weekend, I hammered out a few themes. After being featured on the front page of Hacker News, it snowballed from a weekend project into, well, a year-long project and counting. And in that time, the themes evolved, others built on top of them, and the site notched over a million visits!

Graphs are always fun, so in celebration of this momentous occasion, I present the relative popularity (in downloads) of the themes over the past year.

And in the spirit of the Oscars, I’d like to thank a few people for helping make it all possible:

The developers of Bootstrap, of course.
The contributors to Bootswatch: jostylr, zmaril, pinchyfingers, erydo, j0k3r, romanalexander, and geraldhiller.
The sister sites: BootstrapCDN, Built With Bootstrap, and WrapBootstrap.
The classy sponsor: AdPacks.
Last but not least, the community that makes use of the themes, submits plenty of issues, and offer words of support.

There’s good stuff on the way in year 2, so stay tuned.

Subnavs in Bootstrap 2

Sat, 29 Dec 2012 23:46:12 -0500

I’ve gotten a number of inquiries about how to implement subnavs like the ones used on Bootswatch. Subnavs are actually a holdover from the old Bootstrap docs, although they never were an official component and likely never will be.

Here’s everything you need to get subnavs working with your Bootstrap 2 site:

https://gist.github.com/4394162

Book Review: Twitter Bootstrap Web Development How-To

Fri, 21 Dec 2012 10:54:49 -0500

I was recently asked to review Twitter Bootstrap Web Development How-To by David Cochran. Given it’s the first (and to date, only) book on the subject of Bootstrap, how could I refuse?

How-To was released last month by Packt, a publisher with a vast library of highly focused and timely books about open source software. With Bootstrap’s ascent in the world of frontend web development, this release was only a matter of time.

At 68 pages, it’s not a lengthy tome, but it hits on a variety of topics:

Downloading and setting up (Must know)
Headings, links, and buttons (Must know)
Conquering the layout (Must know)
Creating a standard sub-page (Must know)
Creating a portfolio page (Must know)
Creating a products page (Must know)
Customizing the navbar (Must know)
Making it responsive (Should know)
Adding drop-down lists (Should know)
Using tabs for switching content (Should know)
Creating a homepage carousel (Should know)
Optimizing and customizing (Should know)
Uploading, testing, and launching (Must know)

This content is bookended with a nice preface giving context to Bootstrap’s soaring popularity, and a closing chapter on cross-platform testing. If you’re familiar with the official Bootstrap documentation, you may recognize that much of the rest of the book (and then some) is already covered there.

But what the book contributes is in its format. The official docs provide code examples accompanied with concise explanatory text. How-To, in contrast, guides you through a step-by-step process for building your first Bootstrap pages, using clear and approachable language. Take the examples pages. The official docs provide these as-is, leaving it to you to download, inspect, and modify them. How-To takes your hand and leads you through this process.

How-To is not a comprehensive guide on all things Bootstrap. If you’re an intermediate or advanced developer, looking to wring the last drop out of Bootstrap’s capabilities or dive into the LESS source, this book is not for you (for example, chapter 12 on customization uses the official web-based customizer). But if you’re a beginner who wants more guidance than the official docs offer, then How-To will give you that gentle introduction.

Twitter Bootstrap Web Development How-To is available in both print and digital formats, on Packt and Amazon.

Cosmo: A free Metro-inspired theme for Bootstrap

Mon, 26 Nov 2012 08:00:47 -0500

I’m pleased to announce Cosmo, a brand new Bootstrap theme inspired by Metro. Cosmo features bright colors and no-frill components reminiscent of Windows 8.

You can jump right in and use it exactly like you would use standard Bootstrap. To really get the Metro look though, try using Font Awesome, sizing up your glyphicons, and combining them with the new .btn-block class.

Check out Cosmo here.

Bootstrap Roundup: November 2012 Edition

Wed, 07 Nov 2012 12:44:01 -0500

A whole ecosystem of tools and services has sprung up around Bootstrap. To help you keep up with all the goings-on, here’s a roundup of interesting projects I’ve come across lately.

Jetstrap is a web-based tool for building Bootstrap pages. It has a slick drag-and-drop interface but still outputs clean code. Whether you’re comfortable with code or not, it’s a major time-saver, so check it out.

Bootstrap theme rollers are getting better and better. Two of the best yet are Bootswatchr and Bootswatcher (no relation). The former makes it dead simple to experiment with LESS, while the latter lets you to take a Bootswatch theme as a starting point and modify it.

A couple of projects using Bootswatch that might be of interest to you. Strapdown.js is a library for generating Markdown pages. FusionLeaf is an open-source CMS geared toward developers.

Work has started again on jQuery UI Bootstrap, a jQuery UI theme that’s compatible with Bootstrap. How great would it be to seamlessly use these two great frameworks together? They are seeking developers to help bring it up to date though, so stop by and see if you can contribute.

Finally, Bootswatch themes have been updated to 2.2.1. Check out the Bootstrap blog post to see what’s been changed in 2.2.

A Tumblr Theme for Bootswatch

Tue, 25 Sep 2012 22:44:00 -0400

Now you can use Bootswatch with your Tumblr blog. Install directly from the page here: http://www.tumblr.com/theme/36370

In the theme options, leave the “Bootswatch Theme” field blank or enter default to get the standard Bootstrap theme (like the one here on the Bootswatch blog). Input the name of a Bootswatch theme (amelia, cerulean, cosmo, cyborg, journal, readable, simplex, slate, spacelab, spruce, superhero, united) to activate a different look. There are also settings to toggle responsive mode and alternate navbars.

The theme is modified from the Bootstrap Tumblr theme by Mike Jarema. If you encounter any issues, let me know me at @thomashpark. Enjoy!

Bootswatch on BootstrapCDN

Mon, 03 Sep 2012 09:10:00 -0400

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.

Alternate navbars and Bootstrap 2.1.0

Wed, 22 Aug 2012 00:06:00 -0400

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.

A Bookmarklet for Bootswatch

Thu, 16 Aug 2012 12:10:00 -0400

Announcing the Bootswatchlet. This bookmarklet makes it quick and easy for you to apply different swatches to yours or someone else’s Bootstrap page.

Installation

Scroll down to the bottom of the Bootswatch homepage. Drag the “Bootswatchlet” link to your bookmarks bar.

Usage

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.

Caveats

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.

Source

If you’re interested, you can check out the gist for the bookmarklet.

Simplex and Journal get makeovers

Sat, 04 Aug 2012 18:09:35 -0400

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.

2.0.4 and watcher.rb

Thu, 14 Jun 2012 22:41:57 -0400

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 and StyleBootstrap: live Bootstrap customization

Sat, 09 Jun 2012 23:55:00 -0400

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 API

Tue, 01 May 2012 10:40:00 -0400

Bootswatch now offers an API, making it easier than ever to integrate with your platform!

Request

Send your request to:

http://api.bootswatch.com

Response

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.

Demo

Here’s a simple demo, with templating by mustache.js.

Notes

My thanks to James Taylor for cors-lite.

Kickstrap: Bootstrap Enhanced

Sun, 15 Apr 2012 10:48:22 -0400

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!

Reinvented: Simplex

Mon, 19 Mar 2012 22:08:00 -0400

Simplex: mini & minimalist

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.

Bootswatch-compatible template from WrapBootstrap

Mon, 12 Mar 2012 10:00:05 -0400

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.