Gems

We've created a couple awesome gems that will help you use Foundation in new ways!

Compass/SASS

Rails

• What is this Thing?

  Our Foundation Compass Gem makes is really easy to create a project that uses Compass and SASS to add to the speed and flexibility of Foundation. Following our instructions will ensure you have all the dependencies installed on your machine and are ready to rock 'n roll.

  Installation

  The following line of code, ran in the command line, will install our Foundation Compass Gem, as well as, all its dependencies onto your machine. From here you'll be able to create your first project and start crushing it.

  Create Your First Project

  In the command line, navigate to the directory you'd like to use for your new project or include the path with your 'compass create' command. This will create a directory that includes all the Foundation files.

  Our Compass Gem defaults to SCSS, but can easily be switched to SASS on the fly when you create a project, just run the following:

  Adding to Existing Projects

  We've also made it very easy to add our gem to existing project. You just need to make sure to add require "ZURB-foundation" to the top of your config file. Then navigate to your project directory and run:

  Customizable Settings

  We're in the process of making our gem even more customizable! Here are the settings we've extrapolated so far, just uncomment them and change to what you need:

  • $experimental-support-for-khtml– Set this to true to add support
  • $experimental-support-for-microsoft– Set this to true to add support
  • $helvetica-font-stack– Customize the default font stack we use.
  • $body-font-size– Default font size.
  • $body-font-family– Default font family.
  • $body-background– Default background color.
  • $body-line-height– Default line height.
  • $body-color– Default font color.
  • $grid-max-width– Change the size of the grid.
  • $grid-min-width– How small the grid can go.
  • $support-block-grid-nth-child– Set to true if you want support.
  • $button-transition-duration– How long the hover effects will last.
  • $default-color– The main color for styling your elements.

  Using Compass to Compile Your SASS/SCSS into CSS

  Navigate into your new project directory from the command line and run the following line, which will tell Compass to watch your sass files for when you save. Each time you save, Compass will compile the file into plain CSS and give you error if there are any.

  Contributing to the Gem

  This little gem is hosted on git. If you have questions or bugs please file them through Git, but you can also talk to us if you want to get into Foundation and help build out the next generation way of rapidly prototyping. Yeah, we're thinking big.

• Installation

  Inside your Gemfile add the following line:

  Get Started

  If you want to include Foundation on all of your application pages (and why wouldn't you!) then run the following to append foundation to your application sprockets files:

  Advanced

  You can also manually include Foundation on specific pages using:

  Contributing to the Gem

  This little gem is hosted on git. If you have questions or bugs please file them through Git, but you can also talk to us if you want to get into Foundation and help build out the next generation way of rapidly prototyping. Yeah, we're thinking big.