compass/zurb-foundation via gem with yeoman/Gruntfile.js

Starting a frontend project (e.g. an AngularJS project) with yeoman helps us generate a bunch of default directory layout and a pre-set Gruntfile.js configuration file. This configuration file contains most of the necessary settings that controls our project requirements and behaviour.

In this post, I will explain how I get compass and zurb-foundation running seamlessly as scss imports in my yeoman-generated project.


grunt.initConfig({
 yeoman: yeomanConfig,
 watch: {
 coffee: {
 files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
 tasks: ['coffee:dist']
 },
 coffeeTest: {
 files: ['test/spec/{,*/}*.coffee'],
 tasks: ['coffee:test']
 },
 compass: {
 files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
 tasks: ['compass']
 },
 livereload: {
 files: [
 '<%= yeoman.app %>/{,*/}*.html',
 '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
 '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
 '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
 ],
 tasks: ['livereload']
 }
 },

Update our configuration for compass

compass: {
 options: {
 config: '.compass.rb',
 force: true
 },
 dist: {},
 server: {
 options: {
 debugInfo: true
 }
 }
 },

.compass.rb is references in a new file we create with the following:

require 'zurb-foundation'

http_path = "/"
sass_dir = 'app/styles'
css_dir = '.tmp/styles'
images_dir = 'app/images'
javascript_dir = 'app/scripts'
fonts_dir = 'app/styles/fonts'
import_path = 'app/components'

Since this is a ruby file, it loads up zurb-foundation in its first line.

We install zurb-foundation with gem as follows (if you do not have rvm or gem correctly configured, check out my previous post guiding you to set up rvm step-by-step).

$ rvm use 1.9.3   # if we have not done this yet
$ gem install zurb-foundation

Once we have zurb-foundation installed, it is trivial to import the zurb-foundation framework into our scss file.

@import "foundation"

Quite a bit of hassle to get to this point but now we can mess with zurb-foundation framework in our project!

Zurb foundation includes a whole range of scss and we are interested in its location so that we can specify the appropriate @import statement to use the appropriate components to style our application.  Here’s how we find the location of our recently installed zurb-foundation library.

$ irb
1.9.3-p448 :001 > spec = Gem::Specification.find_by_name("zurb-foundation")
=> #<Gem::Specification:0x3fe2b185bb40 zurb-foundation-4.2.3>
1.9.3-p448 :002 > gem_root = spec.gem_dir
=> "/Users/calvin/.rvm/gems/ruby-1.9.3-p448/gems/zurb-foundation-4.2.3"
1.9.3-p448 :003 >

So, if we change into this directory,

$ cd /Users/calvin/.rvm/gems/ruby-1.9.3-p448/gems/zurb-foundation-4.2.3
$ tree scss

scss
├── foundation
│ ├── _variables.scss
│ └── components
│      ├── _alert-boxes.scss
│      ├── _block-grid.scss
│      ├── _breadcrumbs.scss
│      ├── _button-groups.scss
│      ├── _buttons.scss
│      ├── _clearing.scss
│      ├── _custom-forms.scss
│      ├── _dropdown-buttons.scss
│      ├── _dropdown.scss
│      ├── _flex-video.scss
│      ├── _forms.scss
│      ├── _global.scss
│      ├── _grid.scss
│      ├── _inline-lists.scss
│      ├── _joyride.scss
│      ├── _keystrokes.scss
│      ├── _labels.scss
│      ├── _magellan.scss
│      ├── _orbit.scss
│      ├── _pagination.scss
│      ├── _panels.scss
│      ├── _pricing-tables.scss
│      ├── _progress-bars.scss
│      ├── _reveal.scss
│      ├── _section.scss
│      ├── _side-nav.scss
│      ├── _split-buttons.scss
│      ├── _sub-nav.scss
│      ├── _switch.scss
│      ├── _tables.scss
│      ├── _thumbs.scss
│      ├── _tooltips.scss
│      ├── _top-bar.scss
│      ├── _type.scss
│      └── _visibility.scss
├── foundation.scss
└── normalize.scss

which gives us the list of zurb foundation scss components we can import into our “main.scss” file!

Ruby 1.9.3 on OSX with Macports and RVM

1. Clean install of OSX.
2. Apply all current updates (bringing my system to 10.8.2)
3. Install Xcode (version 4.6) and command line tools
4. Install MacPorts (2.1.3 10.8)
5. Once we have done the above, we can run this series of commands in our terminal:

sudo port selfupdate -v
sudo port upgrade outdated
sudo port install apple-gcc42
sudo port install gmake
sudo port install gpatch
sudo port install binutils
sudo port select --set gcc apple-gcc42
sudo ln -s /opt/local/bin/gmake /opt/local/bin/make
sudo ln -s /opt/local/bin/gpatch /opt/local/bin/patch
sudo port install curl
curl -L https://get.rvm.io | bash -s stable

6. Add “source ~/.profile” to top of .bash_profile
7. Reboot (“Reopen windows after reboot” is unchecked)
8. Get our rvm working!

rvm pkg install readline
rvm install 1.9.3 --with-readline-dir=${HOME:-~}/.rvm/usr

wordpress: pointing to #disqus_thread instead of #comments or #respond

So I upgraded to a simpler theme by Jared Erickson. It lets me focus more on the content on my journal and reduces the clutter and column width restriction because of a two column layout.

But this Less wordpress theme uses `comments_popup_link()` function which does not play well with my disqus comments widget.

A quick read on wordpress’ function reference shows me that there is no simple way to provide an option to ask the comments link to point to #disqus_thread (it shows #respond or #comments by default).

No problem, just a 5 minutes quick fix to implement

function disqus_count($disqus_shortname) {
    wp_enqueue_script('disqus_count','http://'.$disqus_shortname.'.disqus.com/count.js');
    <code>echo</code> <code>'<a href="'</code><code>. get_permalink() .</code><code>'#disqus_thread"></a>'</code><code>;</code>
}

and to replace instances of

<?php comments_popup_link( __( 'Comment', 'less' ), __( '1 Comment', 'less' ), __( '% Comments', 'less' ) ); ?>;

with this

<?php disqus_count('calvinx'); ?>;

And we are good.