├── README.md
└── Snippets
    └── Sublime Snippets
        ├── Snippet.block.sublime-snippet
        ├── Snippet.boilerplate.sublime-snippet
        ├── Snippet.button.sublime-snippet
        ├── Snippet.columns.sublime-snippet
        ├── Snippet.container.sublime-snippet
        ├── Snippet.image.sublime-snippet
        ├── Snippet.row.sublime-snippet
        ├── Snippet.sub-columns.sublime-snippet
        └── Snippet.wrapper.sublime-snippet


/README.md:
--------------------------------------------------------------------------------
 1 | # ZURB Ink Sublime Snippets
 2 | 
 3 | ###### ZURB Ink version: v1.0.5
 4 | 
 5 | ## Installation
 6 | 
 7 | ZURB Ink Sublime Snippets work with the latest development builds of Sublime Text, including [Sublime Text 2](http://www.sublimetext.com/dev) and [Sublime Text 3](http://www.sublimetext.com/3dev).
 8 | 
 9 | ### Using Sublime Package Control
10 | 
11 | If you are using Will Bond's excellent [Sublime Package Control](http://wbond.net/sublime_packages/package_control), you can easily install ZURB Ink Sublime Snippets via the `Package Control: Install Package` menu item. The ZURB Ink Sublime Snippets package is listed as `ZURB Ink Snippets` in the packages list.
12 | 
13 | ### Using Git
14 | 
15 | Alternatively, if you are a git user, you can install the snippets and keep up to date by cloning the repo directly into your `Packages` directory in the Sublime Text application settings area.
16 | 
17 | ###### Mac/Linux Instructions
18 | 
19 | 1. CD into Sublime Text packages folder
20 | `cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages`
21 | 
22 | 2. Clone repository into packages folder
23 | `git clone https://github.com/christianrojas/zurb-ink-sublime-snippets.git`
24 | 
25 | ###### Windows Instructions
26 | 
27 | 1. CD into Sublime Text packages folder
28 | `cd "%AppData%\Sublime Text 3\Packages\User"`
29 | 2. Clone repository into packages folder
30 | `git clone https://github.com/christianrojas/zurb-ink-sublime-snippets.git`
31 | 
32 | 
33 | ### Download Manually
34 | 
35 | * Download the files using the GitHub .zip download option
36 | * Unzip the files.
37 | * Find your `Packages` directory using the menu item  `Preferences -> Browse Packages...`
38 | * Copy the folder into your Sublime Text `Packages` directory
39 | 
40 | 
41 | ## Snippets
42 | 
43 | + Each snippet is prefixed with zi- (ZURB Ink).
44 | + Each snippet is singular, unless the name of the component ends in an s (columns)
45 | + Available classes are included as comments in the snippets
46 | 
47 | 
48 | ### Grid Structure
49 | 
50 | Component    | Usage
51 | :----------- | :-----------: 
52 | Boilerplate  | zi-boilerplate + tab
53 | Container    | zi-container + tab
54 | Row          | zi-row + tab
55 | Wrapper      | zi-wrapper + tab
56 | Columns      | zi-columns + tab
57 | Sub Columns  | zi-sub-columns + tab
58 | Buttons      | zi-button + tab
59 | Images       | zi-image + tab
60 | Block Grid   | zi-block + tab
61 | 
62 | 
63 | ## Contributing
64 | 
65 | 1. Fork it.
66 | 2. Create your feature branch (`git checkout -b my-new-feature`).
67 | 3. Test your changes to the best of your ability.
68 | 4. Update the documentation to reflect your changes if they add or changes current functionality.
69 | 5. Commit your changes (`git commit -am 'Added some feature'`).
70 | 6. Push to the branch (`git push origin my-new-feature`).
71 | 7. Create a new pull request.
72 | 
73 | 
74 | 
75 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.block.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Block Size: [two-up three-up four-up five-up six-up seven-up eight-up] -->
 4 | <table class="block-grid${1: block-size}">
 5 |   <tr>
 6 |     <td>
 7 | 
 8 |       Column #1
 9 | 
10 |     </td><td> <!-- Make sure the tags are directly next to each other -->
11 | 
12 |       Column #2
13 | 
14 |     </td>
15 |   </tr>
16 | </table>
17 | ]]></content>
18 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19 |   <tabTrigger>zi-block</tabTrigger>
20 |   <description>ZURB Ink Block Grid</description>
21 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
22 |   <scope>text.html</scope>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.boilerplate.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 4 | <html xmlns="http://www.w3.org/1999/xhtml">
 5 |   <head>
 6 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7 |     <meta name="viewport" content="width=device-width"/>
 8 | 
 9 |     <link rel="stylesheet" href="ink.css"> <!-- For testing only -->
10 | 
11 |     <style type="text/css">
12 | 
13 |       /* Ink styles go here in production */
14 | 
15 |     </style>
16 |     <style type="text/css">
17 | 
18 |       /* Your custom styles go here */
19 | 
20 |     </style>
21 |   </head>
22 |   <body>
23 |     <table class="body">
24 |       <tr>
25 |         <td class="center" align="center" valign="top">
26 |           <center>
27 | 
28 |             <!-- Email Content -->
29 |             $1
30 | 
31 |           </center>
32 |         </td>
33 |       </tr>
34 |     </table>
35 |   </body>
36 | </html>
37 | ]]></content>
38 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
39 |   <tabTrigger>zi-boilerplate</tabTrigger>
40 |   <description>ZURB Ink Boilerplate</description>
41 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
42 |   <scope>text.html</scope>
43 | </snippet>
44 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.button.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Size Classes:   [tiny-button small-button medium-button large-button] -->
 4 | <!-- Radius Classes: [radius round] -->
 5 | <!-- Color Classes:  [primary secondary alert success] -->
 6 | <table class="button">
 7 |   <tr>
 8 |     <td>
 9 |       <a href="#">${1:Button Name}</a>
10 |     </td>
11 |   </tr>
12 | </table>
13 | ]]></content>
14 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15 |   <tabTrigger>zi-button</tabTrigger>
16 |   <description>ZURB Ink Button</description>
17 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
18 |   <scope>text.html</scope>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.columns.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Visibility Classes: [show-for-small hide-for-small] -->
 4 | <!-- Size Classes: [one two three four five six seven eight nine ten eleven twelve] -->
 5 | <table class="${1:size} columns">
 6 |   <tr>
 7 |     <!-- Panel Class: [panel] -->
 8 |     <td>
 9 |       $2
10 |     </td>
11 |     <td class="expander"></td>
12 |   </tr>
13 | </table>
14 | ]]></content>
15 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16 |   <tabTrigger>zi-columns</tabTrigger>
17 |   <description>ZURB Ink Columns</description>
18 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
19 |   <scope>text.html</scope>
20 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.container.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <table class="container">
 4 |   <tr>
 5 |     <td>
 6 |       $1
 7 |     </td>
 8 |   </tr>
 9 | </table>
10 | ]]></content>
11 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
12 |   <tabTrigger>zi-container</tabTrigger>
13 |   <description>ZURB Ink Container</description>
14 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
15 |   <scope>text.html</scope>
16 | </snippet>
17 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.image.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Size by Columns: [1:30 2:80 3:130 4:180 5:230 6:280 7:330 8:380 9:430 10:480 11:530 12:580] -->
 4 | <img height="${1:size}" width="${1:size}" src="${2:src}">
 5 | ]]></content>
 6 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 7 |   <tabTrigger>zi-image</tabTrigger>
 8 |   <description>ZURB Ink Image</description>
 9 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
10 |   <scope>text.html</scope>
11 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.row.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <table class="row">
 4 |   <tr>
 5 |     $1
 6 |   </tr>
 7 | </table>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>zi-row</tabTrigger>
11 |   <description>ZURB Ink Row</description>
12 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
13 |   <scope>text.html</scope>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.sub-columns.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Visibility Classes: [show-for-small hide-for-small] -->
 4 | <!-- Size Classes: [one two three four five six seven eight nine ten eleven twelve] -->
 5 | <td class="${1:size} sub-columns${2: last}">
 6 |   $3
 7 | </td>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>zi-sub-columns</tabTrigger>
11 |   <description>ZURB Ink Sub Columns</description>
12 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
13 |   <scope>text.html</scope>
14 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.wrapper.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <td class="wrapper${1: last}">
 4 |   $2
 5 | </td>
 6 | ]]></content>
 7 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 |   <tabTrigger>zi-wrapper</tabTrigger>
 9 |   <description>ZURB Ink Wrapper</description>
10 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
11 |   <scope>text.html</scope>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------