Motif Sublime Text Snippets

This is a collection of Sublime Text shortcut snippets to enable quicker code commenting and Less variable conversion in Motif projects. Place these inside the Sublime Text Packages/User folder.

• Cheat Sheet
• Less/CSS Comments
• Less/CSS/JavaScript Comments (DocBlock-style)
• Less Variable Conversions
• HTML Comments

Other useful downloads:

• DocBlockr plugin (helps keep DocBlock-style comments going)

Cheat Sheet

Snippet	Tab Trigger
CSS Comment Section	*===
CSS Comment Subsection	*___
CSS/JS Comment	**
CSS Comment: Variables	//var
CSS Comment: Extends	//ext
CSS Comment: Mixins	//mix
CSS Comment: Positioning	//pos
CSS Comment: Display & Box Model	//dis
CSS Comment: Other	//oth
Less Em Conversion	@#
Less Em Conversion (Alt)	@@
Less New Base Text Size	@-
Less New Base Text Size (Alt)	@_
HTML Comment Section	!===
HTML Comment Subsection	!___
HTML Comment Block	!--

Less/CSS Comments

CSS Comment Section

Trigger: *===

As noted in Motif's CSS coding style guide:

/* ==========================================================================
   [Section]
   ========================================================================== */

CSS Comment Subsection

Trigger: *___

As noted in Motif's CSS coding style guide:

/* [Subsection]
   ========================================================================== */

Less/CSS Inline Comments

Inline comments are used to group and organize the style properties in your stylesheets. (See the Motif coding style guide for declaration order.)

Variables

Trigger: //var

/* Vars */
@width: 20px;

Extends

Trigger: //var

/* Extends */
&:extend(.class);

Mixins

Trigger: //mix

/* Mixins */
.m-clearfix();

Positioning

Trigger: //pos

/* Positioning */
position: absolute;
top: 0;
left: 50%;

Display & Box Model

Trigger: //dis

/* Display & Box Model */
display: block;
margin: 0 auto;
padding: 20px;
width: @width;

Other

Trigger: //oth

/* Other */
font-size: 20px;
color: #000;
background: #fff;

Put it all together:

.selector {
    /* Vars */
    @width: 20px;

    /* Extends */
    &:extend(.class);

    /* Mixins */
    .m-clearfix();

    /* Display & Box Model */
    display: block;
    margin: 0 auto;
    padding: 20px;
    width: @width;

    /* Positioning */
    position: absolute;
    top: 0;
    left: 50%;

    /* Other */
    font-size: 20px;
    color: #000;
    background: #fff;
}

Less/CSS/JavaScript Comments

Trigger: **

A DocBlock-style comment, as noted in Motif's CSS coding style guide:

/**
 * [Sentence-case text]
 */

Less Variable Conversion

Em Conversion

Trigger: @#

A shortcut to bring up a formula to easily convert pixels to ems:

@[1]px: (1em * ([1] / [@base-text-size]));

Em Conversion (Alt)

Trigger: @@

Same as above, only it doesn't assume the variable name will be a number:

@[name]: (1em * ([1] / [@base-text-size]));

New Base Text Size

Trigger: @-

A shortcut to quickly set a new @base-text-size for the scope:

@base-text-size: [@normal]-text-size;

New Base Text Size (Alt)

Trigger: @_

Same as above, only it doesn't assume the variable will follow the @[name]-text-size pattern:

@base-text-size: [@normal-text-size];

HTML Comments

HTML Comment Section

Trigger: !===

As noted in Motif's HTML coding style guide:

<!--
 - ==========================================================================
 - [Section]
 - ==========================================================================
 -->

HTML Comment Subsection

Trigger: !___

As noted in Motif's HTML coding style guide:

<!--
 - [Subsection]
 - ==========================================================================
 -->

HTML Comment Block

Trigger: !--

As noted in Motif's HTML coding style guide:

<!--
 - [Comment block]
 -->