chipcullen.com

web designer + front-end developer

Category Archives: Web Craft

The nuts and bolts of creating on the web – coding practices, software tutorials, processes.

Counting Blocks in Drupal

Posted on by Chip Cullen

We had a situation where we had a region of blocks, but the number of those blocks could fluctuate. This was based on how much content the client wanted to feature in the region.

This posed a problem when it came to the layout CSS – using traditional floats, we need to know how many things we have that we’re trying to lay out. This lets us know how wide to set the child elements. Flexbox would have solved a lot of this, but alas.

So we needed some way to know how many blocks would be present in a region, even if that number changed. We could adjust the CSS accordingly.

It turned out to be a really simple preprocess function:

function THEMENAME_preprocess_region(&$vars) {
    $block_number = count($vars['elements']) - 5;
    $vars['classes_array'][''] = 'block-count--' . $block_number;
} 

This function needs to go in your theme’s template.php file, and be sure to change ‘THEMENAME’ to whatever your theme is, well, named.

What is that ’5′ all about? In Drupal, a region contains a number of arrays, and the blocks show up in the ‘elements’ array. That array lists all of the blocks, plus 5 other properties of the region. So we count the number of items in the elements array, subtract by 5, and that is the number of blocks we have.

This will attach a class to the region parent that indicates the number of blocks, e.g. ‘block-count–4′ or ‘block-count–2′.

This works on any region that has a <div> wrapped around its output. So, the $content region usually won’t get this class. Most other regions should.

With that, you can do things like this in your CSS:

.block {
    float: left;
}
.block-count--2 .block {
    width: 50%;
}
.block-count--3 .block {
    width: 33%;
}
.block-count--4 .block {
    width: 25%;
}

I hope you find this helpful!

Posted in Web Craft Tagged ,

Leave a comment Read More

What do I want to learn in 2014?

Posted on by Chip Cullen

It’s the start of a new year, and lots of folks are making resolutions. I’ve never been big on new year’s resolutions myself, but I did want to think about what I want to learn in 2014.

I had a great 2013 – most notably because we welcomed our second child into the family. He’s been an absolute blast, and I wouldn’t trade a minute with him (well, maybe some of the late night wakings).

However, I don’t feel like I actually learned that many new things in 2013 when it comes to web development and design. I built several large projects for work, and even one large personal project, but I was mostly working in existing skill sets.

In the web world, and in Front End Development specifically, if you stop learning, you’re going to get run over – quickly.

So, I put together a list of things that I want to learn more about in the coming year:

Continue reading →

Posted in Blog, Web Craft Tagged ,

1 Comment Read More

SASS’s trailing ampersand and modular code

Posted on by Chip Cullen

I recently learned of a feature of SASS that I think is extremely powerful, and little known about. I’m not even sure if it has a proper name*, so I’ll make one up and call it the “insert parent selector”. And it can help you deal with exceptions or variations that might make otherwise modular code become unruly.

And all it comes down to is a trailing ampersand – “&”.

Continue reading →

Posted in Blog, Web Craft Tagged ,

Leave a comment Read More