[go: up one dir, main page]

image

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!

image

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.

image

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.

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*!

image

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

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.

image

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

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

image

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

image

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:

  1. Downloading and setting up (Must know)
  2. Headings, links, and buttons (Must know)
  3. Conquering the layout (Must know)
  4. Creating a standard sub-page (Must know)
  5. Creating a portfolio page (Must know)
  6. Creating a products page (Must know)
  7. Customizing the navbar (Must know)
  8. Making it responsive (Should know)
  9. Adding drop-down lists (Should know)
  10. Using tabs for switching content (Should know)
  11. Creating a homepage carousel (Should know)
  12. Optimizing and customizing (Should know)
  13. 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.

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.

image

image

image

image

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.

image

Now you can use Bootswatch with your Tumblr blog. Install directly from the page here: https://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!