├── .gitignore
├── Snippets
    └── Sublime Snippets
    │   ├── Snippet.full-grid.sublime-snippet
    │   ├── Snippet.half-grid.sublime-snippet
    │   ├── Snippet.alerts.sublime-snippet
    │   ├── Snippet.panel.sublime-snippet
    │   ├── Snippet.video.sublime-snippet
    │   ├── Snippet.third-grid.sublime-snippet
    │   ├── Snippet.subnav.sublime-snippet
    │   ├── Snippet.button.sublime-snippet
    │   ├── Snippet.equalizer.sublime-snippet
    │   ├── Snippet.sidenav.sublime-snippet
    │   ├── Snippet.breadcrumb.sublime-snippet
    │   ├── Snippet.quarter-grid.sublime-snippet
    │   ├── Snippet.clearing.sublime-snippet
    │   ├── Snippet.progress-bar.sublime-snippet
    │   ├── Snippet.button-group.sublime-snippet
    │   ├── Snippet.pricing-table.sublime-snippet
    │   ├── Snippet.reveal.sublime-snippet
    │   ├── Snippet.pagination.sublime-snippet
    │   ├── Snippet.dropdown-button.sublime-snippet
    │   ├── Snippet.button-bar.sublime-snippet
    │   ├── Snippet.split-button.sublime-snippet
    │   ├── Snippet.orbit-content.sublime-snippet
    │   ├── Snippet.iconbar-vertical.sublime-snippet
    │   ├── Snippet.iconbar-horizontal.sublime-snippet
    │   ├── Snippet.orbit.sublime-snippet
    │   ├── Snippet.vertical-tab.sublime-snippet
    │   ├── Snippet.topbar.sublime-snippet
    │   ├── Snippet.tab.sublime-snippet
    │   ├── Snippet.offcanvas.sublime-snippet
    │   └── Snippet.accordion.sublime-snippet
└── README.mdown


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.full-grid.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="row">
 4 |   <div class="small-12 medium-12 large-12 columns"></div>
 5 | </div>
 6 | ]]></content>
 7 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 |   <tabTrigger>zf-full-grid</tabTrigger>
 9 |   <description>ZURB Foundation Full Grid</description>
10 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
11 |   <scope>text.html</scope>
12 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.half-grid.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="row">
 4 |   <div class="small-6 medium-6 large-6 columns"></div>
 5 |   <div class="small-6 medium-6 large-6 columns"></div>
 6 | </div>
 7 | ]]></content>
 8 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 9 |   <tabTrigger>zf-half-grid</tabTrigger>
10 |   <description>ZURB Foundation Half Grid</description>
11 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
12 |   <scope>text.html</scope>
13 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.alerts.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Optional classes: [success alert secondary] [radius round] -->
 4 | <div data-alert class="alert-box">
 5 |   <!-- Your content goes here -->
 6 |   <a href="#" class="close">&times;</a>
 7 | </div>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>zf-alert</tabTrigger>
11 |   <description>ZURB Foundation 5 Alert</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.panel.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 |     <!-- Optional Classes: [callout radius] -->
 4 | <div class="panel">
 5 |   <h5>This is a callout panel.</h5>
 6 |   <p>It's a little ostentatious, but useful for important content.</p>
 7 | </div>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>zf-panel</tabTrigger>
11 |   <description>ZURB Foundation 5 Split Buttons</description>
12 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
13 |   <scope>text.html</scope>
14 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.video.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="flex-video widescreen vimeo">
 4 |   <iframe src="ENTER VIDEO URL HERE" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 5 | </div>
 6 | ]]></content>
 7 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 8 |   <tabTrigger>zf-video</tabTrigger>
 9 |   <description>ZURB Foundation 5 Flex Video</description>
10 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
11 |   <scope>text.html</scope>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.third-grid.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="row">
 4 |   <div class="small-4 medium-4 large-4 columns"></div>
 5 |   <div class="small-4 medium-4 large-4 columns"></div>
 6 |   <div class="small-4 medium-4 large-4 columns"></div>
 7 | </div>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>zf-third-grid</tabTrigger>
11 |   <description>ZURB Foundation Third Grid</description>
12 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
13 |   <scope>text.html</scope>
14 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.subnav.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <dl class="sub-nav">
 4 |   <dt>Filter:</dt>
 5 |   <dd class="active"><a href="#">All</a></dd>
 6 |   <dd><a href="#">Active</a></dd>
 7 |   <dd><a href="#">Pending</a></dd>
 8 |   <dd><a href="#">Suspended</a></dd>
 9 | </dl>
10 | ]]></content>
11 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
12 |   <tabTrigger>zf-subnav</tabTrigger>
13 |   <description>ZURB Foundation 5 Sub Nav</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.button.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Size Classes: [tiny small large] -->
 4 | <!-- Radius Classes: [radius round] -->
 5 | <!-- Color Classes: [secondary success alert] -->
 6 | <!-- Disabled Class: disabled -->
 7 | <a href="#" class="button">Default Button</a>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>zf-button</tabTrigger>
11 |   <description>ZURB Foundation 5 Buttons</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.equalizer.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | <div class="row" data-equalizer>
 4 |   <div class="large-6 columns panel" data-equalizer-watch>
 5 |     ...
 6 |   </div>
 7 |   <div class="large-6 columns panel" data-equalizer-watch>
 8 |     ...
 9 |   </div>
10 | </div>
11 | ]]></content>
12 | 	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
13 | 	<tabTrigger>zf-equalizer</tabTrigger>
14 | 	<description>ZURB Foundation 5 Equalizer</description>
15 | 	<!-- Optional: Set a scope to limit where the snippet will trigger -->
16 | 	<scope>text.html</scope>
17 | </snippet>
18 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.sidenav.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="side-nav">
 4 |   <li class="active"><a href="#">Link 1</a></li>
 5 |   <li><a href="#">Link 2</a></li>
 6 |   <li class="divider"></li>
 7 |   <li><a href="#">Link 3</a></li>
 8 |   <li><a href="#">Link 4</a></li>
 9 | </ul>
10 | ]]></content>
11 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
12 |   <tabTrigger>zf-sidenav</tabTrigger>
13 |   <description>ZURB Foundation 5 Side Nav</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.breadcrumb.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="breadcrumbs">
 4 |   <li><a href="#">Home</a></li>
 5 |   <li><a href="#">Features</a></li>
 6 |   <li class="unavailable"><a href="#">Gene Splicing</a></li>
 7 |   <li class="current"><a href="#">Cloning</a></li>
 8 | </ul>
 9 | ]]></content>
10 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
11 |   <tabTrigger>zf-breadcrumb</tabTrigger>
12 |   <description>ZURB Foundation 5 Breadcrumbs</description>
13 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
14 |   <scope>text.html</scope>
15 | </snippet>
16 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.quarter-grid.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="row">
 4 |   <div class="small-3 medium-3 large-3 columns"></div>
 5 |   <div class="small-3 medium-3 large-3 columns"></div>
 6 |   <div class="small-3 medium-3 large-3 columns"></div>
 7 |   <div class="small-3 medium-3 large-3 columns"></div>
 8 | </div>
 9 | ]]></content>
10 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
11 |   <tabTrigger>zf-quarter-grid</tabTrigger>
12 |   <description>ZURB Foundation Quarter Grid</description>
13 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
14 |   <scope>text.html</scope>
15 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.clearing.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="clearing-thumbs" data-clearing>
 4 |   <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
 5 |   <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
 6 |   <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
 7 | </ul>
 8 | ]]></content>
 9 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10 |   <tabTrigger>zf-clearing</tabTrigger>
11 |   <description>ZURB Foundation 5 Clearing</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.progress-bar.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Container Width Classes: [small-# large-#] -->
 4 | <!-- Color Classes: [secondary alert success] -->
 5 | <!-- Radius Classes: [radius round] -->
 6 | <!-- Progress Width Classes: [1 - 100] -->
 7 | <div class="progress">
 8 |   <span class="meter" style="width: 100%"></span>
 9 | </div>
10 | ]]></content>
11 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
12 |   <tabTrigger>zf-progress-bar</tabTrigger>
13 |   <description>ZURB Foundation 5 Progress Bar</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.button-group.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Button Group Optional Classes: [radius round] -->
 4 | <ul class="button-group">
 5 |   <!-- Button Color Classes: [secondary alert success] -->
 6 |   <!-- Button Size Classes: [tiny small large] -->
 7 |   <li><a href="#" class="button">Button 1</a></li>
 8 |   <li><a href="#" class="button">Button 2</a></li>
 9 |   <li><a href="#" class="button">Button 3</a></li>
10 | </ul>
11 | ]]></content>
12 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
13 |   <tabTrigger>zf-button-group</tabTrigger>
14 |   <description>ZURB Foundation 5 Button Groups</description>
15 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
16 |   <scope>text.html</scope>
17 | </snippet>
18 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.pricing-table.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="pricing-table">
 4 |   <li class="title">Standard</li>
 5 |   <li class="price">$99.99</li>
 6 |   <li class="description">An awesome description</li>
 7 |   <li class="bullet-item">1 Database</li>
 8 |   <li class="bullet-item">5GB Storage</li>
 9 |   <li class="bullet-item">20 Users</li>
10 |   <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
11 | </ul>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>zf-pricing-table</tabTrigger>
15 |   <description>ZURB Foundation 5 Pricing Table</description>
16 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
17 |   <scope>text.html</scope>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.reveal.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Size Classes: [small medium large xlarge expand] -->
 4 | <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
 5 | <div id="myModal" class="reveal-modal" data-reveal>
 6 |   <h2>Awesome. I have it.</h2>
 7 |   <p class="lead">Your couch.  It is mine.</p>
 8 |   <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
 9 |   <a class="close-reveal-modal">&#215;</a>
10 | </div>
11 | ]]></content>
12 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
13 |   <tabTrigger>zf-reveal</tabTrigger>
14 |   <description>ZURB Foundation 5 Reveal</description>
15 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
16 |   <scope>text.html</scope>
17 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.pagination.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="pagination">
 4 |   <li class="arrow unavailable"><a href="">&laquo;</a></li>
 5 |   <li class="current"><a href="">1</a></li>
 6 |   <li><a href="">2</a></li>
 7 |   <li><a href="">3</a></li>
 8 |   <li><a href="">4</a></li>
 9 |   <li class="unavailable"><a href="">&hellip;</a></li>
10 |   <li><a href="">12</a></li>
11 |   <li><a href="">13</a></li>
12 |   <li class="arrow"><a href="">&raquo;</a></li>
13 | </ul>
14 | ]]></content>
15 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16 |   <tabTrigger>zf-pagination</tabTrigger>
17 |   <description>ZURB Foundation 5 Pagination</description>
18 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
19 |   <scope>text.html</scope>
20 | </snippet>
21 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.dropdown-button.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <!-- Size Classes: [tiny small medium large] -->
 4 | <!-- Color Classes: [secondary alert success] -->
 5 | <!-- Radius Classes: [radius round] -->
 6 | <a href="#" data-dropdown="drop" class="button dropdown">Dropdown Button</a><br>
 7 | <ul id="drop" data-dropdown-content class="f-dropdown">
 8 |   <li><a href="#">This is a link</a></li>
 9 |   <li><a href="#">This is another</a></li>
10 |   <li><a href="#">Yet another</a></li>
11 | </ul>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>zf-dropdown-button</tabTrigger>
15 |   <description>ZURB Foundation 5 Dropdown Buttons</description>
16 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
17 |   <scope>text.html</scope>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.button-bar.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="button-bar">
 4 |   <ul class="button-group">
 5 |     <li><a href="#" class="button">Button 1</a></li>
 6 |     <li><a href="#" class="button">Button 2</a></li>
 7 |     <li><a href="#" class="button">Button 3</a></li>
 8 |   </ul>
 9 |   <ul class="button-group">
10 |     <li><a href="#" class="button">Button 1</a></li>
11 |     <li><a href="#" class="button">Button 2</a></li>
12 |     <li><a href="#" class="button">Button 3</a></li>
13 |   </ul>
14 | </div>
15 | ]]></content>
16 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
17 |   <tabTrigger>zf-button-bar</tabTrigger>
18 |   <description>ZURB Foundation 5 Button Bar</description>
19 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
20 |   <scope>text.html</scope>
21 | </snippet>
22 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.split-button.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 |     <!-- Size Classes: [tiny small medium large] -->
 4 |     <!-- Color Classes: [secondary alert success] -->
 5 |     <!-- Radius Classes: [radius round] -->
 6 | <a href="#" class="button split">Split Button <span data-dropdown="drop"></span></a><br>
 7 | <ul id="drop" class="f-dropdown" data-dropdown-content>
 8 |   <li><a href="#">This is a link</a></li>
 9 |   <li><a href="#">This is another</a></li>
10 |   <li><a href="#">Yet another</a></li>
11 | </ul>
12 | ]]></content>
13 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14 |   <tabTrigger>zf-split-button</tabTrigger>
15 |   <description>ZURB Foundation 5 Split Buttons</description>
16 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
17 |   <scope>text.html</scope>
18 | </snippet>
19 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.orbit-content.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="example-orbit-content" data-orbit>
 4 |   <li data-orbit-slide="headline-1">
 5 |     <div>
 6 |       <h2>Headline 1</h2>
 7 |       <h3>Subheadline</h3>
 8 |     </div>
 9 |   </li>
10 |   <li data-orbit-slide="headline-2">
11 |     <div>
12 |       <h2>Headline 2</h2>
13 |       <h3>Subheadline</h3>
14 |     </div>
15 |   </li>
16 |   <li data-orbit-slide="headline-3">
17 |     <div>
18 |       <h2>Headline 3</h2>
19 |       <h3>Subheadline</h3>
20 |     </div>
21 |   </li>
22 | </ul>
23 | ]]></content>
24 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
25 |   <tabTrigger>zf-orbit-content</tabTrigger>
26 |   <description>ZURB Foundation 5 Orbit Content Slider</description>
27 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
28 |   <scope>text.html</scope>
29 | </snippet>
30 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.iconbar-vertical.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="icon-bar vertical four-up">
 4 |   <a class="item">
 5 |     <img src="http://placehold.it/25x25" >
 6 |     <label>Home</label>
 7 |   </a>
 8 |   <a class="item">
 9 |     <img src="http://placehold.it/25x25" >
10 |     <label>Bookmark</label>
11 |   </a>
12 |   <a class="item">
13 |     <img src="http://placehold.it/25x25" >
14 |     <label>Info</label>
15 |   </a>
16 |   <a class="item">
17 |     <img src="http://placehold.it/25x25" >
18 |     <label>Mail</label>
19 |   </a>
20 | </div>
21 | ]]></content>
22 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
23 |   <tabTrigger>zf-iconbar-vertical</tabTrigger>
24 |   <description>ZURB Foundation 5 Vertical-4 Iconbar</description>
25 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
26 |   <scope>text.html</scope>
27 | </snippet>
28 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.iconbar-horizontal.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 |   <div class="icon-bar four-up">
 4 |   <a class="item">
 5 |     <img src="<img src="http://placehold.it/25x25">
 6 |     <label>Home</label>
 7 |   </a>
 8 |   <a class="item">
 9 |     <img src="http://placehold.it/25x25" >
10 |     <label>Bookmark</label>
11 |   </a>
12 |   <a class="item">
13 |     <img src="http://placehold.it/25x25" >
14 |     <label>Info</label>
15 |   </a>
16 |   <a class="item">
17 |     <img src="http://placehold.it/25x25" >
18 |     <label>Mail</label>
19 |   </a>
20 | </div>
21 | ]]></content>
22 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
23 |   <tabTrigger>zf-iconbar-horizontal</tabTrigger>
24 |   <description>ZURB Foundation 5 Horizontal-4 Iconbar</description>
25 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
26 |   <scope>text.html</scope>
27 | </snippet>
28 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.orbit.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="example-orbit" data-orbit>
 4 |   <li>
 5 |     <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
 6 |     <div class="orbit-caption">
 7 |       Caption One.
 8 |     </div>
 9 |   </li>
10 |   <li>
11 |     <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
12 |     <div class="orbit-caption">
13 |       Caption Two.
14 |     </div>
15 |   </li>
16 |   <li>
17 |     <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" />
18 |     <div class="orbit-caption">
19 |       Caption Three.
20 |     </div>
21 |   </li>
22 | </ul>
23 | ]]></content>
24 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
25 |   <tabTrigger>zf-orbit</tabTrigger>
26 |   <description>ZURB Foundation 5 Orbit Slider</description>
27 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
28 |   <scope>text.html</scope>
29 | </snippet>
30 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.vertical-tab.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <dl class="tabs vertical" data-tab>
 4 |   <dd class="active"><a href="#panel1a">Tab 1</a></dd>
 5 |   <dd><a href="#panel2a">Tab 2</a></dd>
 6 |   <dd><a href="#panel3a">Tab 3</a></dd>
 7 |   <dd><a href="#panel4a">Tab 4</a></dd>
 8 | </dl>
 9 | <div class="tabs-content vertical">
10 |   <div class="content active" id="panel1a">
11 |     <p>Panel 1.</p>
12 |   </div>
13 |   <div class="content" id="panel2a">
14 |     <p>Panel 2.</p>
15 |   </div>
16 |   <div class="content" id="panel3a">
17 |     <p>Panel 3.</p>
18 |   </div>
19 |   <div class="content" id="panel4a">
20 |     <p>Panel 4.</p>
21 |   </div>
22 | </div>
23 | ]]></content>
24 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
25 |   <tabTrigger>zf-vertical-tab</tabTrigger>
26 |   <description>ZURB Foundation Vertical Tabs</description>
27 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
28 |   <scope>text.html</scope>
29 | </snippet>


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.topbar.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 |   <nav class="top-bar" data-topbar>
 4 |     <ul class="title-area">
 5 |       <li class="name">
 6 |         <h1><a href="#">Something</a></h1>
 7 |       </li>
 8 |       <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
 9 |     </ul>
10 | 
11 |   <section class="top-bar-section">
12 |     <!-- Right Nav Section -->
13 |     <ul class="right">
14 |       <li class="active"><a href="#">Right Nav Button Active</a></li>
15 |       <li class="has-dropdown">
16 |         <a href="#">Right Button with Dropdown</a>
17 |         <ul class="dropdown">
18 |           <li><a href="#">First link in dropdown</a></li>
19 |         </ul>
20 |       </li>
21 |     </ul>
22 | 
23 |     <!-- Left Nav Section -->
24 |     <ul class="left">
25 |       <li><a href="#">Left Nav Button</a></li>
26 |     </ul>
27 |   </section>
28 | </nav>
29 | ]]></content>
30 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
31 |   <tabTrigger>zf-topbar</tabTrigger>
32 |   <description>ZURB Foundation 5 Topbar</description>
33 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
34 |   <scope>text.html</scope>
35 | </snippet>
36 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.tab.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <dl class="tabs" data-tab>
 4 |   <dd class="active"><a href="#panel1">Tab 1</a></dd>
 5 |   <dd><a href="#panel2">Tab 2</a></dd>
 6 |   <dd><a href="#panel3">Tab 3</a></dd>
 7 |   <dd><a href="#panel4">Tab 4</a></dd>
 8 | </dl>
 9 | <div class="tabs-content">
10 |   <div class="content active" id="panel1">
11 |     <p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p>
12 |   </div>
13 |   <div class="content" id="panel2">
14 |     <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
15 |   </div>
16 |   <div class="content" id="panel3">
17 |     <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
18 |   </div>
19 |   <div class="content" id="panel4">
20 |     <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
21 |   </div>
22 | </div>
23 | ]]></content>
24 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
25 |   <tabTrigger>zf-tab</tabTrigger>
26 |   <description>ZURB Foundation 5 Tabs</description>
27 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
28 |   <scope>text.html</scope>
29 | </snippet>
30 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.offcanvas.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <div class="off-canvas-wrap" data-offcanvas>
 4 |   <div class="inner-wrap">
 5 |     <nav class="tab-bar">
 6 |       <section class="left-small">
 7 |         <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
 8 |       </section>
 9 | 
10 |       <section class="middle tab-bar-section">
11 |         <h1 class="title">Foundation</h1>
12 |       </section>
13 | 
14 |       <section class="right-small">
15 |         <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
16 |       </section>
17 |     </nav>
18 | 
19 |     <aside class="left-off-canvas-menu">
20 |       <ul class="off-canvas-list">
21 |         <li><label>Foundation</label></li>
22 |         <li><a href="#">The Psychohistorians</a></li>
23 |         <li><a href="#">...</a></li>
24 |       </ul>
25 |     </aside>
26 | 
27 |     <aside class="right-off-canvas-menu">
28 |       <ul class="off-canvas-list">
29 |         <li><label>Users</label></li>
30 |         <li><a href="#">Hari Seldon</a></li>
31 |         <li><a href="#">...</a></li>
32 |       </ul>
33 |     </aside>
34 | 
35 |     <section class="main-section">
36 |       <!-- content goes here -->
37 |     </section>
38 | 
39 |   <a class="exit-off-canvas"></a>
40 | 
41 |   </div>
42 | </div>
43 | ]]></content>
44 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
45 |   <tabTrigger>zf-offcanvas</tabTrigger>
46 |   <description>ZURB Foundation 5 Offcanvas</description>
47 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
48 |   <scope>text.html</scope>
49 | </snippet>
50 | 


--------------------------------------------------------------------------------
/Snippets/Sublime Snippets/Snippet.accordion.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <ul class="accordion" data-accordion>
 4 |   <li class="accordion-navigation">
 5 |     <a href="#panel1a">Accordion 1</a>
 6 |     <div id="panel1a" class="content active">
 7 |       Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 8 |     </div>
 9 |   </li>
10 |   <li class="accordion-navigation">
11 |     <a href="#panel2a">Accordion 2</a>
12 |     <div id="panel2a" class="content">
13 |       Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
14 |     </div>
15 |   </li>
16 |   <li class="accordion-navigation">
17 |     <a href="#panel3a">Accordion 3</a>
18 |     <div id="panel3a" class="content">
19 |       Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
20 |     </div>
21 |   </li>
22 | </ul>
23 | ]]></content>
24 |   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
25 |   <tabTrigger>zf-accordion</tabTrigger>
26 |   <description>ZURB Foundation 5 Accordion</description>
27 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
28 |   <scope>text.html</scope>
29 | </snippet>
30 | 


--------------------------------------------------------------------------------
/README.mdown:
--------------------------------------------------------------------------------
 1 | ## ZURB Foundation 5 Sublime Text Snippets
 2 | 
 3 | #### Installation on Sublime Text 2 and Sublime Text 3
 4 | 
 5 | ###### Mac/Linux Instructions
 6 | 
 7 | 1. CD into Sublime Text packages folder
 8 | 
 9 |     `cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages`
10 | 
11 |   or
12 | 
13 |     `cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages`
14 | 
15 | 2. Clone repository into packages folder
16 | 
17 | `git clone https://github.com/zurb/foundation-5-sublime-snippets.git`
18 | 
19 | ###### Windows Instructions
20 | 
21 | `cd "%AppData%\Sublime Text 3\Packages\User"`
22 | `git clone https://github.com/zurb/foundation-5-sublime-snippets.git`
23 | 
24 | * Each snippet is prefixed with `zf-` (ZURB Foundation).
25 | * Each snippet is singular, unless the name of the component ends in an s (offcanvas)
26 | * Available classes are included as comments in the snippets
27 | 
28 | ### Available Components
29 | 
30 | Component        | Usage
31 | :--------------- | :-----------:
32 | Offcanvas        | zf-offcanvas + tab
33 | Topbar           | zf-topbar + tab
34 | Sidenav          | zf-sidenav + tab
35 | Subnav           | zf-subnav + tab
36 | Breadcrumbs      | zf-breadcrumb + tab
37 | Pagination       | zf-pagination + tab
38 | Orbit            | zf-orbit + tab
39 | Clearing         | zf-clearing + tab
40 | Buttons          | zf-button + tab
41 | Button Groups    | zf-button-group + tab
42 | Split Buttons    | zf-split-button + tab
43 | Dropdown Buttons | zf-dropdown-button + tab
44 | Reveal           | zf-reveal + tab
45 | Alerts           | zf-alert + tab
46 | Panels           | zf-panel + tab
47 | Pricing Tables   | zf-pricing-table + tab
48 | Progress Bars    | zf-progress-bar + tab
49 | Accordion        | zf-accordion + tab
50 | Tabs             | zf-tab + tab
51 | Vertical Tabs    | zf-vertical-tab + tab
52 | Horizontal Iconbar| zf-iconbar-horizontal + tab
53 | Vertical Iconbar | zf-iconbar-vertical + tab
54 | Flex Video		 | zf-video + tab
55 | 
56 | 
57 | 
58 | ### Contributing
59 | 
60 | 1. Fork it.
61 | 2. Create your feature branch (`git checkout -b my-new-feature`).
62 | 3. Test your changes to the best of your ability.
63 | 4. Update the documentation to reflect your changes if they add or changes current functionality.
64 | 5. Commit your changes (`git commit -am 'Added some feature'`).
65 | 6. Push to the branch (`git push origin my-new-feature`).
66 | 7. Create a new pull request.
67 | 
68 | 


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