Client Websites

Project Scaffolding with wd_s

Part II of III in the wd_s Series:

A new project comes in: scoped, and all. Client provides Photoshop comps, sweet! Who is going to write the first line of code? ¯\_(ツ)_/¯

It could be you, and you’re setting the tone for the rest of the project. Project scaffolding can be fun, and can be daunting. Here are some things I learned getting wd_s set up on a new project recently:

Fonts. Fonts? Fonts! FONTS!!!

Tetris "I" shape iconMost likely the design is not using Arial, Georgia, or Webdings. Was the designer smart enough to include the fonts with the PSDs? Hopefully, they used fonts that have web-friendly versions hosted by Google Fonts, or Typekit. However, that’s not always the case.

Recently, I had to sort through dozens of PSDs that had a plethora of font family variants, and some of which had no compatible web-friendly version. I was forced to create a spreadsheet and parse each PSD for font family variants, and see what each file contained. It ended up that of the dozens of desktop font files provided, only about 60% were used in the PSDs, and some of the fonts were not even provided, nor were they all properly licensed. Therefore I had to find an adequate substitution and verify with the client that this was acceptable.

Once I had all the fonts established I had to set up wd_s to enqueue externally hosted fonts, as well as locally stored variants. Luckily, that is the easy part, because with wd_s we already have Open Sans and Roboto enqueued (see scripts.php), therefore I just needed to swap out for the project fonts. The end result:

<?php

/**
 * Register Google font.
 */
function wds_font_url() {

    $fonts_url = '';

    /*
    * Translators: If there are characters in your language that are not
    * supported by the following, translate this to 'off'. Do not translate
    * into your own language.
    */
    $playfair_display = _x( 'on', 'Playfair Display font: on or off', 'wds' );
    $titillium_web = _x( 'on', 'Titillium Web font: on or off', 'wds' );
    $lato = _x( 'on', 'Lato font: on or off', 'wds' );

    if ( 'off' !== $playfair_display || 'off' !== $titillium_web ) {
        $font_families = array();

        if ( 'off' !== $playfair_display ) {
            $font_families[] = 'Playfair Display:700,700italic';
        }

        if ( 'off' !== $titillium_web ) {
            $font_families[] = 'Titillium Web:200,300,400,400italic,600,700,900';
        }

        if ( 'off' !== $lato ) {
            $font_families[] = 'Lato:100,300,400,700,900';
        }

        $query_args = array(
            'family' => urlencode( implode( '|', $font_families ) ),
            'subset' => urlencode( 'latin,latin-ext' ),
        );

        $fonts_url = add_query_arg( $query_args, '//fonts.googleapis.com/css' );
    }

    return $fonts_url;
}

$colors: Taste the Rainbow

Tetris "Z" shape iconWhether you’re working with five, ten, fifteen, or fifty design comps, grabbing repetitive colors from them is critical to saving time for other Front End Developers down the line. This is where the heart of rapid theming can lie. Here is an example of a color partial that I recently wrote:

//--------------------------------------------------------------
//   COLORS
// - Primary palette
// -   Secondary palette
//   GRAYSCALE
// -   Black & White
// -   Grayscale
//-------------------------------------------------------------

// Primary palette
$color-alabaster: #f2efe8;
$color-blue: #0074d9;
$color-brown: #42210b;
$color-camel: #c29c66;
$color-cigar: #7e573b;
$color-dark-brown: #2a1608;
$color-purple: #32234c;
$color-red: #d92231;
$color-tan: #ba915b;

// Secondary palette
$color-cardinal: #d52232;
$color-alizarin-crimson: #d82232;
$color-tall-poppy: #bc272d;

// GRAYSCALE

// Black & White
$color-black: #000000;
$color-white: #ffffff;

// Grayscale
$color-cod-gray: #111111;
$color-mineshaft: #333333;
$color-dove-gray: #666666;
$color-gray: #808080;
$color-silver-chalice: #aaaaaa;
$color-silver: #cccccc;
$color-alto: #dddddd;
$color-gallery: #eeeeee;

As you can see, a well organized color partial can help keep a project’s codebase easier to maintain. Keep in mind, this is just the start, and by the end of the project there tends to be more values added–depending on how well the original designs enforced strict color palette. Also, this is where a Style Tile can really help keep things consistent and streamlined, but not all projects require (or provide) one.

Off the Grid

Tetris "J" shape iconThe next step is establishing the grid base for our project. Wd_s uses Bourbon’s Neat framework for semantic layouts. We utilize a simple configuration file in the theme’s /variables/ directory to set the building blocks for our project’s layouts. Typically, this is as easy as hopping into Photoshop, and turning on Guides to view the required grid system being used, and updating our variables.

Optionally, I also like to take this opportunity to include a few helper, non-semantic classes to try and keep the project consistent in the _layout.scss, e.g.:

.wrap {
    @include outer-container;

    padding: 0 $gutter/2;

    @include wider-than(phone-landscape) {
        padding: 0 $gutter;
    }

    &.no-gutter {
        padding: 0;
    }
}

Note that we’re leveraging the variables set in our _grid-settings.scss for Neat, which helps keep things DRY.

  • $gutter
  • @mixin outer-container($local-max-width: $max-width) { ... }, which references our $max-width

While we’re in our _layout.scss partial, we can also update our main two-column layout if our project is using one, e.g.:

.primary {
    @include fill-parent;

    @include wider-than(tablet-landscape) {
        @include span-columns(8);
    }
}

.secondary {
    @include fill-parent;

    @include wider-than(tablet-landscape) {
        @include span-columns(4);
        @include omega();
    }
}

SVG Icons

Tetris "S" shape iconIt seems that every design incorporates some level of iconography these days. And why not? Icons can offer a nice supplementary visual cue for most users, as long as we gracefully degrade the experience for those that do not need (or cannot) experience them.

Wd_s has a library of SVG icons available out-of-the-box that were hand-picked from IcoMoon, but this is just a starting point, and each project will require removing and adding to the library. Luckily, I just recently updated the documentation on how to work with SVGs with wd_s; check it out: https://github.com/WebDevStudios/wd_s/blob/master/images/svg-icons/README.md

Exporting and minifying all of the original design iconography can help expedite your Front-end team’s development time, and again the benefits of consistency are obvious.

@mixins, further variabling, and @extending our Sass

Tetris "O" shape iconYep, variabling (variaBLING?) is the technical term…not! But, you know what I mean. Keep things as DRY as possible.

Perusing the Photoshop designs will give you a sense of where repetitive patterns happen, and where you can leverage the power of Sass to keep things tidy and modular for your team.

Is there a consistent border-radius used on all buttons, or maybe even other elements? Then set a variable $border-radius: rem(x), and update all the pertinent elements.

Recently, there was a need for certain images to have a CSS black-and-white effect applied. Therefore, I wrote up a simple @mixin for the team to use:

/// Make a color <img> B&W
///
/// @link http://caniuse.com/#feat=css-filters
///
/// @example scss - Basic Usage Sass
///    .hero-img {
///        @include desaturate;
///    }
///

@mixin desaturate {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

Conclusion

Project scaffolding is an important role for each new project, and helps set up a unified codebase for your team, as well as save overall time converting elegant Photoshop comps to pixel-perfect masterpieces.

Wd_s was built to expedite the repetitive tasks that are a part of Front End building. We’re constantly learning, and improving the methods and code behind it. Submit a Pull Request, and join the ride!

Comments

Have a comment?

Your email address will not be published. Required fields are marked *

accessibilityadminaggregationanchorarrow-rightattach-iconbackupsblogbookmarksbuddypresscachingcalendarcaret-downcartunifiedcouponcrediblecredit-cardcustommigrationdesigndevecomfriendsgallerygoodgroupsgrowthhostingideasinternationalizationiphoneloyaltymailmaphealthmessagingArtboard 1migrationsmultiple-sourcesmultisitenewsnotificationsperformancephonepluginprofilesresearcharrowscalablescrapingsecuresecureseosharearrowarrowsourcestreamsupporttwitchunifiedupdatesvaultwebsitewordpress