The Redesign: Part Three

The third and final post in the series about my recent redesign of Spare­Type is the fun one chock full of bits of code. With visu­als and process out of the way, it’s time to dig into the pieces that actu­al­ly make the site run. This isn’t going to be a com­pre­hen­sive break­down of every line of code but a look at my favorite pieces that do the most heavy lifting.

Typography

Font sizes and line-height are the per­fect can­di­dates for vari­ables in a CSS pre­proces­sor. I’m run­ning Sass because that’s the one I heard of first and it was easy enough to pick up the basics of imports and variables.

// =Variables for typography expressed in pixels
$title-text: 58;
$headline-text: 36;
$subhead-text: 28;
$primary-text: 22;
$secondary-text: 17;
$title-leading: 60;
$headline-leading: 44;
$primary-leading: 36;
$secondary-leading: 27;

So where did these num­bers come from? The Golden Ratio Typography Calculator, of course. This pro­vides a reli­able scale and hier­ar­chy while also address­ing read­abil­i­ty with an appro­pri­ate char­ac­ter per line count (CPL). While being respon­sive will cause that num­ber to fluc­tu­ate, I’ve designed for 65 CPL on desk­top sized screens which make up the bulk of my traf­fic. So what do we do with these num­bers? Say hello to the only mixin in my Sass so far.

// =Font size and line height mixin for pixels and rems
@mixin font-size($fontsize: $primary-text, $lineheight: $primary-leading) {
font-size: $fontsize + px;
font-size: ($fontsize / 16) + rem;
line-height: $lineheight + px ;
line-height: ($lineheight /16) + rem ;
}

This beau­ty allows you to pass it one of the vari­ables above then spit it out in pix­els for older browsers and rem units for newer browsers. The ‘16’ comes from the default type size in pix­els. This piece is awe­some because it does all the math in con­vert­ing pix­els to rem units. Hooray, for com­put­ers doing math. Now, the mixin in action.

body {
    @include font-size($primary-text,$primary-leading);
    color: $brand-color1;
    font-family: 'Source Sans Pro', sans-serif;
}
h1 {
    @include font-size($title-text,$title-leading);
}
h2 {
    @include font-size($headline-text,$headline-leading);
}

@include calls the mixin named font-size. The vari­ables for text size and line-height are includ­ed for that par­tic­u­lar ele­ment. Then we have some other CSS rules to start the over­all styling of the text with color and font-family. The color prop­er­ty also shows off anoth­er per­fect use of vari­ables for defin­ing color palettes to be reused through­out the code. Once com­piled from Sass to nor­mal CSS it looks like the following.

body {
font-size:22px;
font-size:1.375rem;
line-height:36px;
line-height:2.25rem;
color:#3c4d56;
font-family:'Source Sans Pro', sans-serif
}
h1 {
font-size:58px;
font-size:3.625rem;
line-height:60px;
line-height:3.75rem;
}
h2 {
font-size:36px;
font-size:2.25rem;
line-height:44px;
line-height:2.75rem;
}

Layout

My favorite piece of struc­ture for the site is the blog page with its tiles for each blog post. Amazingly, it’s a CSS only solu­tion. The secret is inline-block and column-count, which has plen­ty of brows­er sup­port when pre­fixed. Set the column-count and column-gap on a div that wraps the arti­cles. Then set the arti­cles to inline-block and 100% width.

.loop-content {
    margin: 184px 72px 18px;
    -moz-column-count: 1;
    -moz-column-gap: 72px;
    -webkit-column-count: 1;
    -webkit-column-gap: 72px;
    column-count: 1;
    column-gap: 72px;
}

.loop-content article {
    display: inline-block;
    margin-bottom: 72px;
    width: 100%;
    background-color: $brand-color4;
    border: 2px solid $brand-color1;
}

@media screen and (min-width: 850px) {
    .loop-content {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        max-width:800px;
    }
}

This tech­nique works great in a respon­sive design because you can update the column-count on wider dis­plays to spread out infor­ma­tion. You can adjust the width of the wrap­ping div and the col­umn widths inside will adjust accord­ing­ly. Again, hooray for leav­ing the math to the com­put­er and let­ting the brows­er cal­cu­late widths. I’ve also used this tech­nique in the foot­er for lay­ing out wid­gets there.

Multiple Thumbnails

The last piece of code I’d like to high­light is WordPress spe­cif­ic and actu­al­ly involves installing a plu­g­in. The Multiple Post Thumbnails plu­g­in allows you to reg­is­ter extra fea­tured images for your posts. It does take some cod­ing to get work­ing, but that flex­i­bil­i­ty allows for lots of tweak­ing to fit your design goals. All the code and instruc­tions for imple­ment­ing the plu­g­in can be found on this Github page. It dove­tails per­fect­ly into WordPress’s built-in media man­ag­er and cus­tom image sizes reg­is­tered through functions.php. Plus, there is no limit to how many fea­tured images you can add.

Those three pieces of code real­ly do 80% of the work around the site. They are pow­er­ful, under­stand­able, and adjustable which makes them amaz­ing tools for work­ing with the site’s design. As I makes tweaks and intro­duce new code, I’ll be high­light­ing the stand out pieces here on the blog so keep an eye out for those.

For now, that wraps up the redesign series about the site. If you real­ly want to fol­low along, I am doing all of this out in the open on Github. Plus, there’s always the RSS feed so you can catch all of my blog posts. Now, go code something.