A repackaging of Foundation that works with Rails, Sprockets and Compass. No npm or bower required, just add it your Gemfile.
Add this line to your application's Gemfile:
gem 'foundation-sass',
:git => 'https://github.com/ryanmark/foundation-sass.git'And then execute:
$ bundleTo use all of foundation, include it in your scss and javascript:
In your scss:
@import "foundation";In your javascript (if you're using sprockets or rails):
//= require vendor/jquery
//= require foundation
$(document).foundation();If you have an existing Compass project:
-
Require
foundation-sassinconfig.rb:require 'foundation-sass'
-
Install Foundation with:
$ bundle exec compass install foundation -r foundation-sass
If you are creating a new Compass project, you can generate it with foundation-sass support:
$ bundle exec compass create my-new-project -r foundation-sass --using foundationor, alternatively, if you're not using a Gemfile for your dependencies:
$ compass create my-new-project -r foundation-sass --using foundationThis will create a new Compass project with the following files in it:
- app.scss - main project Sass file, imports Foundation and variables.
- _settings.scss - all of Foundation variables, override them here.
Some foundation-sass mixins may conflict with the Compass ones. If this happens, change the import order so that Compass mixins are loaded later.
You can configure foundation via scss variables. Make sure you defined your variables before you import foundation or any of it's components. Check out the list of settings.
If you don't want to use all of foundation, you can choose components to load. Below are example files for sass and sprockets that load all components.
@import 'foundation/components/grid';
@import 'foundation/components/accordion';
@import 'foundation/components/alert-boxes';
@import 'foundation/components/block-grid';
@import 'foundation/components/breadcrumbs';
@import 'foundation/components/button-groups';
@import 'foundation/components/buttons';
@import 'foundation/components/clearing';
@import 'foundation/components/dropdown';
@import 'foundation/components/dropdown-buttons';
@import 'foundation/components/flex-video';
@import 'foundation/components/forms';
@import 'foundation/components/icon-bar';
@import 'foundation/components/inline-lists';
@import 'foundation/components/joyride';
@import 'foundation/components/keystrokes';
@import 'foundation/components/labels';
@import 'foundation/components/magellan';
@import 'foundation/components/orbit';
@import 'foundation/components/pagination';
@import 'foundation/components/panels';
@import 'foundation/components/pricing-tables';
@import 'foundation/components/progress-bars';
@import 'foundation/components/range-slider';
@import 'foundation/components/reveal';
@import 'foundation/components/side-nav';
@import 'foundation/components/split-buttons';
@import 'foundation/components/sub-nav';
@import 'foundation/components/switches';
@import 'foundation/components/tables';
@import 'foundation/components/tabs';
@import 'foundation/components/thumbs';
@import 'foundation/components/tooltips';
@import 'foundation/components/top-bar';
@import 'foundation/components/type';
@import 'foundation/components/offcanvas';
@import 'foundation/components/visibility';//= require foundation/foundation
//= require foundation/foundation.abide
//= require foundation/foundation.accordion
//= require foundation/foundation.alert
//= require foundation/foundation.clearing
//= require foundation/foundation.dropdown
//= require foundation/foundation.equalizer
//= require foundation/foundation.interchange
//= require foundation/foundation.joyride
//= require foundation/foundation.magellan
//= require foundation/foundation.offcanvas
//= require foundation/foundation.orbit
//= require foundation/foundation.reveal
//= require foundation/foundation.slider
//= require foundation/foundation.tab
//= require foundation/foundation.tooltip
//= require foundation/foundation.topbar
$(document).foundation();- Fork it ( https://github.com/ryanmark/foundation-sass/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request