Skip to main content


TextMate Snippets

Here are a few TextMate snippets I made to streamline (X)HTML markup and CSS. They are described in detail below. To use them, download the archive and double click the snippets to install.

Download TextMate Snippets (8k zip file)

  1. Clearfix

    The classic CSS hack for clearing floats without extra markup.

    Tab trigger: clearfix tab
    .clearfix:after {
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    .clearfix { display: inline-block; }
    html[xmlns] .clearfix { display: block; }
    * html .clearfix { height: 1%; }

    In my snippet, the .clearfix selector is a placeholder mirror so that you can specify your own selector, and mirror it down the line.

  2. Border Radius

    Did you know that Webkit has supported the border-radius property about four years longer than Geko? It’s true. Yet I often come across CSS rules that leave Webkit browsers out in the cold. Did you also know that Geko’s implementation uses syntax that is inconsistent with the W3C working draft? I suspect many developers assume Webkit doesn’t support this property since the Geko syntax doesn’t work.

    My snippets contain the Webkit, and Geko selector prefixes as well as the final W3C recommended syntax for the rules to ensure they are future proof.

    Tab trigger: border-radius tab 1
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;

    In this snippet, top, left and 10 are default values for tab stops I have inserted which are also mirrored respectively down the line.

    I also have a snippet for the shorthand version.

    Tab trigger: border-radius tab 2
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    In the shorthand snippet, 10 is a default value and is mirrored for each subsequent property.

  3. Debug Outline/Border

    It’s sometimes useful to outline specific elements on your page to help debug layout issues. These snippets help with that.

    Tab trigger: outlineme tab
    outline: 1px solid #900;

    Internet Explorer doesn’t support the outline property, so I have a border version for it.

    Tab trigger: borderme tab
    outline: 1px solid #900;
  4. Quotes, Apostrophes and Dashes

    While TextMate ships with a very robust entity converter for large blocks of content, it isn’t as useful when writing content by hand. There are those who use the term curly quotes, and then there are those of us who understand the difference between quotation marks, apostrophes and primes. These snippets are set to their respective OS X keyboard short cuts and are applied to the html.text scope selector so that they only happen in HTML markup.

    The following snippet will wrap your selected text in double quotes, or insert double quote entities around your cursor. A second tab stop is set just after the right quote.

    Key equivalent: option + [

    The following is a right double quote for shits and giggles.

    Key equivalent: shift + option + [

    The following snippet will wrap your selected text in single quotes, or insert single quote entities around your cursor. A second tab stop is set just after the right quote.

    Key equivalent: option + ]

    Use the following snippet for apostrophes.

    Key equivalent: shift + option + ]

    Insert an em-dash.

    Key equivalent: shift + option + -

    Insert an en-dash.

    Key equivalent: option + -