A Bigger Better Bootstrap Book: Bootstrap Site Blueprints

Last year I published a little Bootstrap book. I immediately wanted to write a next, bigger one. To help me pull it off, I teamed up with my colleague Ian Whitley. We’ve written it. And it’s live.

We wrote the book for those who want to make use of Bootstrap without being constrained by it. Properly understood, Bootstrap is a tool — a truly excellent tool among other tools — meant to be used with a craftsman’s touch, toward an end defined by the craftsman, not by the tool.

Let’s break that down. If you’re like us, you want to:

1. Bootstrap your way to truly original designs.

You don’t want Bootstrap to define your design. “Built with Bootstrap” need not mean “looks like Bootstrap.”

2. Work directly with the LESS files.

Bootstrap’s LESS files are beautiful to behold.¬†Through the course of these chapters, you’ll develop a truly modular workflow. You’ll use Bootstrap’s LESS files intentionally and selectively. And you’ll augment them with your own custom LESS files.

Even if you’re new to LESS, we would argue there’s no better way to learn than this. We’ll help you get from zero to serious fast.

(Nothing against SASS, by the way. We wrote the book before Bootstrap had an official SASS port.)

3. Leverage, then enhance, Bootstrap’s JavaScript.

Bootstrap comes equipped with JavaScript plugins for some of the most important and frequently used interface elements. We’ll walk you through the process of exerting detailed control over several of them. Beyond that, you may want to do additional things, such as add swipe interaction to the carousel for touch devices, animate the scrolling behavior for a single-page site, or add the PictureFill responsive image solution. We walk you through these things!

4. Optimize for performance.

While it is convenient to grab Bootstrap’s CSS and JavaScript from the online CDN, you realize that there are huge performance gains to be had by selecting only the styles and plugins you need and optimizing them for performance.

We walk you through a very manageable process for cutting things down to size. No more 120KB CSS files or 68KB JavaScript files. We’ll cut those numbers in half, or better, and we’ll work to keep the number of HTTP requests low.

Your sites will load faster. You’ll get better page speed results. Your users will be pleased.

5. Do the hard work to do good things well.

Bottom line: This book is for those willing to roll up their sleeves and dig into the guts of Bootstrap — the markup, the LESS, and the JavaScript — exerting thoughtful and careful control over the details — while creating mobile-first, user-friendly designs.

6. Oh, and Bootstrap yourself a custom WordPress theme!

I almost forgot to mention — we walk you through creating a custom WordPress theme based on the fantastic Roots Theme.

If you’re on board with these desires, this book is for you.

In the coming weeks, we’ll be supporting the book with helpful tips, recommendations, and code goodies. So stay tuned!


Bootstrap Site Blueprints
Packt Publishing, February 2014
Packt eBook (ePub, Kindle, PDF) or Print + eBundle
Buy Amazon paperback or Kindle edition

Leave a comment

HTML5 Site Starter Templates

I’ve rounded up some HTML5 site starter templates to help you get up and running with a project quickly.

Bare Bones HTML5 Markup

Just the very basic HTML5 markup structure to get you started with a simple HTML5 page.

Get the GitHub Gist here

The HTML5 Bones Template

Ian Devlin has provided a nice little template that’s a bit more well rounded, including:

  • a richly commented template with helpful notes about key HTML5 elements
  • Google analytics code included
  • Normalize.css for cross-browser compatibility
  • A very basic style sheet with only a few fundamental styles
  • the HTML5 Shiv for IE 8 support

Get the HTML5 Bones Template on Github

The HTML5 Boilerplate

Probably the most well respected starter template on the planet, and for good reason. Includes more touches, including:

  • The Modernizr script for the HTML5 shiv PLUS robust browser feature detection
  • jQuery
  • and more

Visit the HTML5 Boilerplate Homepage

Initializr

Initializr goes further to help you custom configure a set of starter files. You can choose to include or exclude:

  • a basic mobile-first responsive CSS template
  • CSS from Twitter Bootstrap
  • respond.js to enable support for media queries in IE 8
  • jQuery
  • Modernizr
  • Apple Touch Icons
  • etc.

Visit the Initializr Homepage

Leave a comment

Resolving Breakpoint Conflicts in Bootstrap 3

Subtitled: the importance of the @screen-__-max variables

While testing a design for my upcoming Bootstrap 3 book (stay tuned, it’s coming soon!), I discovered the importance of the @screen-xs-max variable, and by extension the other @screen-__-max variables.

In my case, I had three columns set up using the class col-sm-4. This would lay them out side by side horizontally when the viewport width is above the @screen-sm breakpoint (by default 768px).

col-sm-4 cleared and padded

Then they would shift to a single-column layout below that breakpoint.

HOWEVER, because each column contained a floating button, the blocks of content were not clearing each other when arranged vertically. Buttons were flowing beside headings, and so on.

col-sm-4 not clearing

Thus, for the narrow single-column layout, I needed to set up a rule to force the columns to clear floating elements above them. I also wanted to add some vertical padding between them.

Easy fix not so easy

Seemed easy: Set up a media query with max-width: @screen-sm, and set up rules to clear floats and add padding only under that query.

On initial testing (i.e., resizing my desktop browser window), this seemed to work great.

col-sm-4 cleared and padded

The problem: This left a 1px zone where the columns remained narrow while clearing one another and thus still stretching down the screen vertically.

I didn’t find this until testing on the iPad mini, whose window width falls exactly in this 1 pixel zone! This was what it looked like:

iPad Screen Small Breakpoint Broken

After a bit of consternation-laden thought, I revisited Bootstrap’s breakpoint variables … and realized I’d stumbled on the reason for the @screen-__-max variables.

You’ll find these lines in Bootstrap’s variables.less file:

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Note what these do: provide a breakpoint that is exactly 1px less than the next larger breakpoint — exactly what I needed to clear up this problem.

The problem and fix in LESS

Here are my LESS lines, with the original offending media query, now commented out and replaced with the new better one:

// @media (max-width: @screen-sm) { // BAD: conflicts 1px with col-sm in markup
@media (max-width: @screen-xs-max) { // GOOD: fits within col-sm in markup
  [class^="col"] { // set columns to clear floats and add padding
    clear: both;
    padding-bottom: 40px;
  }
}

That did it. Problem solved.

See it and test the difference in this Codepen.

Lessons Learned

  1. Even with Bootstrap 3’s powerful responsive grid, be sure to test breakpoints very carefully, and across devices, watching for 1px gaps.
  2. The @screen-__-max variables can be your friend!

See the relevant Bootstrap 3 docs here

Leave a comment