README.md

Sublime Text Snippets and Keyboard shortcuts for working with Bootstrap

To install:

• Toss all .sublime-snippet files into /Packages/User/ in your sublime install
• Optional
  • Copy the lines from sample.sublime-keymap into your user keymap More Info Here

Tab Triggers

For Media queries

All tab triggers begin with mq and are followed with either m or x, indicating a min-width or max-width query, then 1 of the 4 options x, s, m, and l, indicating one of the 4 built in bootstrap breakpoints xs, sm, md, and lg.

Example:

mqxm produces:

@media (min-width: $screen-md) and (max-width:$screen-md-max){} 

Tab breaks are set to easily allow you to remove the part of the query you may now want. in this case (min-width: $screen-md) and is removed with a single delete key press.

For column classes

All tab triggers begin with bc, then 1 of the 4 options x, s, m, and l, indicating one of the 4 built in bootstrap breakpoints xs, sm, md, and lg. They are all optionally followed with o, indicating the use of an offset class.

Example:

bclo produces:

col-lg-offset-

bcx produces:

col-xs-

the addition of numbers is simply done manually after the snippet.

For Key Bindings

All key bindings use super+shift+alt (Note: super = Windows key / Command key) as modifiers for all keypresses. You can simply hold those three buttons the whole time. You then use a sequence of:

For Media queries

m, indicating media query, m or x, indicating a min-width or max-width query, then 1 of the 4 options x, s, m, and l, indicating one of the 4 built in bootstrap breakpoints xs, sm, md, and lg.

Example:

"super+shift+alt+m", "super+shift+alt+m", "super+shift+alt+l" produces:

@media (min-width: $screen-lg){} 

For column classes

All key bindings use super+shift+alt (Note: super = Windows key / Command key) as modifiers for all keypresses. You can simply hold those three buttons the whole time. You then use a sequence of:

b, indicating bootstrap column, optionally o, indicating the use of an offset class, then 1 of the 4 options x, s, m, and l, indicating one of the 4 built in bootstrap breakpoints xs, sm, md, and lg.

Example:

"super+shift+alt+b", "super+shift+alt+o", "super+shift+alt+m" produces:

col-md-offset-

Enjoy!!!

bcl.sublime-snippet

<snippet>
	<content><![CDATA[col-lg-]]></content>
	<tabTrigger>bcl</tabTrigger>
</snippet>

bclo.sublime-snippet

<snippet>
	<content><![CDATA[col-lg-offset-]]></content>
	<tabTrigger>bclo</tabTrigger>
</snippet>

bcm.sublime-snippet

<snippet>
	<content><![CDATA[col-md-]]></content>
	<tabTrigger>bcm</tabTrigger>
</snippet>

bcmo.sublime-snippet

<snippet>
	<content><![CDATA[col-md-offset-]]></content>
	<tabTrigger>bcmo</tabTrigger>
</snippet>

bcs.sublime-snippet

<snippet>
	<content><![CDATA[col-sm-]]></content>
	<tabTrigger>bcs</tabTrigger>
</snippet>

bcso.sublime-snippet

<snippet>
	<content><![CDATA[col-sm-offset-]]></content>
	<tabTrigger>bcso</tabTrigger>
</snippet>

bcx.sublime-snippet

<snippet>
	<content><![CDATA[col-xs-]]></content>
	<tabTrigger>bcx</tabTrigger>
</snippet>

bcxo.sublime-snippet

<snippet>
	<content><![CDATA[col-xs-offset-]]></content>
	<tabTrigger>bcxo</tabTrigger>
</snippet>

mqml.sublime-snippet

<snippet>
	<content><![CDATA[@media (min-width: \$screen-lg){${2}} ]]></content>
	<tabTrigger>mqml</tabTrigger>
</snippet>

mqmm.sublime-snippet

<snippet>
	<content><![CDATA[@media (min-width: \$screen-md)${1: and (max-width:\$${2:screen-md-max})}{${3}} ]]></content>
	<tabTrigger>mqmm</tabTrigger>
</snippet>

mqms.sublime-snippet

<snippet>
	<content><![CDATA[@media (min-width: \$screen-sm)${1: and (max-width:\$${2:screen-sm-max})}{${3}} ]]></content>
	<tabTrigger>mqms</tabTrigger>
</snippet>

mqxm.sublime-snippet

<snippet>
	<content><![CDATA[@media ${1:(min-width: \$${2:screen-md}) and }(max-width:\$${3:screen-md-max}){${4}} ]]></content>
	<tabTrigger>mqxm</tabTrigger>
</snippet>

mqxs.sublime-snippet

<snippet>
	<content><![CDATA[@media ${1:(min-width: \$${2:screen-sm}) and }(max-width:\$${3:screen-sm-max}){${4}} ]]></content>
	<tabTrigger>mqxs</tabTrigger>
</snippet>

mqxx.sublime-snippet

<snippet>
	<content><![CDATA[@media (max-width: \$${1:screen-xs-max}) {${2}} ]]></content>
	<tabTrigger>mqxx</tabTrigger>
</snippet>

sample.sublime-keymap

[
/*
=====================
	Bootstrap
=====================
*/
	// Media Queries
	// xs
	{ "keys": ["super+shift+alt+m", "super+shift+alt+x", "super+shift+alt+x"], "command": "insert_snippet", "args": {"name": "Packages/User/mqxx.sublime-snippet"}},
	// sm
	{ "keys": ["super+shift+alt+m", "super+shift+alt+m", "super+shift+alt+s"], "command": "insert_snippet", "args": {"name": "Packages/User/mqms.sublime-snippet"}},
	{ "keys": ["super+shift+alt+m", "super+shift+alt+x", "super+shift+alt+s"], "command": "insert_snippet", "args": {"name": "Packages/User/mqxs.sublime-snippet"}},
	// md
	{ "keys": ["super+shift+alt+m", "super+shift+alt+m", "super+shift+alt+m"], "command": "insert_snippet", "args": {"name": "Packages/User/mqmm.sublime-snippet"}},
	{ "keys": ["super+shift+alt+m", "super+shift+alt+x", "super+shift+alt+m"], "command": "insert_snippet", "args": {"name": "Packages/User/mqxm.sublime-snippet"}},
	// lg
	{ "keys": ["super+shift+alt+m", "super+shift+alt+m", "super+shift+alt+l"], "command": "insert_snippet", "args": {"name": "Packages/User/mqml.sublime-snippet"}},
	// Column Classes
	{ "keys": ["super+shift+alt+b", "super+shift+alt+o", "super+shift+alt+x"], "command": "insert_snippet", "args": {"name": "Packages/User/bcxo.sublime-snippet"}},
	{ "keys": ["super+shift+alt+b", "super+shift+alt+x"], "command": "insert_snippet", "args": {"name": "Packages/User/bcx.sublime-snippet"}},
	{ "keys": ["super+shift+alt+b", "super+shift+alt+o", "super+shift+alt+s"], "command": "insert_snippet", "args": {"name": "Packages/User/bcso.sublime-snippet"}},
	{ "keys": ["super+shift+alt+b", "super+shift+alt+s"], "command": "insert_snippet", "args": {"name": "Packages/User/bcs.sublime-snippet"}},
	{ "keys": ["super+shift+alt+b", "super+shift+alt+o", "super+shift+alt+m"], "command": "insert_snippet", "args": {"name": "Packages/User/bcmo.sublime-snippet"}},
	{ "keys": ["super+shift+alt+b", "super+shift+alt+m"], "command": "insert_snippet", "args": {"name": "Packages/User/bcm.sublime-snippet"}},
	{ "keys": ["super+shift+alt+b", "super+shift+alt+o", "super+shift+alt+l"], "command": "insert_snippet", "args": {"name": "Packages/User/bclo.sublime-snippet"}},
	{ "keys": ["super+shift+alt+b", "super+shift+alt+l"], "command": "insert_snippet", "args": {"name": "Packages/User/bcl.sublime-snippet"}}
]