Scss file that integrates hashgrid with inuit.css

hashgrid.scss

/*
 * Grid
 */

@import "vars";

#grid {

    /* Dimensions - same width as your grid with gutters */
    width: $max-width;

    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    */

    /* Grid (centered) */
    position: absolute;
    top: $top-padding;
    left: 50%;
    margin-left: - ($max-width / 2);
    z-index: 999999999;

}

/**
 * Vertical grid lines
 *
 * Set the column width taking the borders into consideration,
 * and use margins to set column gutters.
 */
#grid div.vert {

    width: (($max-width - $base-spacing-unit) / 12) - $base-spacing-unit;
    border: none darkturquoise;
    border-width: 0 1px;
    margin-left: $base-spacing-unit;
    background-color: rgba(255,0,0,0.1);
}

#grid div.vert.first-line {

    //margin-left: $base-spacing-unit;

}


/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid div.horiz{

    /* 21px line height */
    height: $base-spacing-unit;
    border-bottom: 1px dotted darkgray;
    margin: 0;
    padding: 0;

}

/**
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids
* option in the hashgrid.js file.
*/
#grid.grid-1 div.vert{

    /* Vertical grid line colour for grid 1 */
    border-color: darkturquoise;

}
#grid.grid-2{

    /* Adjustments */
    padding: 0 160px;
    width: 660px;

}
#grid.grid-2 div.vert{

    /* Vertical grid line colour for grid 2 */
    border-color: crimson;

}