====== 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 [[http://foundation.zurb.com/develop/download.html#customizeFoundation|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. ===== Installing the Required Libraries ===== 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 indeed an easy way to get Foundation started (wait until you read about Grunt later on this page though). 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 and grunt packages === 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 === Depending on your personal preferences, or experience, you might want to use compass. Although, it might be interesting to note that compass is entirely Ruby based, meaning it uses the Ruby Sass library that is **much slower** than the C/C++ library used by libsass (see below). <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 important round 75%>At one time, using foundation new web --libsass issued 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) Had to reboot the machine to get it to work without error again !? </WRAP> To start a new grunt libsass project: <code> cd /var/www foundation new my_project --libsass cd my_project grunt </code> Your project is now "watched" by grunt and any addition or modification to the files in the //my_project/scss// directory wil be compiled into the //my_project/css/app.css// file. <code> Running "sass:dist" (sass) task File "css/app.css" created. Running "watch" task Waiting... OK >> File "scss/app.scss" changed. Running "sass:dist" (sass) task File "css/app.css" created. Done, without errors. Completed in 0.681s at Sun Jan 05 2014 12:25:12 GMT+0100 (CET) - Waiting... </code> To learn more about grunt, the way it works and how to use it, [[http://gruntjs.com/getting-started|read grunt's getting started guide]]. If you don't have time for that, reviewing the //Gruntfile.js// and //package.json// files at the root level of the project, will already give you good indications about what it does...