Find solution
how can I integrate slim framework in cakephp?

How do I integrate Sass + Compass zurb-foundation 3 framework within express 3 nodejs app?

  • I want to integrate zurb-foundation within my nodejs express app. I'm not interested in just downloading the compiled CSS version as I want to utilize mixins, functions, and variables. I also know that their are stable Twitter bootstrap modules that I can install. I am only interested in using zurb foundation though.

  • Answer:

    Cd into your project Easy Version: Go to http://compass-style.org/install/ and use the command generated under the headline "Tell us about your project and we'll help you get it set up"  If for some reason that didn't work.. Run the command compass create plus any of the options below since you probably already have preexisting directories for your css/js/img/etc. (Taking this from 's answer) --sass-dir SRC_DIR The source directory where you keep your sass stylesheets. --css-dir CSS_DIR The target directory where you keep your css stylesheets. --images-dir IMAGES_DIR The directory where you keep your images. --javascripts-dir JS_DIR The directory where you keep your javascripts. --fonts-dir FONTS_DIR The directory where you keep your fonts. Also use the --bare option to exclude compass's starter stylesheets. Run bower install foundation Open up the config.rb file that compass auto-generated in the root of your directory.  Import foundation under the appropriate comment # Require any additional compass plugins here. add_import_path "bower_components/foundation/scss" Now simply add @import "foundation" to any of your scss files to include foundation.  And run compass watch to compile your scss!

Smitha Milli at Quora Visit the source

Was this solution helpful to you?

Other answers

Ensure you have ruby, rubygems and ruby-dev installed. Then cd to your project folder. Install bundler with: sudo gem install bundler: Create a file named Gemfile with the following contents: source 'https://rubygems.org' gem 'zurb-foundation' Then run: bundle install This will bring in the gems required to run Foundation. Then follow the instructions for installing a new project from http://foundation.zurb.com/docs/gem-install.php I'd advise using some more options when creating your compass project so that your asset folders match your current project. Not choosing the right options will dump the images, stylesheets and scripts into your current folder, which is not optimal: --sass-dir SRC_DIR The source directory where you keep your sass stylesheets. --css-dir CSS_DIR The target directory where you keep your css stylesheets. --images-dir IMAGES_DIR The directory where you keep your images. --javascripts-dir JS_DIR The directory where you keep your javascripts. --fonts-dir FONTS_DIR The directory where you keep your fonts. Keep your SASS files out of the public folder, and switch on relative_assets in the config.rb file that gets generated (it helps with translating image paths to URLs). Start: bundle exec compass watch Edit a SASS file and save it. The CSS will be generated automatically, and your next refresh will show your changes. Now you're using Foundation! :)

Marlin Forbes

I found a great tutorial for integrating it with Yeoman: http://patrickburke.de/index.php/yeoman-foundation-sass-luv I did a few additional modifications to my Gruntfile (which is used to call Compass and compile the Sass/SCSS to CSS). Here's what my compass section looks like. // compile .scss/.sass to .css using Compass compass: { dist: { // Configuration Reference options: { css_dir: 'app/stylesheets', sass_dir: 'app/sass', images_dir: 'app/images', javascripts_dir: 'temp/javascripts', force: true, require: 'zurb-foundation' } } },

Vincent Mac

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.