Knowledge is power. We love to share it.

News related to Mono products, services and latest developments in our community.

Andrej

Using Sass, Foundation and Compass with Mindscape Web Workbench

03/22/2013Categories: Web Design

This blog post is the first in a series of posts dealing with topics related to skinning and theming MonoX. The new MonoX theme is built with Sass, Compass and Zurb Foundation. Minscape Web Workbench is optional, and we use it to make it easier for back-end developers to use Sass and Compass in their familiar Visual Studio environment.

The purpose of this series of articles is to familiarize you with the technologies and techniques needed for theming MonoX that are used by our team at Mono software.

We use Mindscape Web Workbench for writing Sass and compiling it using Compass for a better workflow. You can always go with the standard command line workflow (as explained on Compass and Foundation websites) and use the great Sublime Text 2 text editor for writing Sass (there is a Sass plugin available on github). We won't get into details about every single tool we use, everything is very well documented on their sites.

Setting up the environment:

To set up our work environment we need a couple of things

Sass

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

For details on setting up Sass visit the docs section on their site. Ruby installation is required for Windows users.

Compass

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.

Installing Compass is easy, just follow the simple instructions on their install page.

Zurb Foundation

A responsive front-end framework written in Sass.

We use the Sass version of Foundation 4 for maximum flexibility and control. Foundation installation docs are available here.

Mindscape Web Workbench

Sass, Less and CoffeeScript extension for Visual Studio.

The free edition of Mindscape Web Workbench for Visual Studio 2010 and 2012 is available here. The Pro edition gives you a few extra features, but the free version will do just fine. As explained in the foreword, it is optional, but we figured it would be useful to describe our process to people using Visual Studio for Sass development. It comes with Compass by default, but needs a local Ruby installation for other gem dependencies.

Bundler

Bundler maintains a consistent environment for ruby applications. It tracks an application's code and the rubygems it needs to run, so that an application will always have the exact gems (and versions) that it needs to run.

We use Bundler to handle the multiple versions of gems and their dependencies we use in our projects. Get the Bundler here. Use the bundler if you need multiple versions of Foundation.

The workflow

After installing Compass and Foundation gems and activating the Web Workbench extension we are loaded up and ready to go!

New Compass project

For the purpose of this introduction, we've set up a default new ASP.net web project in Visual Studio. The first thing to do is set the local Ruby location path in Visual Studio. If you activated the Mindscape Web Workbench extension you should see the Web Workbench options in the tools/options dropdown menu. Set up your Ruby folder to the "bin" folder inside your Ruby installation. We use the default C:\Ruby193\bin.

 Setting-up-Web-Workbench-Ruby-path

To setup your project as a new Compass Project right click on it in Solution Explorer and choose "Setup Compass Project". This automatically configures your project using Compass. Web Workbench creates two folders - "sass" and "stylesheets" and a file called config.rb that holds important Compass project settings like asset folders, relative paths etc. Detailed Compass setup description available on Mindscape website.

Setup-Compass-project

Adding Zurb Foundation to the mix

The new MonoX theme is Foundation based - a super slick Sass+Compass framework (similar to Twitter's Bootstrap). The theme's bundled .sass files override some of the base Foundation's default and give you enough flexibility to change the theme without breaking stuff. The config.rb that comes with the theme already "requires" the Foundation files with require 'zurb-foundation'. On a new project you will have to require it in the config.rb. A whole discussion on this topic (with step-by-step instructions) is available on Mindscape forums.

The theme uses the fourth version of framework (4.0.X). so a regular require is OK (uses the latest installed version). 

require 'zurb-foundation'; 
To change the version of the Foundation gem that the Compass uses simply use this code in the config.rb:

gem 'zurb-foundation', '=3.2.5'
require 'zurb-foundation';

Good to go!

That's it, we've managed to get Web Workbench use Sass using Compass and Zurb Foundation framework in Visual Studio! The next blog post will cover using the theme's bundled .scss files to customize it with ease. If you are not familiar with Sass and Compass, you should check out their docs to learn more about the awesomeness you can achieve.

Rated 4.00, 4 vote(s).