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

https://github.com/bhalash/scss-helpers


Holy shit, we climbed the Great Sugar Loaf

It was a scary, sobering experience.

First scariness: our paper map was outdated. The trailhead I wanted to use doesn’t exist anymore. The trail seems to be still there, but access isn’t, and we didn’t discover this wonderful fact until after we’d walked for a mile along a narrow main road for twenty minutes. Thanks Obama.

Second scariness: I put blind faith in an incorrect map over what was plain to our eyes. I led us down a steep and dangerous scree field on the east slope, along an imaginary trail, and into trick briars on the lower slope. We made it to Kilmacanogue, but we so easily mightn’t have.

What if the weather turned (it threatened rain all day)?
What if Eadaoin fell (the scree were loose)?
What if there was no access back to the road (we had to navigate by map alone)?

You can see for yourself in the fourth and fifth photographs. I thank the blessed Carl Sagan that my dipshit headstrong approach on the descent didn’t get anyone killed.

-_-

My dipshittery still didn’t ruin the day. Eadaoin had to be exhorted to the top of the Sugar Loaf because she convinced herself that the climb was impossible. Her high on making the top would’ve warned the most miserable heart, and Eadaoin’s smile alone made the day worth it.

Eadaoin on top of the Sugar Loaf, looking toward Bray Eadaoin and I on the Sugar Loaf Eadoin summits the Sugar Loaf. WITNESS HER! Eadaoin on the east side of the Sugar Loaf Lost in ferns on the Sugar Loaf The great Sugar Loaf

Back at an Almost-likable Place

Aafke kindly invited Eadaoin and I to visit and stay with her on her farm in the first week of August. Kinda funny, the timing, because then there was a background miasma of drama with my ex-wife, and now there is is a background miasma of drama with my ex-wife. Some things endure.

Eadaoin and Aafke in the garden Eadadoin adds to the guest book Eadaoin and Aafke in Dublin

Eadaoin was on her summer holiday from work that week, so the timing of the invite meshed nicely. We took train to Mullingar. Aafke met us here, and left Eadaoin and I to a wander around the town before lunch while she bought her groceries. And then our adventure at Aafke’s house began, although by “adventure” I mean that I worked on code while I drank a lot of coffee. The Tuairisc project is almost finished, so I spent the time offline working.

But — it was wonderful to be there, and out of Dublin for a few days. There’s an awful feeling of of claustrophobia when I work from home in the suburbs. I enjoy a view out of my office window of the verging trees of the golf course across the window, and a view of the Luas stop from our kitchen window. There’s nowhere interesting to go outside of a giant shopping center in Dundrum. Churchtown is a dull suburban landscape that sucks the life out of me.

Aafke has a gorgeous home and was a fantastic host to Eadaoin and I for those two days. Her garden is rich with life and her home warm and alive with the mementos of a life well-spent. It all conveys peace of mind. Eadaoin was in a flowery daze for the two days, and could be found out at all hours in all weather shooting flowers.

On Friday Eadaoin had her turn filling out Aafke’s guest book before we went back to Dublin.

Aafke, thank you again for hosting us (and sorry I’ve been silent for the last few weeks; work is work :( ).


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();

Caveats:

  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 + '%'});
        @content;
    }
}

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 + '%'};
        }

        @content;
    }
}