Coda 2 clips for Foundation 5 CSS Components and Javascript plugins
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Foundation Clips for Coda

Coda 2 Clips library for Foundation CSS Framework.

Speed up your Foundation work flow by using Coda 2's clips and this library! Prototype websites faster than you can imagine.


-Download or clone this repository.

-Navigate to the downloaded folder and double click Foundation.clips to install



Clip Shortcuts

All clip shortcuts are prepended with fd (FounDation...I dunno). You could probably guess most of these, but if you're wondering which shortcuts do what, here's the complete list of all the shortcuts.

fddoc - Creates an html5 document with js and css files linked

fdbower - Creates a new document with all of the linked bower components, ready to go. Specifically meant for use with a CodeKit Foundation Installation.

fdrow - Creates a new div element with class of row

fdcolumn - Creates a new div element with large, medium and small column classes

fdgrid - Creates a new div.row element and a div element with large, medium and small classes

fd2up - Creates a row and 2 columns spanning 6 grid column spaces

fd3up - Creates a row and 3 columns spanning 4 grid column spaces

fd4up - Creates a row and 4 columns spanning 3 grid column spaces

fdrightsb - Creates a row and 2 columns, left column spans 8 grid column spaces and right column spans 4 grid column spaces, creating a right side bar.

fdleftsb - Creates a row and 2 columns, left column spans 4 grid column spaces and right column spans 8 grid column spaces, creating a left side bar.

fdblock - Creates a new block grid element

fdbtn - Creates a button element

fdbtngroup - Creates a button group section

fdclosebtn - Creates a close button -- ProTip: Use this inside of an fdcallout!

fdslider - Creates a range slider element

fdcheck - Creates a check box switch element

fdradio - Creates a radio group switch element

fdmenu - Creates a menu section

fdmenudrop - Creates a dropdown menu section

fdmenudrill - Creates a drilldown menu section

fdmenuacc - Creates an accordion menu section

fdtopbar - Creates a fully responsive top bar section

fdmagellan - Creates a Magellan section

fdpagination - Creates a pagination section

fdbreadcrumbs - Creates a breadcrumbs section

fdaccordion - Creates an accordion section

fdcallout - Creates a callout element

fddropdown - Creates a dropdown button element

fdmediaobj - Creates a media object section

fdoffcanvas - Creates an off-canvas section

fdreveal - Creates a reveal modal section

fdtable - Creates a table section

fdtabs - Creates a tab section

fdbadge - Creates a badge element

fdflex - Creates a flex video container

fdlabel - Creates a label element

fdorbit - Creates an orbit slider section

fdprogress - Creates a progress bar element

fdthumb - Creats a thumbnail img element

fdtooltip - Creates the attributes for a tooltip element

fdformerror - Creates a form error element

fdinterchange - Creates and interchange element -- ProTip: Change the <div> tag for an <img> tag for responsive images

fdsticky - Creates a sticky element

fdmedia - Sass mixin for media queries

fdgridrow - Sass mixin for adding a grid row

fdgridcol - Sass mixin for adding a grid column