ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Zurb Foundation 4 Snippets

by liamr ALL

A Textmate/Sublime Text 2 bundle for Zurb's Foundation framework.

Labels snippets

Details

  • 2013.06.19.22.03.50
  • github.​com
  • github.​com
  • 7 years ago
  • 11 minutes ago
  • 7 years ago

Installs

  • Total 6K
  • Win 3K
  • Mac 2K
  • Linux 736
Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2 Mar 1 Feb 29 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16
Windows 0 1 1 1 0 0 1 1 0 0 1 1 1 0 0 0 0 0 1 0 1 1 0 0 0 0 1 0 0 0 1 0 0 0 1 2 0 0 0 0 1 1 1 0 1 1
Mac 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0
Linux 1 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

Textmate bundle for Zurb Foundation 4

A set of snippets for Zurb's awesome responsive HTML framework. Going to add more, but there are a few snippets at the moment to make your day a little better.

Installing

cd ~/Library/Application\ Support/TextMate/Bundles/
git clone git://github.com/liamr/Zurb-Foundation-Textmate-Bundle.git Zurb\ Foundation.tmbundle

Changelog

1.1

All snippets now have 'zf' prepended to avoid conflict with other installed Bundles. Updated documentation to reflect.

1.2

Updated to work with Foundation 4 - thanks to Kramsee

Layout & Grid

zfpage Creates a new Foundation HTML page

zfc Creates a Container

<div class="container" id="name">
    (cursor)    
</div>

zfr Creates a Row

<div class="row" id="name">
    (cursor)    
</div>

zfcr Creates a Container & Row

<div class="container" id="name">
    <div class="row" id="name">
        (cursor)    
    </div>
</div>

zfc1 - zfc12 Creates columns based on the number ie:

zfc6 creates

<div class="six columns" id="name">
    (cursor)
</div>

zfcc Creates a basic column layout and lets you specify the number you want ie:

<div class="[one - twelve] column[s]" id="name">
    (cursor)
</div>

zf2col,zf3col, zf4col create a 2, 3 or 4 column layout surrounded by a row and container:

<div class="container" id="#">
    <div class="row" id="#">

        <div class="six columns" id="#">

        </div> 


        <div class="six columns" id="#">

        </div> 
    </div>
</div>

Buttons

zfbtn Creates a basic button and lets you specify the options

<a href="#" class="[small, medium, large] [white, blue, red, black] button">(Cursor)</a>

zfnbtn Creates a nice button and lets you specify the options

<a href="#" class="nice radius [small, medium, large] [white, blue, red, black] button">(Cursor)</a>

Block Grids

zfblock2, zfblock3, zfblock4, zfblock5 create
    block grids that are 2, 3, 4 or 5 up:

<ul class="block-grid five-up">
    <li></li>
</ul>

More coming soon

I want to add more as soon as possible, and also work this into a Sublime Text 2 bundle! If you have suggestions let me know!

Credit

Cheers to Fred Oliveira - https://github.com/fredoliveira/textmate-960gs/blob/master/README.markdown - based mine off his 960.gs