image

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.


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):

image

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)

image

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)

image

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)

image

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)image

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)

image

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.

image

Credits

Photo by David Masters. Text courtesy of Wikipedia.


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


image

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.


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.


image

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.

Step 1

Remove this meta tag from your page if you’ve got it.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2

Use col-xs-* classes for any grid columns. A find and replace should do it.

Step 3

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.

Overriding with CSS

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. 

Rebuilding with LESS

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.

image

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.

image

Superhero, which was discontinued many moons ago, makes its triumphant return with a sleeker look and more sophisticated color palette.

image

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.


image

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.