(Better) dynamic CSS columns through sass

I spent an hour on Google after my last post on dynamic columns. I wanted an idea of everyone else’s solutions to the problem of “how can I generate dynamic columns with Scss?” I found:

  • Seb Kay, who doesn’t attempt dynamic generation, and instead pre-generates column classes;
  • Steve Hickey who modifies pre-existing bourbon code;
  • Luke Harrison also pre-generates column classes;
  • eddiemoore, who pregenerates column classes;
  • and Thad Bloom, whose approach is better, but still uses floats.
  • Singularity is the nuclear option; it can do all the things. But it still floats, and you can’t even control the side.

Singularity is overkill and the other lack in features. What I wanted was to

  1. generate symmetric and asymmetric columns on the fly;
  2. be able to add responsive code through @content;
  3. a programmatic solution: if I say, “give me three columns here”, I wanted three columns here, now;
  4. generate either float or flexbox columns;
  5. and not have to care about context. I don’t care about the size, padding, colour or anything else about the parent. I just want a mixin I can drop into an element.

Because of all that, I wrote this monster. So what can it do?

  1. Equal columns with optional margin.
  2. Asymmetric columns with optional margin.
  3. Output them with flexbox or floats.

For example:

// Three equal columns, using flexbox, separated by a 11% margin.
@include columns(flex, div, 3, 11%);
// Three equal floated columns, separated by a 2% margin.
@include columns(float, div, 3, 2%);
// Five columns: three "auto" filling width, and two with a set width, each separated by 5%
@include columns(flex, div, auto 10% 30% auto auto, 5%);
// Four columns: one each of 10%, 5% and 3%, and the last taking up the remaining width.
@include columns(float, div, 10% 5% 3% auto, 0);

Elements are set using the nth-child pesudo class.

A more complex example. The mixin accepts an @content block that is applied to each child element.

@include columns(float, div, 10% 5% 3% auto, 0) {
    box-sizing: border-box;
    padding: 10px;

That’s all of it, now try it out:


Mostly CSS3 lightbox II

…now with 480% more JavaScript!

Eadaoin on the beach at Sandymount Beach

I rewrote the lightbox I put together in May. Wikipedia added a cool feature a while back: it you click on an image, the lightbox image is added to the URL hash. Later, if you follow the hash link directly, the image will open in the lightbox. Click through to this photo of Pluto. It’s a neat feature that I want to steal for my site. So, since then:

The CSS hasn’t changed, but I’ve put the JavaScript through a complete rewrite to add what I know now. The core flow is the same:

  1. Take in target selector.
  2. Add appropriate data to image.
  3. Add lightbox to <body>.
  4. Set and show lightbox image on click.

The biggest addition is the Wikipedia-ish link to an image. I look for a hash and show the image if it matches an image on the page. The next thing I want to fix is links to article images when they are presented on non-article pages. I have a few hacks in mind, but it’s midnight.

If you click this link to the post, the photo of Eadaoin should open up in the lightbox.

My next step will be to figure a permanent solution to image links on non-single articles. The problem is that the URL hash isn’t passed from the browser to the server, since the server shouldn’t care to where the browser scrolls. So, try it out! Click around! Throw new an exciting browsers at this. Grab the gist and mod it for your own site. Pat me on the back, even!

It’s called with:

$('article a img').addLightbox();


  1. This is still tied to the article ID structure I use on my blog.
  2. I presume the image is wrapped in an anchor link to a bigger image, because I subvert the target URL.
  3. Again: I presume. I don’t yet wrap the image if it isn’t.

Split up columns evenly with flexbox

I need to split up children elements on a regular basis (like here), and I realized that it was a waste to do it piecemeal. So:

$separation is the percentage separation between columns. $separation: 2 is a 2% separation between columns, after they are sized. So, with this and two columns, each column would be 48% wide.

@function column-width($columns, $separation) {
    @return (100 - ($columns - 1) * $separation) / $columns;
@mixin column-of($child: div, $columns: 3, $separation: 2) {
    $column-width: column-width($columns, $separation);

    @include flex-parent(row, space-between, wrap);

    > #{$child} {
        @include flex-child(0 1 #{$column-width + '%'});

Edit: I added a float mixin too, for IE fallbacks:

@mixin float-of($child: div, $columns: 3, $separation: 2, $direction: left) {
    $column-width: column-width($columns, $separation);
    @include clearfix();

    > #{$child} {
        float: $direction;
        width: #{$column-width + '%'};

        &:not(:nth-child(#{$columns + 'n'})) {
            margin-right: #{$separation + '%'};



I spent today writing a two thousand word article on regular expressions. Symbols dance around when I close my eyes. Kill me now.

x to y of z search results II

The code snippet I posted last August hasn’t worked too well:

  • It only works for the index.php loop of all posts.
  • All other loops (search, taxonomy, archive, etc.) have weird counts.

I changed it to use the global wp_query variable to determine post count, with an addendum for private posts if I am logged in. get_loop_type is a shorthand function I wrote a while ago.

function archive_page_count($echo = false, $page_num = null, $total_results = null) {
    global $wp_query;

    if (is_null($total_results)) {
        $total_results = $wp_query->found_posts;

    if (is_null($page_num)) {
        $page_num = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $posts_per_page = get_option('posts_per_page');
    $total_pages = ceil($total_results / $posts_per_page);
    $page_count = sprintf(__('Page %s of %s', TTD), $page_num, $total_pages);

    if (!$echo) {
        return $page_count;


All hail the glorious vim master race

OR: “Moving from Sublime Text 2 to vim.”

Click here to revel in my glorious vim master race desktop.

Dual head vim setup

I have used Sublime Text since 2011. I don’t know when I first used it, beyond clear memories of it open in class during my first year at I.T. Sligo. I asked “suggest a prettier editor than Notepad++” on Facebook, and received a link to Sublime. The rest, as the cliché goes, is history.

I have used vim alongside other GUI editors since ~2001. I have used:

  1. gvim.
  2. Kate in vi mode.
  3. Sublime Text in vintage mode.
  4. Vimium in Google Chrome.

And so on, ad infinitum; vim-style modes and bindings are both popular and easy to shoehorn into any software at all with an API.

Sublime Text is awesome; Sublime is flexible, extensible and packed with all sorts of great features. I have relied on Sublime and the Sublime SFTP plugin since I began work on with Tuairisc in August 2014. Sublime SFTP is, like Sublime, awesome: not only has it support for FTP, but also SFTP, FTPS and straight SSH connections. It can sync files and folders in both directions. It’s easy. The problem I have is that, in the end, my dependence on vintage mode and Sublime FTP has led to bad habits:

  1. Why version control and sandbox the test code when I can just upload shit and see what runs?
  2. Why bother to learn vim in depth when Sublime Does a Good Enough Job?

Both these and other things have led me to reassess Sublime over the past few weeks:

  • Many of Sublime’s keybinds aren’t friendly on my wrist in OS X. I fucked my right arm with RSI when I was bedridden during my 2012 illness. I have been careful about mouse use since then, to the point that I keybound everything in World of Warcraft. While I know I’m free to change every keybind in Sublime Text, that is a time-intensive exercise I don’t relish.
  • Sublime Text and Sublime SFTP are nagware and I’m cheap.
  • Sublime has become an intermediary between my true workspace and I. When I work, I feel like I am building a ship in a bottle while I wear oven mitts. Chris Hadfield’s tales of working in thick spacesuit gloves is a good allegory.

So as of Monday I went all-vim, all the time. I now work on my server through SSH, screen and tmux. I dove in headfirst as I yodeled “YOLO”. These tools allow me to now work on my code with vim, manage commits with tig and save a large amount of time. Neither do I have to fuck around with GUI applications anymore.

Here is what I have learned:

  • Having a keyboard and mouse with which to copy and paste makes one lazy, but it is also slow. You can see what you need to copy and where you need to paste it, but you don’t look at their positions. You click first on one and then the other. vim-for lack of a better description-forces you to be aware of the spatial position of characters in the file. What do I need to copy? What are its line and column numbers? Where is the target area in relation to this? How many lines and columns away is the destination?
  • vim isn’t as scary as I feared. I mean, fuck, whenever I think of vim, I conjure up a hoary veteran of the of the kernel mailing lists. But additions to the .vimrc (here’s mine) have proved straightforward. Adding new plugins and colour schemes (oxeded) has proved to be as simple as untarring them into the respective folder.
  • Macros are a lifesaver. To give an example, I use the phpdoc style of code comments. I am able to save and then paste the same boilerplate over and over without having to type it out for the nth time.

vim has been good to me and this move has proven good for me.