**This is an old revision of the document!** ----
====== The Foundation Framework ====== Foundation presents itself as [[http://foundation.zurb.com/|The most advanced responsive front-end framework in the world.]]. A bold assumption! But it must be admitted that the guys at Zurb did a pretty good job at compiling an easy to grasp, efficient HTML/CSS/JS framework that offers everyone a solid ground for developping responsives HTML5 websites. ===== SASS ===== Foundation, at its very minimum, is a grid layout. But it has much more to offer. Not only does it bring you a framework that allows for responsive grid positioning of elements on your pages, it also uses Sass (SCSS). In case you're unaware of what Sass (Syntactically Awesome StyleSheets) is, it's recommended that you have a look at [[http://www.sass-lang.com/|the Sass website]] to get an introduction to it. To summarize what it brings to the web developers, let's pick some of it's features: * Fully CSS3-compatible * Language extensions such as variables, nesting, and mixins * Many useful functions for manipulating colors and other values * Advanced features like control directives for libraries * Well-formatted, customizable output * Firebug integration Although it is definitely possible to use Foundation without Sass, using the pure CSS version of it, not only is it easier and faster to use, you'll also enter a new area using it, that's already, by itself, a good reason to use it. ===== Install SASS/Compass ===== To fully benefit from the potential of Foundation, it's recommended you use Sass, also to deploy new sites, you'll need to install [[http://compass-style.org/|Compass]]. I must admit that I still don't really understand what Compass has to offer, nevertheless is it probably the easiest way to get Foundation started. Sass and Compass both require Ruby to run on your system. On LMDE Ruby is readily available as can be notice by issuing the following command: <code> ruby -v ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux] </code> ==== Ruby Required ==== In case you do not have Ruby installed, it's recommended that you use [[http://rvm.io/|RVM (Ruby Version Manager)]] to have a nice and flexible installation of it on your system. ==== Get the Gems ==== The first step is to install the Sass and Compass gems: <code> gem install sass gem install compass </code> Depending on your Ruby installation (RVM or not) you might have to use //sudo// to install your gems. ==== Update Gems on Debian ==== In case you'd like to update your gems on Debian, //gem update --system// won't work: <code> sudo gem update --system ERROR: While executing gem ... (RuntimeError) gem update --system is disabled on Debian, because it will overwrite the content of the rubygems Debian package, and might break your Debian system in subtle ways. The Debian-supported way to update rubygems is through apt-get, using Debian official repositories. If you really know what you are doing, you can still update rubygems by setting the REALLY_GEM_UPDATE_SYSTEM environment variable, but please remember that this is completely unsupported by Debian. </code> If you really need to update: <code> sudo apt-get remove rubygems wget http://production.cf.rubygems.org/rubygems/rubygems-2.1.11.tgz tar xzf rubygems-1.3.7.tgz cd rubygems-1.3.7 sudo ruby setup.rb </code> ==== Install Node.js (+ NPM) ==== Foundation requires [[http://nodejs.org/|node.js]], you can download the linux binaries from [[http://nodejs.org/download/]]. Also, here's a [[http://blog.nicolargo.com/2011/09/une-introduction-a-node-js.html|good introduction to node (in french)]]. <code> mkdir ~/src cd ~/src git clone https://github.com/joyent/node.git cd ~/src/node git checkout v0.10.24 sudo mkdir /opt/node ./configure --prefix=/opt/node make sudo make install echo 'export PATH=$PATH:/opt/node/bin' >> ~/.profile echo 'export NODE_PATH=/opt/node:/opt/node/lib/node_modules' >> ~/.profile source ~/.profile </code> That's it! Check that node is well installed: <code> node -v v0.10.24 </code> === Add NPM (Node Package Manager) === NPM allows to extend Node.js functions by adding Node.js packages. <code> curl https://npmjs.org/install.sh | sudo sh -c 'export PATH=$PATH:/opt/node/bin ; export NODE_PATH=/opt/node:/opt/node/lib/node_modules ; sh' </code> Should end with: "It worked"... === And the bower package === Notice that we need sudo to get sufficient rights on /opt/node, but sudo's $PATH doesn't (yet) include node's paths: <code> sudo su echo 'export PATH=$PATH:/opt/node/bin' >> ~/.profile echo 'export NODE_PATH=/opt/node:/opt/node/lib/node_modules' >> ~/.profile source ~/.profile npm install -g bower grunt-cli exit </code> ==== Deploy Foundation Sites ==== Now that we have all the required tools, let's go ahead an create our first foundation project: === Using compass === <code> cd /var/www/ foundation new my_project cd my_project compass watch </code> Et voilà!\\ A brand new, foundation based, website.\\ Each time you'll make a change to the scss files compass will compile them. === Using Grunt & Libsass === [[http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/]] If you want the most efficient way to compile your .scss files, you can use libsass, which is a C/C++ port of the Sass CSS precompiler (the ordinarily Sass is Ruby based).\\ As we already have grunt installed, there is a [[https://github.com/sindresorhus/grunt-sass|grunt-sass plugin]] that provides a simpler way to use libsass and enjoy the incredible Sass compilation speeds. <WRAP todo>Still didn't figure out completely how to achieve this. foundation new web --libsass issue an error: /var/lib/gems/1.9.1/gems/thor-0.18.1/lib/thor/actions.rb:110:in `expand_path': No such file or directory - getcwd (Errno::ENOENT)</WRAP>
