Posted 01.28.2015

My SASS(y Pants)


There’s been a lot of talk recently about SASS and CSS structure and Style Guides. It’s kind of cool, really, to see front-end take the “front stage.”

I thought I’d add my two cents and pull back the curtain a little bit. Or…watch this video and replace “tight pants” with “SASSy pants.”



Yes, please.

To me this is a no brainer. Any tool that is going to make my job easier, sign me up!

I’ve run the gamut on these.

I started with LESS because I could put less.js on the server and not worry about compiling. Granted, this isn’t ideal, COUGH graceful degradion.

Then, I started looking into SASS. I was curious because it seemed to be more popular and have more features. At the time, I was running an older verison of MacOS that wasn’t supported by CodeKit. So, I turned to LiveReLoad.

When I did upgrade, though, CodeKit was one of the first things I installed. I LOVED CodeKit…until I started working on a larger project that took a minute plus to compile. In all fairness, I don’t think it was CodeKit’s fault. It was probably the result of Compass building sprites and RubySASS.

Regardless, it forced me to turn to grunt and then finally, to gulp. — And gulp, I shall remain (for now).

The good part about this progression is that it allowed me to experiment with a variety of tools. When I’m collaborating with another developer, I’m able to use whatever method they’ve already put into place.


I used to rely on Compass for prefixing, but Autoprefixer is awesome. The best part is that it utilizes the most recent data from Can I Use to add only the necessary vendor prefixes.

Organization of Files

I keep all my images, fonts, sass, css, and javascript files in an assets folder. They are separated into 2 subdirectories, dist for distributed, compiled files, and src for source, original files.

Screen Shot 2015-01-28 at 8.58.04 PM

Back in the day, when I used to write long form css by hand, I would list my redefined styles at the top: p, a, hr, you get the idea. Then, layout specific styles, pieces I would use on multiple pages, and finally page specific styles. This made sense from a cascading standpoint.

I’ve tried to maintain a similar structure for my SCSS files:

  • _1_base This contains Zurb Foundation overrides and WordPress specific styles
  • _2_helpers These are functions, extends, mixins, variables, and thene files
  • _3_vendor Any third party styles I want to incorporate: fonts, icomoon, etc.
  • _4_redefine Start to lok familiar now? These are the redefined styles that I mentioned earlier.
  • _5_layout Layout specific styles
  • _6_pieces Pieces that I’ll reuse in multiple places (like social media icons)
  • _7_pages Page specific files.

Within each folder, there’s a file with a similar name as the folder (within _7_pages, there’s a _pages.scss file. It lists out all the other files within that directory to include:

@import "home";
@import "blog";
@import "clients";
@import "ebooks";
@import "coaching";
@import "podcast";
@import "speaking";
@import "contact";

Within the main scss folder, there’s a main.scss that imports Foundation and each folder’s “index” file:

@import “_1_base/base";
@import “_2_helpers/helpers";
@import “_3_vendor/vendor";
@import “_4_redefine/redefine";
@import “_5_layout/layout";
@import “_6_pieces/pieces";
@import “_7_pages/pages";

This means all my SASS gets compiled into 1 large CSS file. If I do end up having multiple CSS files, it’s to account for IE specific styles.

All my partial files are prefixed with an underscore.

Naming Conventions

If you didn’t know, naming CSS stuff is really hard. Plenty of really smart people, people much smarter than me debate about these things. There seems to be two main camps: BEM and SMACCS.

BEM stands for block, element, modifier.

SMACSS stands for Scalable and Modular Architecture for CSS

A lot more alphabet soup to add to the equation!

When I started trying to figure out my guidelines, became a terrific resource. There’s a section there on BEM-like naming conventions.

The fastest way to describe it is nested elements have double underscores:

.social-media__icons {}

.social-media__text {}

You don’t want to repeat the DOM in your CSS, but you do want to make it easier to identify.

Modifiers or statuses have double dashes:

.social-media-—large {}

You can also tell from my example that multiple words are not camel cased, but rather have a single dash between each word.


SASS actually makes this type of naming really easy:

.social-media {
    &__icons {}
    &__text {}
    &—-large {}


.social-media {}
.social-media__icons {}
.social-media__text {}
.social-media—-large {}

Extendable Classes

When I’m writing classes I know I want to extend, I’ll prepend the class name with a %.

%no-margin-padding {
     margin: 0;
     padding: 0;

There are several advantages here: (1) The class doesn’t actually get written unless it’s used. So, I’ve been able to create a small library of elements that are available to me in all my projects. (2) The % signifies it’s was meant to be extended and is being used in multiple places = don’t change it unless you want it to risk changing multiple elements across the board.

Classes vs IDs

I try to use classes instead of IDs. The main reason is because of specificity. You want your code to be as reusable as possible and all your ID elements should be unique.

If I’m using JavaScript to hook on to a particular element, I’ll add an addition class, prepended with js-. This lets me know later that JavaScript is using that particular tag, so don’t change it!

Naming Variables

All my colors are stored in variables:

$brown     : #847b6c;
$green     : #35b774;
$sky-blue    : #5ecbea;
$teal     : #3a6a77;

When I’m naming grays, instead of trying to remember the difference between $dark-gray, $darker-gray, and $darkest-gray, I name them by the first letter / number in their hex value: $gray-a, $gray-8, or $gray-c.

All my font names are stored as variables. If you’ve used or Google Fonts, you’ll know sometimes it’s hard to remember the exact syntax for a font name. So, storing these values within a variable makes this a no-brainer.

I’ll try and abstract this even further by creating a _themes.scss file. I’ll write an extendable classes with a more generic name:

%body { font-family: $dagny; } %sans-serif { font-family: $brandon; text-transform: uppercase; } %serif { font-family: $adelle; }

Now, if a client wants to change the font, this becomes really easy. Instead of finding and replacing all my $dagny variables, I simply, change the typeface within my %body definition.

The same concept extends to colors:

$border-color : $gray-c;
$heading-color : $red;

When I’m defining the typography, I’ll write an extendable class and then include it:

%h1 {
    @extend %sans-serif;
    font-size: emCalc(72px); /* emCalc() is Foundation function */

h1 {
    @extend %h1;

Separating it out that way, helps me do things like this easily:

.page-title { @extend %h1; }

Tabs vs. Spaces

I know I will be judged here. It’s OK, go ahead pull out your stones.

I prefer tabs. I just like seeing the extra space.

CSS Rule Sets

  • I have one selector per line. The main reason is that it makes git commits far more meaningful. Plus, it means the display width of my scss file is not very wide. I can keep it in a second pane within Sublime without sacrificing to much of my screen.
  • 1 space before the opening curly bracket {
  • A line break after the opening curly brace
  • No space before the colon
  • 1 space after the colon
  • No space before the semi-colon
  • A line break after the semi colon. (this wasn’t always the case)
  • No space before the closing curly bracket }
  • Put the closing curly bracket on its own line
  • A line break after the closing curly bracket
  • Most properties have 1 blank line between them. But, if they’re not related, they’ll have 5 blank lines between.

SASSY things

I try to stick to the following order of properties:

  • @extend

    • @includes
    • Regular property values (in alphabetical order)
    • Pseudo element nesting
    • Regular element nesting
    • Media queries

I know the alphabetical order thing sounds dumb, but it really does help when you’re skimming for a specific property.


I try not to nest. I’m not always great at it, though. SASS just makes it way too easy.


At the top of every file, I have a comment labeling the file:




The # is supposed to make it easy to find within the project.


I’ve finally moved to an SVG spriting system.

Let me describe a little bit of the history, here. I originally started with Compass. It worked great, but I was having to create multiple sprite sheets to account for retina, an icon might have multiple versions within one sheet to account for the various sizes, and on larger projects, it’d take a while to render out.

Then, I discovered icomoon. It was great because it handled a lot of the problems I found with Compass. I was able to resize icons on the fly, change colors on the fly, and it cut down on my render time. However, every time I wanted to make a change, I had to visit the icomoon site, upload the new icon, download the new files, and replace my existing files.

Then, once I got a setup for SVG sprites, all these things magically fell into place.

<Insert picture of the unicorn here> Just kidding.

Within my src / img / svg folder, I’ll save all my exported svgs. Then, gulp will handle the rest. Awesome!

Other Style Guides

I’ve compiled a short list of some of the other “style guides” I’ve read on the Internet:

Additional Resources

  • – This is a fantastic resource that compiles style guides and style guide information from all over the inter webs.
  • – I know I mentioned it earlier, but seriously, check out this site and take the time to read it. It definitely helped me.


In the Comments

How do you structure your style sheets?

Posted 01.26.2015

Posted 01.26.2015

A Brain Dump on Sublime Text 3

Sublime Text

Let’s face it, developers are opinionated about the tools we use. I’m no different.

In my humble opinion, Sublime Text is it. Dreamweaver and Coda have too many WYSIWYG features that are unnecessary to my workflow. I originally started coding with TextMate which I loved, however, the development seemed to stall out and Sublime offered several key features that TextMate was missing.

So, if you’re interested in Sublime or if you’re trying to trick it out, this post is for you! I figure if you’re going to spend all day with a tool, why not take the time to determine the best and most effective way you can use it. Let me share some of my workflow.

A Quick Word of Warning:

This post is L-O-N-G (it’s a brain dump!). To make it easier for you, I wanted to include a brief table of contents, in case you want to jump to a particular section:

  1. Features
  2. Keyboard Shortcuts
  3. Setting up your Preferences
  4. Snippets
  5. Plugins and Extensions
  6. Looking for More?


Some of my favorite features are actually native to the app:

Multiple Cursors

You can Cmd + Click in multiple places within your file to create multiple cursors or Alt + Drag Click to select multiple lines.

Sublime Text - Multiple Cursors

Multiple Panes

You can have multiple panes within Sublime.

Sublime Text - Multiple Panes

I prefer 2 columns, but you could have rows instead. — If this excites you, check out the Orgami plugin (also listed below).

I’ll usually keep my HTML on the left and my SCSS and JS on the right.

I’ve also found this feature useful, if I’m working with a longer file and constantly scrolling up and down. I can pull the top of the file up in one pane and put the bottom of the same file in another pane.

Search within a project

Cmd + Shift + F will open the project search pane. You can also limit your search to certain files and folders.

If you want to limit the search to the current project type <project> within the “Where” field.

Sublime Text - Search within prject

Ever since I started splitting my SASS into multiple files, this feature has become invaluable. Within the “where” field, I usually include “assets/src/scss/“ so that the results are only within my SASS directory. I don’t want the compiled .css returning.

Within the “Find Results” screen, you can double click on the file name and it will take you to that particular file — or you can click on the line of code and it will take you to that spot specifically.

Lastly, you’ll see buttons to the left of your search fields that allow to toggle regular expressions, case sensitive, whole word, show context, and use buffer. I only make use of show context and use buffer.


You may want to look into folder_exclude_patterns within your preferences file if you want to omit certain results from your search.

Keyboard Shortcuts

Your options here are limitless. I don’t know about you, but I can only remember so many at a time. I’ve included the ones I’ve found to be the most useful that I find myself using on a daily basis.

Cmd + t

This is by far my most used shortcut.

This opens a panel at the top, type the name (or part of a name) of a file within your project, hit <ENTER> and it will open.


Cmd + Shift + p

This short cut runs a close second. Similar to Cmd + t, this will open a panel at the top of my screen. Except, instead of opening files, it allows you to run commands. This could be a command from a plugin or extension or a command you might find in the menus (but don’t want to use your mouse).

Cmd + r

This allows you to easily find and jump to a piece of code within the current file. Within a CSS or SASS file, you can easily find a class or id tag. Within a PHP file, you can easily find a function.

Cmd + Shift + t

This will re-open the last tab that you closed.

Cmd + 1

Cmd + 2

Cmd + 3 (through 9)

If you numbered your tabs, left to right starting with 1, hitting Cmd + 2, would allow you to jump to the second tab. Cmd + 4, the fourth. You get the idea.

Sublime Text - Cmd Number

Ctrl + 1

Ctrl + 2

If you have multiple panes open and numbered them left to right starting with 1, hitting Ctrl + 2 would allow you to jump to the second pane. Ctrl + 1 will jump back to the first pane.

If you’re using this shortcut in conjunction with Cmd + 1 (through 9), the tab numbers restart within each pane. For example, I might type Ctrl + 2 to jump to the second pane, and then Cmd + 3 to jump to the third tab within that pane.

Sublime Text - Ctrl + Number

Cmd + k + l

Cmd + k + u

The sequence, here, took me a while to “get.” Basically, keep the Cmd key held down the whole time, and then type k (release) l (or u).

This will transform your selected text to all uppercase or all lowercase. I can’t tell you how many times I’ve started typing with the CAPS lock on by accident. Being the anal retentive programmer that I am, instead of having to delete that text and retype, Cmd + k + l. (I remember it by thinking konvert to upper or lower.)

Sublime Text - Cmd + k + u

Cmd + [

This will indent your entire line of code (or selection) to left.

Sublime Text + Cmd + Left Bracket

Cmd + ]

Similar to Cmd + ], this will indent your entire line of code (or selection) to the right.

Sublime Text - Cmd Right Bracket

Cmd + Shift + v

This will paste and indent, automatically applying the correct indention to the pasted text.

Cmd + k + b

Slides the sidebar in and out. I use this more when I’m working remotely on my laptop and screen real estate is an issue.

Sublime Text - Command + K + B

Cmd + d

This will highlight the entire word that your cursor is in. If you hit it again, it will select the next instance that word is used.

Sublime Text - Cmd + D

Ctrl + Shift + w

I use this one all the time! It wraps your current selection with a tag.

Sublime Text - Ctrl + Shift + W

Cmd + Shift + .

This is another one that has become second nature for me. This will automatically complete an open tag.

Sublime Text - Cmd + Shift + .

Cmd + l

This will select the entire line your cursor is on.

Sublime Text - Cmd + L

Cmd + j

This will get rid of the return at the end of the line.

Sublime Text - Cmd + J

Ctrl + Shift + k

This will get rid of the entire line your cursor is on. Great for cleaning up code.

Sublime Text - Ctrl + Shift + K

Cmd + Shift + K

This will highlight the wrapping tag.

Sublime Text Shortcut - Cmd + K

Cmd + /

Will toggle a comment block on and off.

Sublime Text Shortcut - Cmd + /

Cmd + Shift + <Enter>

This will move your cursor to a new line above your current position.

Sublime Text Shortcut - Cmd + Shift + Enter

Cmd + Enter

Same thing as Cmd + Shift + <ENTER> except, it will move your cursor to a new line below your current position.

Sublime Text Shortcut - Cmd + Shift

Ctrl + Cmd + Up Arrow

Ctrl + Cmd + Down Arrow

This is great when you have a list you’re trying to reorder. Ctrl + Cmd + Up Arrow moves your current line up. Similarly, Ctrl + Cmd + Down Arrow moves your current line down.

Sublime Text Shortcut - Cmd + Ctrl + Arrow

Setting up Your Preferences

One of the “weird” things about Sublime is that the preferences file uses JSON. Admittedly, not the most user friendly.

Go to Sublime Text > Preferences > Settings – User to edit the file.

I’ve included mine:

Within my preference, I make the folder labels bold:

“bold_folder_labels”: true,

I use the Cobalt theme (goes back to my TextMate days).

"color_scheme": "Packages/Color Scheme - Default/Cobalt.tmTheme",

You can actually set that through the menus. Just go to Sublime Text > Preferences > Color Scheme > Color Scheme – Default > Cobalt

I’ve also experimented with Dayle Rees’s color schemes, if you’re looking for more options. There are instructions on his GitHub page on how to install.

Other things I’ve defined in my preference file?








This prevents center file extensions from appearing in my sidebar and project search.


You can also set folder_exclude_patterns on a project level.

“font_size”: 14

Controls the font size. Surprise! :-)

“highlight_line”: true,

Highlights the line that your cursor is on.

“highlight_modified_tabs”: true

This setting changes the color of the file name in a tab if the file has been modified.

Sublime Text - Highlighted Tab

“spell_check”: true

Runs spell check.


This is where Sublime starts to get really powerful and workflow efficient.

“Snippets” of code that I find myself typing all the time, I’ll turn into a Sublime Snippet. It’s as easy as going to Tools > New Snippet. Sublime will open a new file with a template:



Hello, ${1:this} is a ${2:snippet}.


<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->

<!-- <tabTrigger>hello</tabTrigger> -->

<!-- Optional: Set a scope to limit where the snippet will trigger -->

<!-- <scope>source.python</scope> -->


To understand snippets, let’s talk through the default snippet and how it would work. If we uncommented line 6 and saved this snippet as hello.sublime-snippet (all snippets must have a sublime-snippet extension), every time we typed “hello<TAB>”, Hello, this is a snippet. would appear. You’ll notice that this is highlighted. We could type whatever we want to replace “this”, hit <TAB> again and snippet would be highlighted. <TAB> again, and our cursor goes to the end of the line.

So what just happened? Well, on line 3 of our, between <content><![CDATA[ and ]]</content> is our code. The ${1:this} and ${2:snippet} signifies our tab stops.

Technically you don’t need the :this and :snippet, but they serve as placeholder values to remind you what content needs to go there.

The number tells Sublime what order to tab through.

If you want to get fancy, you can have multiple ${1:this}s in your snippets. That means that you’d have multiple cursors as you’re tabbing through. Let me give you a practical example:

This is my starting point for creating a JavaScript controller file. You’ll see two ${1}s, two ${2}s, and two ${3}s.

When I type “start_js<TAB>” my code appears with my cursor in two places. I can type the name of my variable on line 5. I’ll know I’ll initialize it on line 6 using the same name. Why not do it all at once? I hit <TAB> and I have cursor on line 5 and another on line 10. I can create a new instance of my object (line 5) and define the name of my object (line 10) at the same time… you get the idea.


This is the text you’ll type (followed by the <TAB> key) to trigger the snippet. By default, this line is commented out, so make sure to name it appropriately and uncomment that line before saving it.

— It’s OK if you forget the tab trigger. Type Cmd + Shift + P. You’ll see a bar appear, type “snippet”, and then as you continue to type, Sublime will drill down and try to find the snippet you’re referring to. It will also remind you of the tab trigger on the far right.

Sublime Text Shortcut - Cmd + Shift + P


This line will help scope your triggers. What does that mean?Well, in the case of my JavaScript starter file, I’ve limited it to only working with JavaScript files. Instead of “.python” it says “.js”. Any file I want to use that snippet in, must be saved with a .js extension.

If I have trouble with a snippet loading, it’s usually related to the scope.

By default this line is commented out, so it’s not necessary, but it prevents your snippets from conflicting with each other.

Tips and Tricks

When you’re saving your snippets, they’ll be placed in your User’s Library folder > Application Support > Sublime Text 3 > Packages > User >. From there, though, I like to keep my snippets organized. I have folders for each of the languages (CSS, HTML, JS, and PHP).

Other Snippets

If you’re curious what other snippets I use, I’ve created gists that you’re more than welcome to download and use.




WordPress (PHP)

Plugins and Extensions

At the end of the day, the plugins and extensions are ultimately what tie me to Sublime. I’ve become so reliant on them that it would be really hard for me to change editors.

Package Control

The first thing you’ll need to do is install Package Controll. This makes it super simple to find and install packages and keep them up to date.

If you go to the Package Control install page they do a good job of explaining how to get started:

  • Go to Sublime, hit ctrl + ` (it’s above the <TAB> key).
  • Copy and paste the code they provide on their site and hit <ENTER>

Easy Peasy Lemon Squeezey.

Installing Packages

Now that Package Control is installed, anytime you want to install a package, just hit Cmd + Shift + P and then start to type “install”. Package Control: Install Package shoud come up as an option. Hit <ENTER>. Then, you can search for whatever package you want to install. Select it. Hit <ENTER> and it will automagically download and install itself and stay up to date. You can watch the progress in the bottom left gray bar.

Advanced New File

Advanced New File makes it easy to create new files and folders from your keyboard. I simply type Cmd + alt + shift + n, a line appear at the bottom of window and I can type the name of the file I want to create. If I want it to be within a particular folder, I simply include the path as well: assets/src/scss/_1_base/globals.scss. If I want to create a folder, I still type Cmd + alt + shift + n, but instead of typing the file name, I type the folder name. It knows the difference because instead of ending in a dot extension, end with a trailing /. For example: assets/src/img/svg/.

By default, when you create a new file, it will add a to your folder. This is great, if you’re writing python (I’m assuming, I don’t know python). You can turn this off by going to Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings — User

Copy and paste the following line:

	{ "keys": ["shift+super+alt+n"], "command": "advanced_new_file_new", "args": {"is_python": false}},

Anything within your Key Bindings — User file, will override the defaults established within Key Bindings — Default.

Alignment and AlignTab

The Alignment and AlignTab make it easy to correct alignment within your code.

With the Alignment package, you can press Cmd + Ctrl + a and your selection will indent consistently. If the lines are already indented properly, it will then check to make sure the first = on each line is aligned.

The AlignTab package is a little more versatile. I will typically call it by typing Cmd + Shift + P then selecting AlignTab and <ENTER>. A input field will appear at the bottom of your window and your type the character you want the text to align by.

It’s also worth noting that AlignTab has a Live Preview Mode option that allows you to preview the change before hitting <ENTER>.

Auto File Name

AutoFileName will autocomplete the folder and file names as you’re typing. So handy! If you’re referencing an image source, it will also fill in the height and width of the image.

Sublime Text - Autofile Plugin

NOTE: Within the screenshot, I’m using Emmet to generate to <img> tag.

Bracket Highlighter

BracketHighlighter will highlight the matching tag, plus it will put an icon in the gutter to help you identify the bracket, parenthesis, tag, etc.

Sublime Text = Bracket Highlighter

This has been a tremendous help in helping me troubleshoot code, when my nesting gets off.

Comment Snippets

Comment Snippets is a set of snippets that help you build comment blocks. For example, comm + tab would render

/* Comment */

Or, comm-section + tab would produce:

    =            Section comment block            =

    /*-----  End of Section comment block  ------*/

You can see more examples by reading their documentation.


DocBlockr is similar to Comment Snippets in that it helps create comments, but it’s more robust. For example, if you’re writing a comment block, it will maintain your style and indentation.

Sublime Text - DocBlockr Example

Also, if you’re going back and documenting variables and functions, DocBlockr will pick up on your variables and parameters, pre-filling your comment.
Sublime Text - DocBlockr example

It can also do fancy things, like surrounding you content with slashes. // SomethingCTRL + <ENTER>:

Sublime Text - DocBlockr Example

This is just the tip of the iceberg.


You can extend Sublime to support different languages and syntax highlighting through plugins too. There’s one for just about anything you can imagine:

You get the idea.


If you don’t install any other packages, install this one! I use Emmet (html) and Emmet CSS Snippets and Emmet Style Reflector.

It makes coding SO MUCH easier. Just to give you an idea, you can type ul>li*3>a[href=#] and then hit tab and it will generate this for you:

<li><a href=“#”></a></li>
<li><a href=“#”></a></li>
<li><a href=“#”></a></li>

The > sets up the nesting, the * sets up how many elements, and the [] establishes any attributes.

The CSS version is somewhat similar. I can just start to type (typically) the first two letters of each word in a property, hit <TAB> and it will generate that property for me.

For example ff <TAB> will produce font-family: ; or td <TAB> will give me text-decoration: ;.

Chris Coyier has a 20 minute screencast on how to use Emmet (embedded below). I can’t tell you how many hours Emmet has saved me, it’s more than worth taking 20 minutes to familiarize yourself.


If you’re running .git on your project (which you should! …no excuses!), then GitGutter will put an icon in the gutter, next to the line number, letting you know what has changed since your last commit.

…and while we’re talking about Git, you may want to check out Git and GitHub Tools. Git provides git integration directly in Sublime. (I still use Tower, though.) GitHub tools provides GitHub integration (I’ve moved most of my code to BitBucket.)

HTML-CSS-JS Prettify

Admittedly, this is not the most used plugin that I have installed. But, when I do use it, it’s like magic.

HTML-CSS-JS Prettify will take an HTML, CSS, or JS file and make the code look really pretty. It comes in handy if I copied the source from somewhere or if I’m dealing with someone else’s code.

Open Finder

Open Finder gives you the command “Finder: Open here”, which will open the current file’s folder in Finder. Sounds simple, but very useful.


This is one of my favorites. It makes opening and closing panes so easy. I simply type Cmd + K + arrow to open a new pane. Arrow up, opens a pane above. Arrow down, one below. Arrow right, to the right. Arrow left, to the left.

If I want to close a pane, I simply type Cmd + K + Shift + arrow. (Be careful not to get this mixed up with Cmd + Shift + K, just remember hold down the command key, press and release the k button, then hit shift, then arrow) Arrow up, closes the pane above it. etc.


Placeholders provides placeholder content. So, I can simply type lorem<TAB> and a paragraph of Lorem Ipsum will be generated.

Sidebar Enhancements

SideBarEnhacements provides some additional functionality to your sidebar. For example, it provides some additional menu options when you right click on a file or folder in the sidebar (“move to trash” and “open with…”) just to name a few.

Sublime GitHub

Sublime GitHub is a must for me. It allows me to access my gists directly from Sublime. We talked about snippets earlier and I suppose gists could provide some overlap. The difference, for me, though, is a snippet requires some interraction (tabbing through). A gist, however, could be a whole piece of code or an entire file that I reuse quite frequently. My bower.json, package.json, or gulpfile.js are perfect examples.

Within Sublime, I will type Cmd + Shift + P, then I’ll start to type gist. I’ll select GitHub: Copy Gist to Clipboard and hit <ENTER>. Within the top panel, it will list all my gists. I can start to type the name of the gist, select it with my arrow keys if it’s not already selected, hit <ENTER> and then Cmd + V to paste it into my current file.

ToDo Review

Last but not least: ToDoReview. As I’m typing code, sometime I’ll write a line, but know that I need to come back and work on it. Say I’m stubbing out a page and have a placeholder for a JavaScript slider. I know I’ll need to come back and work on the slider, but I don’t have time in the moment to implement it. So, I’ll type <!-- TODO: Implement Slider -->

The great thing about this method

  1. It’s a comment, so you can’t see it on the front end.
  2. It identifies the exact spot and line number in my code that still needs work.
  3. It doesn’t interrupt my flow of stubbing out the page.

Later, I can go back and run TodoReview: Project Files (by hitting Cmd + Shift + P and it will generate a list of all the places in the code where I listed TODO items. That list then comes my checklist. I can double click on the TODO in the list and it will take me to that spot in the code. Once I’ve reworked it, I’ll remove the comment, and regenerate the list.


You may notice, if you’re implementing bower or other node components, this syntax is common among other developers. By running TodoReview: Project Files, it will return Todo items within your project’s bower_components folder and node_modules folder that other programmers have left behind.

You can exclude these fles folders from your results, by going to Sublime Text > Preferences > Package Settings > ToDoReview > Settings — User and listing them within your preferences.json file. I’ve included mine for reference:

Looking for more?

Whew! That’s all I got. If I’ve just whetted your appetite or you’re looking for more information, here are a few additional resources:

I know this seems like a lot, but I know Sublime is so powerful and extendable that there’s plenty more. I’m interested to hear in the comments, what are some of your tips and tricks? Snippets? Plugins? Macros?

Updated 02.18.2015

How to install WordPress Plugins with Composer

What happens when you’re working with another WordPress developer, both developing a site locally, and someone updates the plugins on their local version? Their syntax and implementation may be different than yours if it was a major release. Suddenly, your local copy is broken. No fault of your own, just inconsistencies within the project.

What do you do? How do you prevent that from happening?

Let me present another scenario. Maybe this one will hit a little closer to home. Everytime you set up a WordPress site, you have to go through the same motions of downloading, installing, and activating a set of plugins. Maybe you’ve upped the ante a little bit and have a set of files on your local machine you just copy and paste everything over. Regardless, it’s still a pain when those plugins are updated. You have to visit each individual site, download the revised plugin code and replace the existing copy on your hard drive.

There must be an easier way…and there is!


I’ve started using Composer in my workflow, now most of those headaches have evaporated.

First things first

Let’s get Composer on your machine (COUGH Mac).

If you visit Composer’s site, it will explain your options in more detail. My preference, though, was to install it globally so that the composer command can be run anywhere on your system.

Open the Terminal and from the command line, run:

curl -sS | php
mv composer.phar /usr/local/bin/composer


If the above fails due to permissions, run the mv line again with sudo.

On to the fun part…

Within your WordPress project directory, create a file called composer.json.

Wordpress Project Structure

As the extension suggests, this is a preference file, written in json that describes the plugins you’ll be installing and their version numbers.

Here’s my broilerplate. Feel free to copy it and use it as a stating point for your own projects.

Let me walk through it line by line.

The first few lines are pretty obvious. Name is the name of your project. You can replace ahaywood/PROJECTNAME with your information. Ideally, this should reflect your repo name.

Under authors, you can change “Amy (Haywood) Dutton” and “email” to include your name and email address respectively.

I’m going to jump down to line 27, where it reads extras. This defines the paths for both plugins and themes. As you can tell, I have a wp-content folder within the root that includes sub directories for plugins and themes.

On line 33, I’ve listed all the plugins that the project requires.

WP Packegist makes this easy. They mirror all the WordPress plugin and theme directories as Composer repositories.

What does that mean?

If you got to and find a plugin you want to implement, you can also find it on WP Packegist.

Take the first plugin I have listed: Backup WordPress. The part of the URL that comes after /plugin is the name of the WP Packegist repo.

Backup WordPress on

If you’re still not exactly sure what the name of the repo is, WP Packegist just implemented a search on their site. (Quick Note: I searched for “Backup WordPress,” first, and it did not return any results. But, searching for “backupwordpress” returned what I was looking for.)

Backup WordPress on  WP Packegist

Line 34 includes the full name of the repository: “wpackagist-plugin/backupwordpress”.


You can also see there are several other plugins from Wp Packegist that I’m referencing:

"wpackagist-plugin/backupwordpress" : "3.0.*",
"wpackagist-plugin/intuitive-custom-post-order" : "2.1.*",
"wpackagist-plugin/wordpress-seo" : "1.7.*",
"wpackagist-plugin/wp-help" : "1.3.*",
"wpackagist-plugin/user-admin-simplifier" : "0.6.*"

See the Pen Highlight WPackgist by Amy Dutton (@ahaywood) on CodePen.

The number following the name is the version number. The star serves as a wildcard. This means for Backup WordPress, versions 3.0.1 or 3.0.4 would both qualify. You also have the option of being explicit when you define the version number:

"wpackagist-plugin/backupwordpress" : “3.0.4”


Just checking to see if you’re paying attention here. One of the cases I made for Composer was that it would lock down your plugin files. How does that work with wildcards and version numbers, obviously 3.0.1 and 3.0.4 are not the same. — For now you can just trust me or if it’s really bothering, skip down to the section where I talk about the composer.lock file.

The only reason that Composer knows to look at WP Packegist for these packages, is because it’s defined as a reference on line 11 and 12.

"type" : "composer",
"url"  : ""

See the Pen Reference Wpackagist by Amy Dutton (@ahaywood) on CodePen.

Setting up a Premium WordPress Plugin (or a plugin on a private repository)

You’ll notice several other repositories are referenced on lines 14 – 25:

     "type" : "vcs",
     "url" : "[email protected]:ahhacreative/ahha<em>plugin</em>acf.git"
     "type" : "vcs",
     "url" : "[email protected]:ahaywood/ahha-gravityforms.git"
     "type" : "vcs",
     "url" : "[email protected]:ahaywood/ahha-wp-db-migrate-pro.git"

See the Pen Reference Repositories by Amy Dutton (@ahaywood) on CodePen.

and implemented on lines 39 – 41:

"ahaywood/ahha-gravityforms" : "1.8.*",
"ahaywood/ahha-wp-db-migrate-pro" : "1.3.*",
"ahhacreative/ahha<em>plugin</em>acf" : "5.1.*"

See the Pen XJpeYw by Amy Dutton (@ahaywood) on CodePen.

The reason these are different is because they are premium plugins and unavailable on I still want to use Composer, though, so I’m hosting them in private GitHub and BitBucket repositories

First, I tell Composer what type of files they are (vcs) and where they are located (url).

     "type" : "vcs",
     "url" : "[email protected]:ahaywood/ahha-gravityforms.git"

See the Pen EaZwRq by Amy Dutton (@ahaywood) on CodePen.


The URL is the SSH address, NOT HTTPS.

Then, I reference them as project requirements:

"ahaywood/ahha-gravityforms" : "1.8.*",

That takes care of our composer.json file. Woo hoo

Now let’s talk about actually getting that plugin set up correctly on your BitBucket, GitHub, Beanstalk, or whatever account.

Here’s what I do: Download the plugin code. Create a folder on my computer where this code can live. I actually have a folder called COMPOSER for this exact purpose.

Composer Files in Finder

Within the plugin folder, create a composer.json file

Screen Shot 2015-01-08 at 9.13.24 PM

This file is a lot smaller than before:

  • name is the name of the repository
  • type is the type of file it is. — It could be “wordpress-plugin” or “wordpress-theme”. (Remember, when we talked about installer-paths in our first composer.json file? We defined the install paths for both a wordpress-plugin or wordpress-theme. Line 29 and 30. It actually looks at this line to know what the type of file it is and to make sure it gets installed in the right place.)
  • require this line refers tothe version of composer we’re running, NOT the version of the plugin. (Can you tell I’ve gotten that mixed up before?)

Add this folder as a local repository. My app of choice is Tower.

Add a Local Repo in Tower

Run an initial commit.

Then, create a remote repository and link it to your repository.

Adding a remote repository in Tower

Now, you’ll also need to create a tag for your commit. This relates to the version number you’re referencing in your composer.json file. I like for my numbers to match the develpers’ release numbers.

In Tower, you can click on the branch, then right click on a particular commit. Select “Create New Tag from…” in the drop down menu.

Adding a tag within Tower

In GitHub, tags are referred to as releases. So, if you’d prefer to do it from their site, you can click on the Releases tab, then Draft a new release.

Release inside GitHub
Draft a New Release inside GitHub

Updating your plugin

When you get ready to update the plugin, simply download the latest release from the developers’ site, then replace all of the code in your local repository with theirs.

Commit it, tag it, and push it to your remote repository.


Let’s download all these plugins and actually install them on WordPress.

Within the root of your project folder, inside the Terminal, run composer install.

Run composer install from Terminal

It might take a while, but when it’s done, you can go to the Plugin screen of WordPress and activate all your plugins.


If you get an error within the Terminal about not having the right privileges to download the plugins, it’s probably related to your SSH keys.

I actually wrote a blog post about Setting up a Site with SSH. I can’t tell you how many times I actually reference that post myself! The post refers to SpringLoops, but the same applies here. Scroll down to where it says, “First, you’ll need to check for existing SSH keys.” Once you copy the keys to your clipboard, you can go to your service of choice, find the section that says SSH keys, and paste them there.

SSH Keys within GitHub
SSH Keys within BitBucket

Update January 26, 2015

I just moved all my Composer plugins off of GitHub to BitBucket. I had some problems. I kept getting an error everytime I ran composer update:


I was finally able to get it to work, but I had to change the version number within my main composer.json file to dev-master. In context:

"require": {
     "ahhacreative/ahha_plugin_gravityforms" : "dev-master",
     "ahhacreative/ahha_plugin_wpdbmigratepro" : "dev-master"

Then, within each individual plugin’s composer.json, I had to add a version and dist parameter:

  "name": "ahhacreative/ahha_plugin_wpdbmigratepro",
  "version": "master",
  "type": "wordpress-plugin",
  "require": {
    "composer/installers": "v1.0.6"
  "dist": {
        "url": "[email protected]:ahhacreative/ahha_plugin_wpdbmigratepro.git",
        "type": "git"

Update February 18, 2015

I just ran into an issue when I was trying to deploy my site via capistrano: No submodule mapping found in .gitmodules for path.

No Submodule Mapping Found

Fortunately, this article pointed me in the right direction. Within my root directory, there’s a file called .gitmodules, I opened it up and all that was listed was the WordPress submodule:

[submodule "wp"]
	path = wp
	url = git://

I added the following lines:

[submodule "ahha_plugin_acf"]
 	path = wp-content/plugins/ahha_plugin_acf
 	url = [email protected]:ahhacreative/ahha_plugin_acf.git
[submodule "ahha_plugin_gravityforms"]
 	path = wp-content/plugins/ahha_plugin_gravityforms
 	url = [email protected]:ahhacreative/ahha_plugin_gravityforms.git
[submodule "ahha_plugin_wpdbmigratepro"]
 	path = wp-content/plugins/ahha_plugin_wpdbmigratepro
 	url = [email protected]:ahhacreative/ahha_plugin_wpdbmigratepro.git

Problem solved.


You’ll also notice that now, in addition to your composer.json file, there should be a composer.lock file. This file locks things down. It records the exact version of the file being installed.

If you want to update your site, simply go to the composer.json file, update the version numbers and then go to your project folder, inside the Terminal, and run composer update. Yep! That simple.

This seems awfully complicated…

Like a lot of things in the dev world, it can be a lot up front. That’s the learning curve talking. But, once that’s mastered, things go a whole lot faster. So, here’s my process now:

  1. Create a WordPress project using Yeoman.
  2. Within the root folder, create a composer.json file, copying and pasting my own GitHub boilerplate gist.
  3. Go to my project in the Terminal and type cu (I have Oh My Zsh! installed with the composer plugin activated.)

That’s it! 3 steps!