Fast color helpers with SASS Lists

Yep, it’s that time of the week again. Time for more insanely optimized helper classes in SASS.

Let’s talk about colors. So, say you have a list of color variables:

1
2
3
4
5
6
7
8
$blue:      #0ab0ed;
$blue-dark: #0064cd;
$green:     #8da1ae;
$red:       #f06338;
$yellow:    #e7dfb1;
$orange:    #f89406;
$pink:      #c3325f;
$purple:    #7a43b6;

You probably want some helper classes to pepper through your code, like .color-blue or .bg-blue. Fortunately, with SASS lists, this process is almost as easy as typing out the variables in the first place.

Set up a list:
variables_and_overrides.scss
1
2
3
4
5
6
7
8
9
10
$colors: (
  $blue blue,
  $blue-dark blue-dark,
  $green green,
  $red red,
  $yellow yellow,
  $orange orange,
  $pink pink,
  $purple purple
  );

Simple enough, right? Okay, now let’s set up our mixins.

Set up some mixins using interpolation and nth:
variables_and_overrides.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin generate-colors() {
  @each $color in $colors {
    .color-#{nth($color, 2)} {
      color: nth($color, 1);
    }
    .bg-#{nth($color, 2)} {
      background: nth($color, 1);
    }
    .border-#{nth($color, 2)} {
      border-color: nth($color, 1);
    }
  }
}
Call your mixin:
variables_and_overrides.scss
1
@include generate-colors();
Lust at the beautiful helpers at your fingertips:
application.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.color-blue {
  color: #0ab0ed; }

.bg-blue {
  background: #0ab0ed; }

.border-blue {
  border-color: #0ab0ed; }

.color-blue-dark {
  color: #0064cd; }

.bg-blue-dark {
  background: #0064cd; }

.border-blue-dark {
  border-color: #0064cd; }

.color-green {
  color: #8da1ae; }

.bg-green {
  background: #8da1ae; }

.border-green {
  border-color: #8da1ae; }

.color-red {
  color: #f06338; }
...
Side note on speed:

If you aren’t using it yet, I really encourage you to start using gulp-sass, which is built ontop of node-sass right now.

File saves are often under 200ms, which is practically instant; and you can get away with doing some pretty insane loops and code generation really quickly and easily. I’m working on a few Rails projects and plan on continuing to use this process instead of the native Rails SASS simply because the speed is extraordinary.

Rapid Development with Sublime Text

If you scan the posts in my blog, you’ll quickly see they all have one thing in common: Speed. I like to learn things that help me move quickly for two reasons: I get to ship more code (service more Clients) and I get to learn more things. Win win.

One thing I spend every few months or so going through is my Sublime Text workflow.

This is an old feature, but man oh man did it help save a lot of time this week. If you’re like me, you’re probably jumping through a lot of files trying to find Class definitons, variables, and the like.

Goto -> Goto Symbol in Project can help with that, especially with namedspaced top level classes.

At the same time, this is all great, but by default it will search everything, which is bad. If you’re using CoffeeScript, you probably don’t want to hit all of your .js files, and the same goes for CSS preprocessors.

Sublime Project Settings for the win!

Hit the Project menu and go to Save Project As.... Then, hit Edit Project in the same menu, and add something like this:

my_project.sublime-project
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "folders": [{
    "file_exclude_patterns": [
      ".gitignore"
      "apps/**/*.js",
      "dist/js/**/*.js",
      "dist/js/*.js",
      "dist/stylesheets/*.css"
    ],
    "folder_exclude_patterns": [
      "assets/components",
      "gulp",
      "docs",
      "dist/build"
    ],
    "follow_symlinks": true,
    "path": "src"
  }]
}

Boom. All those nasty artifact files are completely ignored from the listing. You can exclude entire directories, just files, or as you can see hear use patterns to define files to ignore.

Overall performance, file indexing, and searching across your codebase is also vastly improved with this. I haven’t even taken it to the level I want to yet (there are a few more patterns I’d like to add), but this is a huge step in the right direction.

The cool thing here is, as you write rules and save this file, it’ll automatically refresh your folder list. So, you can temporarily and quickly add a folder pattern back into the view and not worry about reopening the project or relaunching Sublime.

I’m way behind the ball with this feature, I know, but hey, give me some credit that I’ve made it this long without finding a building to jump off of. Good day!

Speeding Up WordPress, Advanced Custom Fields, and more with helper functions

I don’t particularly love working in WordPress, because at this point I feel everything I’ve ever needed to do, I’ve done many times before. I’ve just seen about everything imagineable when it comes to WordPress development, and until tonight thought it was mostly a cut and run kind of deal.

With a recent project I’ve been focusing on really, really optimizing and elegantly developing my theme using DRY code. It’s been an admittedly fun process seeing my templates completely dry up, and while PHP is often messy (it’s official, I now hate semicolons, by the way) it has saved me quite a bit of time rolling boilerplate code.

I’m using the awesome Advanced Custom Fields plugin, which I have to give credit to Elliot Condon for. He’s really made a powerful system that in my opinion is one of the best open-sourced CMS platforms I’ve ever seen. It’s quite incredible what you can do with it now, really.

Here are a few examples of tricky things I’ve integrated into my theme that have helped save tons of time:

Button helper:

Outputs a quick button with optional internal page-link or external options. That there saved me 10 lines of boilerplate code.

page-home.php
1
<?php _s_custom_field_link('btn btn-primary'); ?>
functions-custom.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * custom field link helper
 * @param  string $className
 *         add a custom class name to element
 * @return string
 *         returns button text for view.
 */
function _s_custom_field_link($className) {
  $text = get_sub_field('button_text');
  if (!$className) {
    $className = 'btn btn-primary';
  }
  if (get_sub_field('external_button_link')) {
    // external link stuff
    $link = get_sub_field('external_button_link');
  } else {
    $link = get_sub_field('button_link');
  }
  // echo "<a href="$link">$text</a>";
  echo "<a class='$className' href='$link'>$text</a>";
}
Field conditional

Or take this for example, which I’ve found I do a lot. Say I want to have a field displayed, wrapped in an HTML tag, only if it’s present. And I want to avoid writing get_field vs. get_sub_field every time:

page-home.php
1
<?php _s_custom_field('title', 'h2', 'title', true); ?>
functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function _s_custom_field($name, $tag, $class = '', $subField = false) {
  if ($subField) {
    $function = get_sub_field;
  } else {
    $function = get_field;
  }
  if ($function($name)) {
    $str = '';
    $str .= "<{$tag} class='{$class}'>";
    $str .= $function($name);
    $str .= "</{$tag}>";
    echo $str;
  }
}

Link conditional, magic.

Grid wrappers

..or, avoid the semi-annoying Bootstrap grid wrappers:

page-home.php
1
2
3
<?php _s_grid_wrapper_start('col-md-6', true, 'hero'); ?>
  <h2>Hi, I am inside the <code>.col-md-6</code></h2>
<?php _s_grid_wrapper_end(); ?>
functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function _s_grid_wrapper_start($className = "col-md-12", $container = true, $containerClassName = "") {
  if ($container) {
    echo "<div class='container'>";
  }
  echo "<div class='row'>"
  ."<div class='$className'>";
}
// grid wrapper end
function _s_grid_wrapper_end($container = true) {
  echo "</div> <!-- .col- -->"
  ."</div> <!-- .row -->";
  if ($container) {
    echo "</div> <!-- .container -->";
  }
}

Voila, grid-ified:

1
2
3
4
5
6
7
<div class="container hero">
  <div class="row">
    <div class="col-md-6">
      <h2>Hi, I am inside the <code>.col-md-6</code></h2>
    </div>
  </div>
</div>

Just a few examples of using functions.php to help me cut up on writing code over and over again.

Side note: While working on this, I had an idea that would make it even more smooth. I’d love to see someone using Gulp and with a bleeding edge mentality develop a boilerplate theme using JADE templates or the otherwise. Any takers? Anyone out there trying to write advanced themes using WordPress?