Since the release of Flatly, Bootswatch has gotten lots of requests for a dark version. Well today I’m thrilled to announce Darkly.
As you can see above, Darkly keeps much of Flatly intact, while tweaking some of the styles to work with a dark background.
Hat tip to Jenil Gogari for his great work on this theme.
Check out Darkly now.
Now it’s quicker than ever to grab HTML snippets from Bootswatch. Simply hover over a component, click the button in the top-right corner, and copy code from the handy-dandy modal. No need to pull up the dev tools or consult the docs. Try it out now with Lumen.
Is there a Bootstrap component you’d like added to the preview pages? Spot a bug with this feature? File an issue, send me a tweet, or drop me an email.
While we’re on the subject of Bootstrap markup, two resources worth checking out are Bootsnipp, a collection of HTML snippets, and Start Bootstrap, free starter templates for your next site.
Bootstrap 3 takes a mobile first approach and is responsive right out of the box. This is convenient in most situations, but can make things harder when you don’t actually want to be responsive.
The official Bootstrap docs have instructions on how to to disable it for Bootstrap. They work the same for Bootswatch themes.
Remove this meta tag from your page if you’ve got it.
<meta name="viewport" content="width=device-width, initial-scale=1">
Use col-xs-* classes for any grid columns. A find and replace should do it.
Now you want to disable any media queries. You can do this either by overriding with CSS or re-building with LESS. I strongly recommend the latter.
To override the CSS, add the styles in following gist to your page. They’re based on the ones used in Bootstrap’s non-responsive example.
https://gist.github.com/thomaspark/8969079
You can see it in action here: http://jsbin.com/pubas/1
Note that this results in extraneous code, and there’s a good chance some responsive styles are missed. Moving from version to version might start to resemble a game of whack-a-mole.
To build a non-responsive version of a theme, open up variables.less and set @screen-xs-max and @grid-float-breakpoint to 0. Set .container to your desired width (e.g., 970 pixels) either in LESS or CSS. Re-build the theme and you’re all set.
Three new themes join the Bootswatch lineup!
Cupid is a theme with pink, pink, and more pink, to help you get in the spirit of Valentine’s Day. Don’t miss the frilly headers and panels. Available for a limited time only.
Lumen will be a more permanent fixture to the lineup. This super bright theme pushes back on the flat trend with buttons and other components that have a 3D effect.
Superhero, which was discontinued many moons ago, makes its triumphant return with a sleeker look and more sophisticated color palette.
Simplex and Readable have also received some refinements, so check them out.
Enjoy.
Using CSS Transitions to animate between Bootswatch themes might clobber your browser, but it sure is mesmerizing.
Check out the live demo and feel free to fork it on Codepen and experiment with other Bootstrap components.
Looks like we got some Foundation in our Bootstrap!
Foundation, if you haven’t heard, is a front-end framework similar to Bootstrap. Zurb has been doing an amazing job with Foundation for a very long time, and have just hit version 5. If you haven’t checked it out, do it now. Seriously.
I’ve always been a fan of Foundation’s styles, and their latest milestone inspired me to salute them with a new Bootstrap theme called Yeti.
Aside from obvious features like the color palette and typography, Foundation sports some little touches that Yeti brings over to Bootstrap. For instance, when a dropdown menu is used in a navbar or button, it inherits the styles. Yeti also has minimalist paginations and progress bars that haven’t been seen in a Bootswatch theme before.
So without further ado, here is Yeti.
Between Glyphicons and Font Awesome, we have plenty of amazing icons to choose from for our Bootstrap projects. GlyphSearch is a tool I created to help you search these libraries and quickly find the icons you need.
Check out GlyphSearch, and read more about the making of here.
Bootswatch has been updated to 3.0.0-rc2.
Bootstrap 3 continues to receive many refinements. This version brings significant changes that require you to change your markup for grid, navbars, buttons, alerts, labels, and panels.
I’m in the process of converting Bootswatch from Bootstrap 2.3.2 to 3.0.0, which you can preview right now. This process has meant a lot of labor first off, but also exposure to what’s new with Bootstrap 3. Here are some of the big wins I’ve observed.
Bootstrap 3 is much easier to theme. If you’re digging into the LESS, B3 offers more variables that propagate to multiple components in a consistent manner. For instance, B3 adds variables (@state-info-text) that are shared by forms and alerts.
B3 also eschews color names (@red) for more semantic state names (@brand-danger). This enforces greater consistency by removing one degree of indirection. The old path was #ff0000 -> @red -> danger; the new one is #ff0000 -> danger. Of course if you need a set palette, you still have the choice to set your own variables.
If you’re simply overriding the default CSS, that’s easier too thanks to the simplified code that comes with flat design. In many instances, you only need to override the property of interest (color or background-color), rather than playing whack-a-mole with borders, box shadows, and gradients that are coupled with it. And anecdotally speaking, the specificity of Bootstrap has loosened up, meaning you don’t have to use a five-combo selectors to override most things.
With fewer properties being used thanks to flat design, another benefit is the smaller file size. Bootstrap has gone from two files at 149kb/123kb minified to a single file at 86kb/69kb minified.
In addition to the flat design, the Bootstrap developers have worked hard at making the code as efficient as possible. To illustrate, look at Slate, one of the more skeuomorphic themes. It’s slimmed down from 155kb/130kb minified to 105kb/87kb minified.
One of the biggest changes driving B3 is a mobile first approach. While in B2 you had the option to go responsive or not, B3 assumes that you are.
While this will be a “gotcha” to people not accustomed to designing responsively (which you should be), the rest of us get a much more powerful grid system. Do you want to show 4 columns for desktop, 3 columns for tablets, and 1 column for phones? Move the left column to the right? No problem.
Another handy addition to B3 is the img-responsive utility class, which scales images up to their parent element as it resizes.
B3 adds some new components, including the list group. My only complaint with it is that I wish it were easier to get working with the ScrollSpy plugin.
Perhaps the change that elicited the most impassioned response was the switch from camelCase to hyphens. While the change did force me to unlearn some muscle memory, it wasn’t long before I had adjusted. And in the long term, hyphens seem more readable, and are certainly much easier for editing partial strings, like when changing “btn-primary” to a “btn-default”.
Overall, it didn’t take long to pick up on B3, despite some of the more arcane, less humane, class names. As Bootstrap developers, the majority of changes will stay hidden under the hood. Converting the Tumblr Bootstrap theme for this blog from 2.3.2 to 3.0.0 required only updating the navbar markup and column class names (span4 offset1 became col-lg-4 col-lg-offset-1). Here’s a useful migration guide.
As you can see, Bootstrap 3 offers a lot of wins. Even if you’re not in such a rush to update your existing projects, you should use your next project as an opportunity to give B3 a whirl.
With the impending release of Bootstrap 3.0, Bootswatch will be hot on its heels. You can expect an overhaul of the Bootswatch site, along with alpha versions of 3.0 themes, to go live in the coming weeks.
While we’re excited about this transition, one thing to watch for are hotlinks you’ve made in the past to the Bootswatch site. Bootstrap 3.0 represents a complete break from the 2.x API, which means that the updated themes will not be compatible with old Bootstrap markup.
Please update these links as soon as possible. You’ll be able to download the old versions of the themes at bootswatch.com/2/, or you can immediately start linking to them using BootstrapCDN.
See you at the big 3.0.
