applications:devtools:foundation [LMDE journeys]

A PCRE internal error occured. This might be caused by a faulty plugin

====== Differences ====== This shows you the differences between two versions of the page.

--- applications:devtools:foundation [2014/01/04 01:00]
admin [Install Node.js (+ NPM)]
+++ applications:devtools:foundation [2014/01/05 12:50] (current)
admin [Install Node.js (+ NPM)]
@@ Line 15: / Line 15: @@
   * 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.
+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.
-===== Install SASS/Compass =====
+===== 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 probably the easiest way to get Foundation started.
+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:
@@ Line 85: / Line 85: @@
 Should end with: "It worked"...
-=== And the bower package ===
+=== 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>
@@ Line 98: / Line 98: @@
 ==== 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...