Trello Made Awesome Part I: Life in Technicolor

Our development team adopted Trello several months ago for managing our work on Gander. In this ongoing blog series, we'll talk about how we've made it work for us in several ways that, in our most humble of opinions, are even better than the default setup Trello gives you. Up first, some CSS.

Very nearly every card in our Trello board has a label on it. It's great that Trello lets us do this, but it becomes hard to distinguish the different colors, especially from across the room during standup, or after a long day of hacking on email. Enter Scott's custom stylesheet that turns a Trello board so colorful I've seen peacocks get jealous: (Install it with Stylish or Stylebot or your browser's equivalent.) Now, even with just a glance from across the room, it's easy to see what's going on. Which lists are green, which are red? The board is expressive enough that it even starts to take the place of a burndown chart. Instead of graphing how well we're doing, we can just eyeball the board: is it the right color for this far through the sprint?

We think everyone should be using Trello like this, no matter what else you do. It sounds like a tiny thing, and the first time you see a board full of blocks of color it seems jarring, but trust us, it's great.

(Scott's currently working on a v2 of this stylesheet that can display more than one color per card using some sweet CSS gradients. We promise to update this space when it's done.)

Responsive Pagination with Kaminari

Since Gander has to play nice on all sort of screen sizes, I've been learning the basics of responsive design. This is what a simple Kaminari pagination element looks like after a little tweaking  so that it styles properly with Twitter Bootstrap:

This is great, except that as the browser width decreases, or someone uses a phone, it starts looking a little less pretty:

The way we're going to fix this is by shrinking the number of links on either side of the active page as the viewport width shrinks. The first step to this is to give each of the page links a class based on how far they are from the active page:

This gives us a set of selectors we can use in CSS to grab pairs of page links. .page.active will select the center link to the current page, .page.away-1 will select the page links directly to the left and right of the center.

Now we can write some simple media queries to start dropping page links as the window gets smaller.

@media (max-width: 900px) { .pagination .page.away-4 { display:none; } } @media (max-width: 825px) { .pagination .page.away-3 { display:none; } } @media (max-width: 750px) { .pagination .page.away-2 { display:none; } }

The screen widths I used there kept the pagination on one line in the viewport when there were four digits in the page numbers. Here's what it looks like in action: