Nathan's Blog

Web development and useful information

Nathan's Blog

Category: Web Development Page 1 of 4

Responsive utility classes

Utility classes serve a single purpose.
Examples of utility classes: .align-left, .float-left, .clearfix
Responsive utility classes allow you to create very flexible responsive websites.

This post is about what makes a great responsive utility class.

I’ll talk about: naming and a useful pattern.

For a good introduction to utility classes I suggest David Clark’s excellent article here.

Naming

I don’t like namespaced or aliased utility classes.
I don’t like them because they are harder to think about.

An example of a bad utility class is: .u-mt-10@md

Why is this bad?
You must know that .u is a convention for utility classes.
You must know that mt refers to margin-top.
You must know that @md means this utility class targets “Medium” sized devices.

What’s an alternative?

Utility classes should use CSS property names and values: .margin-top-10-xs

It is clear that this utility class adds 10 pixels of top margin.
Users familiar with Bootstrap’s grid system may guess that this targets “Extra small” viewports and greater.

Pattern: Inclusives and Exclusives

Two types of responsive utility classes are needed when building layouts: inclusives and exclusives.

  1. Inclusive: You need a utility class to target a specific device size and everything greater than it (most common)
  2. Exclusive: You need a utility class to only target a specific device size

Separate responsive utility classes into two categories: inclusives and exclusives.

A simple naming convention in your utility class tells you how it will behave.

Inclusives

Inclusive classes include the named device size and device sizes greater than itself.

When you use Bootstrap’s responsive grid you only have to define an element as .col-xs-12 and you get 12 columns on mobiles, tablets and desktops.

Noticing that this simple pattern results in less classes showed me that by default all responsive utility classes should behave this way.

Responsive utility classes are inclusives by default.

Every utility class that uses the convention of .property-value-deviceSize is an inclusive class.

You may have noticed our utility classes follow a different convention to Bootstrap’s columns.

Bootstrap uses: .property-deviceSize-value
We use: .property-value-deviceSize

This was intentional because it’s easier to think about.

When creating an element I know I want to apply 10 pixels of top margin to an element. The targeted device is a detail.

In my head I’ll say “margin top 10 on mobiles and greater”, not “margin top on mobiles and greater, of 10 pixels”.

How inclusives look in code

/* Inclusives */

// Mobile and >
.margin-top-10-xs {
    margin-top: 10px;
}
// Tablet and >
@media screen and (min-width: $screen-sm-min) {
    .margin-top-10-sm {
        margin-top: 10px;
    }
}
// Desktop and >
@media screen and (min-width: $screen-md-min) {
    .margin-top-10-md {
        margin-top: 10px;
    }
}

Exclusives

Exclusives target the named device size only.

They follow this convention: .property-value-only-deviceSize
A margin top of 10 pixels applied to only mobiles looks like: .margin-top-10-only-xs

How exclusives look in code.

/* Exclusives */

// Mobile - max-width used
@media screen and (max-width: $screen-xs-max) {
    .margin-top-10-only-xs {
         margin-top: 10px;
     }
}
// Tablet
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .margin-top-10-only-sm {
        margin-top: 10px;
    }
}
// Desktop
@media screen and (min-width: $screen-md-min) {
    .margin-top-10-only-md {
        margin-top: 10px;
    }
}

Distinguishing between inclusive and exclusive classes leads to incredibly flexible responsive utility classes.

Structural responsive utility classes

Copy this pattern for other structural properties.

Responsive utility classes are almost always used on structural CSS.

– Margin
– Padding
Line breaks

Utility classes should be imported last

Adding utility classes last helps you avoid specificity issues.
Using Sass or Less simply import your utility classes last.
By including our utilities last, I’ve not had to use !important yet.

@import base/reset.scss;
@import layout/layout.scss
@import module/headers.scss;
@import page/homepage.scss;
@import utilities/utilities.scss;

tl;dr

By naming our responsive utility classes with valid CSS property names and values we have created clear, easy to use utility classes that don’t require education – if you are familiar with CSS properties already.

By breaking responsive utility classes into inclusives and exclusives by -xs being inclusives and -only-xs being exclusives, our responsive utility classes are very flexible.

tmux – ‘attach session’ alias with tab completion

The command to reattach a tmux session is tedious to type.
If you have many sessions open, or don’t remember the session name, you might type:

# List sessions
tmux ls
logs: 2 windows (created Thu Mar 13 13:07:19 2014) [237x62]
turtle: 1 windows (created Tue Mar 18 13:57:21 2014) [237x65]

# Attach to the session named turtle
tmux attach -t turtle

Create the alias

Lets create an alias to make attaching to tmux sessions easier.
The alias will allow us to autocomplete tmux session names, avoiding tmux ls.

1. Bash completion

create a new file using your preferred editor:

vim /etc/bash_completion.d/tma

Paste the following.

_tma() {
    TMUX_SESSIONS=$(tmux ls -F '#S' | xargs)

    local cur=${COMP_WORDS[COMP_CWORD]}
    COMPREPLY=( $(compgen -W "$TMUX_SESSIONS" -- $cur) )
}
complete -F _tma tma

Save and quit.

2. Bash alias

Add the following to your ~/.bashrc

alias tma='tmux attach -t $1'
if [ -f /etc/bash_completion.d/tma ]; then
. /etc/bash_completion.d/tma
fi

Source your ~/.bashrc to pickup the bash_completion.

source ~/.bashrc

3. Use tma

tma turt[Tab]

If a session named turtle exists, it will complete to: tma turtle
Press enter and it will attach your tmux session.

If you have one session open, pressing tab will autocomplete it.

Bookmarklet: show Twitter Bootstrap columns

We use Twitter Bootstrap in a few websites at work.

Today, while writing documentation I wanted a visual way to show Twitter Bootstrap’s 12-column grid system. In a 12-column grid, each row must contain one or more columns, these must add up to 12.

For a simple two column layout, create a .row and add the appropriate number of .span* columns.
For a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

The following image shows a 12-column grid system.

12-columns

I created this bookmarklet to detect all span* classes (span4, span8 etc.) on a page.
The bookmarklet detects these span* bootstrap columns, applies a background colour to them, then inserts the size of the column into the element.
It allows you to see how a 12 or 24-column layout works, and also helps you detect incorrect styling – this helped me detect a few mistakes in the following screenshot.

24-column Twitter Bootstrap Layout
We use a custom 24-column layout on this website

Add the bookmarklet by visiting this jsFiddle page. Drag the green link to your bookmarks bar:
http://jsfiddle.net/F9Whr/

Here’s the JavaScript:

javascript:var colors = {
1:'#F7977A',
2:'#FDC68A',
3:'#FFF79A',
4:'#A2D39C',
5:'#7BCDC8',
6:'#7EA7D8',
7:'#8882BE',
8:'#B4A798',
9:'#F6989D',
10:'#C7B299',
11:'#736357',
12:'#A67C52',
13:'#754C24',
14:'#59955C',
15:'#75B4FF',
16:'#2F74D0',
17:'#8CD1E6',
18:'#C79BF2',
19:'#FFA4FF',
20:'#336666',
21:'#333366',
22:'#336666',
23:'#528413',
24:'#999999'
};
var items = document.querySelectorAll("[class^='span']");
for (var i = items.length; i--;) {
    var match = items[i].className.match(/.*(span\d+)+/g);
    if (!match) continue;
    var num = match[0].replace('span', '');
    items[i].style.backgroundColor = (colors[num]) ? colors[num] : 'red';
    items[i].innerHTML = ' span' + num + '' + items[i].innerHTML;
}
void(0);

I’ve committed this to my bookmarklets repository on GitHub if you want to add to it or improve the code in any way.

Page 1 of 4

Powered by WordPress & Theme by Anders Norén