Installation & Usage

As you have been told on previous chapter, you need to know how to work with Sass while using this grid system or grid framework. Please go to this page for any references regarding Sass.


Installation

If you are running Windows on your computer, then you need Ruby to be installed before you can install Sass.

Install Ruby Gem

Additional Information

If you are running a Mac machine, you can skip these steps, because Ruby is pre-installed on a Mac.

  1. Go to this page and download the latest version of RubyInstaller.
  2. Install the file you just downloaded.
  3. To check whether it successfully installed or not, open your Terminal or Command Prompt and type in gem -v. If you get the version number as a return, then you are ready to install Sass.

Install Sass

If you have already install Ruby, then you can install Sass.

  1. Open your Terminal or Command Prompt.
  2. Install Sass by typing in command below.
    gem install sass
    If you get an error message, then it's very likely you will need to use the sudo command to install the Sass gem.
    sudo gem install sass
  3. To check if it successfully installed, type in sass -v on your Terminal or Command Prompt.

It is recommended to spare your time to take a look at this page to explore the basics of Sass.

Clone DAKSA Grid System Framework

It is important for you to understand that this grid framework is not a one time install. In other means, this grid framework needs to be installed/cloned for every new project.

  1. Change your Terminal directory to your stylesheets folder using cd command.
    cd ~/your-project/css
  2. Clone DAKSA grid system framework source code.
    svn checkout https://github.com/rulyardiansyah/dgs/trunk/dgs
    If you get a notification that svn is not a recognized command, please install Subversion first.
  3. Put @import "dgs/index"; at the top of your main Sass file, for example we named it main.scss.
  4. Then watch the main.scss file. (Or, if you have multiple Sass file, you can watch a folder.) by typing this command on your Terminal.
    // Do this if you only have a single Sass file.
    sass --watch main.scss:main.css
    Or,
    // If you have multiple Sass file to watch.
    sass --watch css:css
    Make sure that your Terminal is on the right directory.

Sample Usage

This is a sample how to setup the grid system in a project.

The Markup (index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <link charset="utf-8">
    <title>Project Name</title>
    <link rel="stylesheet" href="main.css"></link>
  </head>
  <body>
    <section>
      <aside>This is aside.</aside>
      <article>This is an article.</article>
    </section>
  </body>
</html>

The Sass (main.scss)

@import "dgs/index";
@include debug(); /* For development only */

section {
  @include center(960px);
  aside {
    @include column(1/3);
  }
  article {
    @include column(2/3);
  }
}

Result

Grid system sample
Grid system sample

See? As simple as that. You have the freedom to make the sizes of your column. No need to remember those non-sense tags' attribute matching anymore. Your HTML codes now could be a lot cleaner. You can compare on how big time saving you did by using our DGS rather than just a conventional CSS. DGS has potentials to be a part of our daily web development tool.

Please go to next chapter for more comprehensive informations if you are curious.