Skip to content
This repository has been archived by the owner on Sep 10, 2019. It is now read-only.

added Haml snippets #22

Closed
wants to merge 5 commits into from
Closed

added Haml snippets #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d031904
added haml snippets
kaikuchn Aug 8, 2014
1d9b937
added note on how to generate haml snippets
kaikuchn Aug 8, 2014
dd575c7
added zfh- list to readme
kaikuchn Aug 8, 2014
b7ad8ea
moved haml snippets into subdirectory
kaikuchn Aug 8, 2014
81f236d
Merge branch 'master' of github.com:kaikuchn/foundation-5-sublime-sni…
kaikuchn Aug 8, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 23 additions & 22 deletions README.mdown
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,33 +23,34 @@ or
`git clone https://github.com/zurb/foundation-5-sublime-snippets.git`

* Each snippet is prefixed with `zf-` (ZURB Foundation).
* Each haml snippet is prefixed with `zfh-`.
* Each snippet is singular, unless the name of the component ends in an s (offcanvas)
* Available classes are included as comments in the snippets

### Available Components

Component | Usage
:--------------- | :-----------:
Offcanvas | zf-offcanvas + tab
Topbar | zf-topbar + tab
Sidenav | zf-sidenav + tab
Subnav | zf-subnav + tab
Breadcrumbs | zf-breadcrumb + tab
Pagination | zf-pagination + tab
Orbit | zf-orbit + tab
Clearing | zf-clearing + tab
Buttons | zf-button + tab
Button Groups | zf-button-group + tab
Split Buttons | zf-split-button + tab
Dropdown Buttons | zf-dropdown-button + tab
Reveal | zf-reveal + tab
Alerts | zf-alert + tab
Panels | zf-panel + tab
Pricing Tables | zf-pricing-table + tab
Progress Bars | zf-progress-bar + tab
Accordion | zf-accordion + tab
Tabs | zf-tab + tab
Vertical Tabs | zf-vertical-tab + tab
Component | Usage (HTML) | Usage (Haml)
:--------------- | :----------- | :-----------:
Offcanvas | zf-offcanvas + tab | zfh-offcanvas + tab
Topbar | zf-topbar + tab | zfh-topbar + tab
Sidenav | zf-sidenav + tab | zfh-sidenav + tab
Subnav | zf-subnav + tab | zfh-subnav + tab
Breadcrumbs | zf-breadcrumb + tab | zfh-breadcrumb + tab
Pagination | zf-pagination + tab | zfh-pagination + tab
Orbit | zf-orbit + tab | zfh-orbit + tab
Clearing | zf-clearing + tab | zfh-clearing + tab
Buttons | zf-button + tab | zfh-button + tab
Button Groups | zf-button-group + tab | zfh-button-group + tab
Split Buttons | zf-split-button + tab | zfh-split-button + tab
Dropdown Buttons | zf-dropdown-button + tab | zfh-dropdown-button + tab
Reveal | zf-reveal + tab | zfh-reveal + tab
Alerts | zf-alert + tab | zfh-alert + tab
Panels | zf-panel + tab | zfh-panel + tab
Pricing Tables | zf-pricing-table + tab | zfh-pricing-table + tab
Progress Bars | zf-progress-bar + tab | zfh-progress-bar + tab
Accordion | zf-accordion + tab | zfh-accordion + tab
Tabs | zf-tab + tab | zfh-tab + tab
Vertical Tabs | zf-vertical-tab + tab | zfh-vertical-tab + tab



Expand Down
25 changes: 25 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.accordion.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<snippet>
<content><![CDATA[
%dl(class="accordion" data-accordion)
%dd
%a(href="#panel1")
Accordion 1
%div(id="panel1" class="content active")
Panel 1 Content
%dd
%a(href="#panel2")
Accordion 2
%div(id="panel2" class="content")
Panel 2 Content
%dd
%a(href="#panel3")
Accordion 3
%div(id="panel3" class="content")
Panel 3 Content
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-accordion</tabTrigger>
<description>ZURB Foundation 5 Accordion</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
14 changes: 14 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.alerts.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<snippet>
<content><![CDATA[
/ Optional classes: [success alert secondary] [radius round]
%div(data-alert class="alert-box")
/ Your content goes here
%a(href="#" class="close")
&times;
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-alert</tabTrigger>
<description>ZURB Foundation 5 Alert</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
22 changes: 22 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.breadcrumb.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<snippet>
<content><![CDATA[
%ul(class="breadcrumbs")
%li
%a(href="#")
Home
%li
%a(href="#")
Features
%li(class="unavailable")
%a(href="#")
Gene Splicing
%li(class="current")
%a(href="#")
Cloning
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-breadcrumb</tabTrigger>
<description>ZURB Foundation 5 Breadcrumbs</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
30 changes: 30 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.button-bar.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<snippet>
<content><![CDATA[
%div(class="button-bar")
%ul(class="button-group")
%li
%a(href="#" class="button")
Button 1
%li
%a(href="#" class="button")
Button 2
%li
%a(href="#" class="button")
Button 3
%ul(class="button-group")
%li
%a(href="#" class="button")
Button 1
%li
%a(href="#" class="button")
Button 2
%li
%a(href="#" class="button")
Button 3
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-button-bar</tabTrigger>
<description>ZURB Foundation 5 Button Bar</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
22 changes: 22 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.button-group.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<snippet>
<content><![CDATA[
/ Button Group Optional Classes: [radius round]
%ul(class="button-group")
/ Button Color Classes: [secondary alert success]
/ Button Size Classes: [tiny small large]
%li
%a(href="#" class="button")
Button 1
%li
%a(href="#" class="button")
Button 2
%li
%a(href="#" class="button")
Button 3
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-button-group</tabTrigger>
<description>ZURB Foundation 5 Button Groups</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
15 changes: 15 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.button.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<snippet>
<content><![CDATA[
/ Size Classes: [tiny small large]
/ Radius Classes: [radius round]
/ Color Classes: [secondary success alert]
/ Disabled Class: disabled
%a(href="#" class="button")
Default Button
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-button</tabTrigger>
<description>ZURB Foundation 5 Buttons</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
19 changes: 19 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.clearing.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<snippet>
<content><![CDATA[
%ul(class="clearing-thumbs" data-clearing)
%li
%a(href="path/to/your/img")
%img(src="path/to/your/img-th")
%li
%a(href="path/to/your/img")
%img(src="path/to/your/img-th")
%li
%a(href="path/to/your/img")
%img(src="path/to/your/img-th")
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-clearing</tabTrigger>
<description>ZURB Foundation 5 Clearing</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
25 changes: 25 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.dropdown-button.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<snippet>
<content><![CDATA[
/ Size Classes: [tiny small medium large]
/ Color Classes: [secondary alert success]
/ Radius Classes: [radius round]
%a(href="#" data-dropdown="drop" class="button dropdown")
Dropdown Button
%br
%ul(id="drop" data-dropdown-content class="f-dropdown")
%li
%a(href="#")
This is a link
%li
%a(href="#")
This is another
%li
%a(href="#")
Yet another
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-dropdown-button</tabTrigger>
<description>ZURB Foundation 5 Dropdown Buttons</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
11 changes: 11 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.full-grid.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<snippet>
<content><![CDATA[
%div(class="row")
%div(class="small-12 medium-12 large-12 columns")
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-full-grid</tabTrigger>
<description>ZURB Foundation Full Grid</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
12 changes: 12 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.half-grid.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<snippet>
<content><![CDATA[
%div(class="row")
%div(class="small-6 medium-6 large-6 columns")
%div(class="small-6 medium-6 large-6 columns")
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-half-grid</tabTrigger>
<description>ZURB Foundation Half Grid</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
35 changes: 35 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.offcanvas.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<snippet>
<content><![CDATA[
%div(class="off-canvas-wrap")
%div(class="inner-wrap")
%nav(class="tab-bar")
%section(class="left-small")
%a(class="left-off-canvas-toggle menu-icon")
%span
%section(class="right tab-bar-section")
%h1(class="title")
Foundation

/ Off Canvas Menu
%aside(class="left-off-canvas-menu")
%ul(class="off-canvas-list")
%li
%label
Foundation
%li
%a(href="#")
The Psychohistorians
...

%section(class="main-section")
/ content goes in here

/ close the off-canvas menu
%a(class="exit-off-canvas")
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-offcanvas</tabTrigger>
<description>ZURB Foundation 5 Offcanvas</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
28 changes: 28 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.orbit-content.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<snippet>
<content><![CDATA[
%ul(class="example-orbit-content" data-orbit)
%li(data-orbit-slide="headline-1")
%div
%h2
Headline 1
%h3
Subheadline
%li(data-orbit-slide="headline-2")
%div
%h2
Headline 2
%h3
Subheadline
%li(data-orbit-slide="headline-3")
%div
%h2
Headline 3
%h3
Subheadline
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-orbit-content</tabTrigger>
<description>ZURB Foundation 5 Orbit Content Slider</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
22 changes: 22 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.orbit.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<snippet>
<content><![CDATA[
%ul(class="example-orbit" data-orbit)
%li
%img(src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1")
%div(class="orbit-caption")
Caption One.
%li
%img(src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2")
%div(class="orbit-caption")
Caption Two.
%li
%img(src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3")
%div(class="orbit-caption")
Caption Three.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-orbit</tabTrigger>
<description>ZURB Foundation 5 Orbit Slider</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
37 changes: 37 additions & 0 deletions Snippets/Sublime Snippets/haml/Snippet.pagination.haml.sublime-snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<snippet>
<content><![CDATA[
%ul(class="pagination")
%li(class="arrow unavailable")
%a(href="")
&laquo;
%li(class="current")
%a(href="")
1
%li
%a(href="")
2
%li
%a(href="")
3
%li
%a(href="")
4
%li(class="unavailable")
%a(href="")
&hellip;
%li
%a(href="")
12
%li
%a(href="")
13
%li(class="arrow")
%a(href="")
&raquo;
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>zfh-pagination</tabTrigger>
<description>ZURB Foundation 5 Pagination</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.haml</scope>
</snippet>
Loading