chipcullen.com

web designer + front-end developer

If you could only have five Google Fonts

Posted on by Chip Cullen

The late, great graphic designer Massimo Vignelli famously used only five typefaces in his career -

  • Helvetica
  • Futura
  • Garamond
  • Century
  • Bodoni

Source

Why would a designer place such a constraint on himself, especially considering the breadth of his career? Typefaces are a tool to be used in design, and he knew these tools well. He knew how extensive those typefaces were, what their strengths were, and where they were weak. He felt he could address the tone of any project with these five choices.

It’s not a bad idea, in this age of widely available digital fonts. You will certainly be moving along with a design a lot faster if you only have to pick from a handful of great fonts, rather than sifting through hundreds of mediocre fonts.

Continue reading →

Posted in Blog, Web Typography Tagged

Leave a comment Read More

An Overview of the Drupal Panels Ecosystem

Posted on by Chip Cullen

I’ve recently been converted to the idea of why you would want to use Panels in a Drupal site. There is a lot of documentation out there on the very particular pieces of Panels.

As someone new to Panels, what I have found frustrating is lack of a larger overview of how all the pieces fit together. This post is meant to be a rough overview based on what I’ve discovered in a short amount of time. I hope this serves as a handy way for others new to Panels to get a sense of the landscape.

This is not an exhaustive list. These are merely the modules that have seemed useful. These are also not all required – it depends on your project needs.

This is not going to be a tutorial on any one module, but more of a big picture overview of how they relate. I am still learning about Panels, so some of this might be incorrect, or poorly paraphrased. I will try to update this post as I learn more.

Continue reading →

Posted in Blog, Drupal

Leave a comment Read More

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