Bootswatch

5.3.1 Plus RTL and Source Map Support

Fri, 28 Jul 2023 10:32:53 -0400

Bootswatch updates to Bootstrap v5.3.1, which includes minor fixes and enhancements related to color mode.

In addition, Bootswatch adds supports RTL and source maps. RTL stylesheets and source maps are now available for download on the official website, GitHub repository, and npm.

Dark mode appears with 5.3.0

Thu, 01 Jun 2023 10:16:18 -0400

Version 5.3.0 has been released, and most significantly, support for dark mode and other colors modes. Check out the Bootstrap blog for full details on how it works.

There are some minor bugs to iron out, some refactors to be made with CSS variables, and some decisions to be made regarding how to handle existing dark themes with minimal disruption, but most of the themes have excellent dark mode support out of the box.

The site now has a dark mode toggle menu, so go preview dark mode on your favorite Bootswatch theme today!

Bootswatch releases 5.0.0

Wed, 05 May 2021 23:09:46 -0400

Bootswatch hit a new major milestone with the release of version 5.0.0!

This brings the themes in line with the latest Bootstrap. To get a rundown of all of the changes this brings, from the deprecation of jQuery to improved RTL support, check out Bootstrap’s 5.0.0 release page.

New Themes

Bringing the grand total of themes to 25, we’re pleased to announce four new free Bootstrap themes!

Zephyr is a breezy, beautiful theme that’s at home in any context. Inspired by the crisp styles of Tailwind UI.

Morph lets you easily apply a neumorphic layer to the web.

Quartz takes things in a new direction with a glassmorphic layer that plays well with bright, vivid colors.

Finally, Vapor unlocks a retro, cyberpunk aesthetic for your pleasure.

Check out the new themes, and see your old favorites updated to v5, on the homepage!

Bootswatch 5 hits beta

Fri, 22 Jan 2021 18:08:49 -0500

Bootswatch has hit version 5.0.0-beta1! This release coincides with the next major update to Bootstrap, removing jQuery as a requirement along with a host of other changes.

Visit the Bootstrap blog for a summary and follow the progress on the v5 branch of the Bootswatch GitHub repo.

Bootswatch 4 officially arrives

Wed, 28 Mar 2018 11:38:27 -0400

The official release of Bootstrap 4 finally arrived this past January, and with that came a nice update to the Bootswatch themes.

Check out the Bootstrap blog for a run-down of the changes in 4.0.0 including new utility classes, fresh docs, and more examples.

Bootswatch 4 plus five new themes

Tue, 07 Nov 2017 10:00:35 -0500

We’re pleased to announce that Bootswatch has been updated for Bootstrap version 4.0.0-beta.2.

Changes

The update introduces a slew of changes to the underlying Bootstrap framework, including simplified markup, a jump from LESS to SASS, the addition and subtraction of several components. You can see a rundown of Bootstrap 4′s changes here.

Bootswatch themes have been updated to keep in step with Bootstrap and are available today! And if you’re not ready to make the big leap just yet, themes for v3 remain available.

New Themes

As if that’s not exciting enough, five brand new themes are being released.

Lux

Lux is a restrained theme for when your site needs a touch of class.

Minty

Minty is a theme for when your site needs a fun and approachable feel.

Pulse

Pulse is a general theme with a trace of purple that runs throughout.

Sketchy

Sketchy has a hand-drawn look suitable for mockups or playful sites in general.

Solar

Solar is a spin on the Solarized color scheme used in many code editors. Turns out it makes for a nice web theme as well.

Lastly, old favorite Paper has been renamed to Materia, to better reflect its roots, and Readable has a spiritual successor in Litera.

Support

Moving from v3 to v4 is a major undertaking, with many hours spent making it happen. And the latest additions bring the grand total to 21 themes, all of which require ongoing maintenance.

If you find Bootswatch useful for your day-to-day work, please consider supporting this open source project by making a donation here.

We hope you enjoy the update!

Learn CSS Grid with Grid Garden

Mon, 03 Apr 2017 14:26:30 -0400

I’ve released a new game for learning CSS grid called Grid Garden.

CSS grid brings columns and many other powerful layout features that we’ve relied on frameworks like Bootstrap for to native CSS! Browser support is on the upswing, with CSS grid landing in Firefox, Chrome, and Safari just last month.

Grid Garden is a follow-up of sorts to Flexbox Froggy, which is a coding game for learning CSS flexbox, prominently used in version 4 of Bootstrap.

Whether you use Bootstrap, another framework, or vanilla CSS, you’ll want to be familiar with CSS grid. Dive into it with Grid Garden!

Learn CSS Flexbox with Flexbox Froggy

Thu, 03 Mar 2016 16:38:30 -0500

I’ve created a coding game called Flexbox Froggy to help you brush up on flexbox. If you haven’t heard yet, flexbox is a powerful new CSS module for positioning that’s available in browsers today, and that will debut in the next major update to Bootstrap. So you’ll want to get familiar with it asap.

See if you can beat Flexbox Froggy! And for an extra challenge, try its spiritual sequel created by Channing Allen, Flexbox Defense.

Changes to Bootswatch API

Thu, 15 Oct 2015 10:00:36 -0400

If you’re using the Bootswatch API, please update your request to https://bootswatch.com/api/3.json. The old endpoint will cease to exist on December 16, 2015.

Up to this point, the API has been made available through AppFog. However, they recently announced that they’ll be retiring the free tier this December. Big thanks to AppFog for the service they provided.

The new URL is live, and as a bonus, available via https. More information at http://bootswatch.com/help/#api.

Find the right Google Web Fonts for your project with FontCDN

Wed, 05 Aug 2015 10:00:26 -0400

FontCDN is a new tool for those of us who love Google Fonts as a service, but want a faster way to grab the code we need. We built FontCDN so you can easily search their 700+ web fonts and quickly grab any font’s HTML and CSS.

For more on the motivations behind FontCDN, check out the post A Better Way to Search Google Fonts. If you’re interested in figuring out which platforms you should support when building tools for other web developers, check out the Bootswatch and GlyphSearch data presented in the post Developing for Web Developers.

FontCDN is available at fontcdn.org.

Trying out themes on JSFiddle

Thu, 18 Jun 2015 09:40:16 -0400

On any theme page, you can now click “Open Sandbox” to open a JSFiddle page with that theme and any dependencies pre-loaded.

Coupled with our snippets feature and Bootsnipp, it’s now easier than ever to experiment with the themes.

Material design in Bootstrap with Paper

Thu, 05 Feb 2015 09:40:00 -0500

Paper brings the material design’s principles of transformation and movement to Bootstrap. Best of all, Paper’s animations are implemented in pure CSS, meaning no custom markup or JS is needed. In case you missed them, here’s a quick tour of these effects in action.

Buttons

When hovering over a button, a shadow edges in. On click, the shadow fills the button.

Input Fields

Input fields are marked by a bottom border, which transitions to a wider, more colorful border when focused.

Checkboxes

Paper makes use of custom checkboxes that transform in shape and color when selected.

Radio Buttons

Radio buttons are much the same.

Progress Bars

Not an animation, but progress bars in Paper have contextual backgrounds.

Floating Labels

We weren’t able to implement floating labels in pure CSS, but you only need to add a bit of code to achieve this effect. Check out the source.

A big thanks to Ryan Walters for his awesome work on the checkboxes and radio buttons, and sharing his code for floating labels.

Bootswatch 3.3.2 Released

Fri, 23 Jan 2015 09:40:21 -0500

With the release of Bootstrap 3.3.2, Bootswatch is not far behind. You can check out the latest Bootstrap changes here.

In addition, a number of Bootswatch issues have been addressed, including:

#358: Select inputs in Paper are missing arrows in Chrome
#375: Paper: Input button does not render properly on iOS 8
#380: Can we move the bootstrap-sass-official to devDependencies?
#381: Match also “contenteditable” with class “form-control”
#383: Paper: select input-sm
#388: Padding issue with .navbar-brand

Thanks to the bug reporters and contributors!

Bootswatch Adds SASS Support

Mon, 17 Nov 2014 10:00:39 -0500

Bootswatch is supporting SASS! With Bootstrap offering an official SASS version for some time now, it’s only right Bootswatch did the same. You can now download _variables.scss and _bootswatch.scss, in addition to the usual CSS and LESS options.

Also available is a new grunt task, convert_less, that can be used to convert all LESS files in your repo to SASS.

Credit goes to Corey Sewell, who’s generously submitted a pull request with the SASS source and ensured that LESS to SASS conversion work as smoothly as possible.

Giveaway: Bootswatch Merchandise

Mon, 15 Sep 2014 10:00:00 -0400

We’re giving away Bootswatch merchandise this month! Three prize packs are up for grabs that include a t-shirt and stickers that feature the new logo.

There are two easy ways to enter the giveaway:

Follow @bootswatch on Twitter.
Tweet about Bootswatch

You’re welcome to do both to double your chances. Winners will be picked at the end of September.

T-shirts and stickers are also available for purchase, if you’d like to show your love for the project. Several t-shirt designs are available based on themes including Cyborg, Flatly, and Slate (pictured above). Head over to the Support page for more details.

Update

Winners have been chosen and contacted via Twitter. Thanks to all for participating!

New Themes: Paper and Sandstone

Wed, 13 Aug 2014 11:13:31 -0400

Two new themes have been added to the Bootswatch library: Paper and Sandstone.

Paper takes inspiration from Google's material design manifesto. Features include animated form inputs and tabs, as well as progress bars with matching background colors. No button click animations yet, but if you’re up to the task of recreating them with CSS only, please contribute.

Sandstone offers a warmer palette of tans, browns, and greens in this cold world of blues and grays.

But Bootswatch giveth, and Bootswatch taketh away — Amelia has been deprecated. For now, you can still access it directly here and through the API, but it will be removed in the next update.

Win one of 5 copies of the ebook Extending Bootstrap

Mon, 16 Jun 2014 10:01:00 -0400

Bootswatch is giving away five copies of Extending Bootstrap by Christoffer Niska.

Extending Bootstrap covers more advanced ground compared to Packt’s previous offering, Twitter Bootstrap Web Development How-To. Topics include when and how to apply Bootstrap themes, make custom builds using LESS and Grunt, and create custom JavaScript plugins. It touches on some similar topics as my Smashing Magazine article on customizing Bootstrap, but adds highly guided walkthroughs and examples.

To find out more about the book, visit the publisher site or Amazon.

Enter to Win

Five lucky entrants will win an ebook copy of Extending Bootstrap. Enter to win using the form below by Friday, June 27.

Winners will be selected at random. Please do not submit multiple entries. Your email address will be used for this contest and nothing else.

Don’t forget to tell your friends and colleagues about this giveaway, and subscribe by RSS or email to get future updates. Good luck!

Giveaway Entry Form

Update

The giveaway has ended and the winners will be contacted by email.

5 simple design tips to improve your Bootstrap site

Thu, 03 Apr 2014 10:00:00 -0400

It’s tempting to use Bootstrap for your project and be done with the design, especially if you don’t come from a design background. What you often end up with resembles something like this (view live):

But if you care about how your content is received, don’t let Bootstrap be the final word on your design. A small effort here will pay off in spades.

To help with this, here are five simple tips to get the most out of Bootstrap. Don’t worry: you won’t have to dig into LESS and customize the Bootstrap source.

As I go through the list, I’ll apply each piece of advice to the example above.

1. Limit lines of text

When it comes to typography, a common rule of thumb is to limit lines of text (i.e., the measure) to 50-75 characters for improved readability. To put it in Bootstrap terms, your text should use 6 columns at most, given the default 14 pixel font size. Using all 12 columns for long-form text results in 170-character lines, well over the optimal range.

Here, I’ve reduced the text to 8 columns while bumping the font size up to 20 pixels. (view live)

2. Use plenty of whitespace

Adding whitespace to your sections, paragraphs, etc. can dramatically improve the readability of your site. By default, Bootstrap often doesn’t provide sufficient margins and paddings. Not that I blame Bootstrap — it can’t know in advance how your content and components are going to fit together, which is what determines the effective use of whitespace.

In my example, I’ve increased the paragraph top and bottom margins and line height to 1.6em. (view live)

3. Less is more…

When it comes to interface design, less is more. You want to bring the content to the forefront. Use only a few fonts, a few colors in your palette, and even as few Bootstrap components as necessary. The slighter the differences are, the more likely it is that you should eliminate them by combining styles.

I noticed slight discrepancies with the font size, weight, and color between the main paragraph text, the lead, the button text, and the navbar brand in my example. I’ve made them consistent here. (view live)

4. …Except when it comes to images

There is one exception to the “less is more” maxim: when it comes to images, bigger is better. For example, if you have a jumbotron at the top of your page, consider replacing it with a full-width background image or pattern. background-size: cover is your friend here.

In my example, I simply darkened a photo by 75% to contrast the white text and set it as the background image. (view live)

5. Use a theme

Last but not least, consider using a Bootswatch theme to give your site a fresh look. This gives your Bootstrap components a distinct style with minimal effort. Unless you’re confident in what you’re doing, stick with a more neutral theme like Lumen, Darkly, or Yeti.

Here, I’ve replaced the default Bootstrap stylesheet with Yeti, giving the page’s button and typography a new spin. (view live)

Putting it all together

Here’s an animation that shows the progression. Granted this is a basic example, but these same principles can be applied to any website. Keep them in mind and even if you’re not a design guru, hopefully they help you take your Bootstrap-based site to the next level.

Credits

Photo by David Masters. Text courtesy of Wikipedia.

April 1 Fun

Tue, 01 Apr 2014 10:08:07 -0400

Know of a Bootstrap site that needs sprucing up, whether yours or someone else’s? Hope you haven’t forgotten about Geo, a Bootstrap theme for the ages. Cupid and Shamrock also make effective themes on this special day…

Geo for 2.3

Cupid for 3.1

Shamrock for 3.1

Previewing Bootstrap Snippets with Bootswatch Themes

Mon, 24 Mar 2014 11:31:00 -0400

Earlier this month I mentioned Bootsnipp, a repository of HTML snippets for Bootstrap. Browse the collection and you’ll find contact forms, timelines, pricing tables, and more that you can copy and paste into your own project. Bootsnipp also provides a handy drag-n-drop form builder and button builder.

What I wanted to bring your attention to today is Bootsnipp’s new theme selector. For any HTML snippet, you can now switch between plain Bootstrap and any of the Bootswatch themes. In the screenshot above, I’m previewing the login snippet with Lumen, and it takes seconds to check how it would look with Cyborg, Flatly, and other themes.

Bootswatch styles, Bootsnipp markup, and Bootstrap as the interface between the two. Now that’s a powerful combo.