If you had noticed, in previous chapter you see @include column(1/3) and @include center(960px) inside the Sass sample file, which is not a standard syntax on CSS. What is it? What does this actually do? Please scroll through. Those are options that are built in inside DGS. All the available options, or mixins to be exact, will be explained here.

Currently, there are 13 options are available within DGS. Due to its development progress, DAKSA Design Team still not sure whether these options will be expanded or even shrinked down.


Parameter(s): all-the-parameters-written-here

This is the description.

Hint: This is the hint of what the mixin did for you.


Parameter(s): ($direction: both)

Aligning blocks relative to their container (so their parent container needs position: relative) with position: absolute and fancy positioning and transform. Vertical alignment is now trivial in IE9+ browsers.

Hint: The @include align() will be translated as:

position: absolute;
transform-style: preserve-3d;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);


Parameter(s): ($max-width: map-get($dgs, 'max-width'), $pad: 0)

This is a shortcut to easily center containers. The pad variable sets padding on the left and right.

Hint: The @include center(960px, 10px) will be translated as:

width: auto;
max-width: 960px; // from $max-width parameter
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 10px; // from $pad parameter
padding-right: 10px; // from $pad parameter


Parameter(s): No parameter

A simple/kinda-modern clearfix. Use this to wrap any set of column()s or span()s. If you need super-old browser support, you can create your own clearfix mixin (use the clearfix namespace) with stuff like :before and *zoom: 1 (look up an old clearfix).


Parameter(s): ($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($dgs, 'gutter'))

Specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest.

Specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. e.g. column(1/4, $offset: 1/4) would create a column the quarter of the size of its container and push it to the right a quarter.

Understanding cycle is important. Want to make a gallery but don't want to have a <div class="row"> every 4 pictures? column(1/4, $cycle: 4) - done.

Want to change it up when you get down to mobile? Maybe just show 2 images per row? column(1/2, $cycle: 2) - done.

Need to adjust column gutters for a specific container? col(1/4, $gutter: .5). Note the gutter isn't a fixed width.

Hint: The @include column(1/2) will be translated as:

float: left;
clear: none;
text-align: inherit;
width: 48.5%; // from
margin-left: 0%;
margin-right: 3%; // the last item of @include column() set would have margin-right: 0


Parameter(s): ($ratios: 1, $gutter: map-get($dgs, 'gutter'))

A function that returns the gutter size.


Parameter(s): ($ratios: 1, $gutter: map-get($dgs, 'gutter'))

A function to return strictly the column width with none of the styles.


Parameter(s): ($color: blue, $important: false)

Debug mode assigns a lightly translucent background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial.

Hint: The @include debug(blue) will be translated as:

background: rgba(0,0,255,0.05);


Parameter(s): ($ratios: 0, $col-or-span: column, $gutter: map-get($dgs, 'gutter'))

Source ordering works in dgs by assigning position: relativeand then a left offset equal to the ratio passed.

You can specify if this is a column or span movement to include gutters or not. This works similar to offset in that it can accept negative values to shift the other direction.

move can accept multiple context ratios to maintain perfect nested sizing. move also accepts custom gutter sizing, just make sure your gutter sizes match the gutter sizes of your original elements.

Hint: The @include move(1/2) will be translated as:

position: relative;
left: 51.5%;


Parameter(s): ($ratio: 1, $offset: 0, $cycle: 0)

Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so with span(1/5). No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that.

Hint: The @include span(1/4) will be translated as:

float: left;
clear: none;
text-align: inherit;
width: 25%;
margin-left: 0%;
margin-right: 0%;


Parameter(s): ($pad: 0, $align: false)

A helper mixin to "stack" elements on top of each other. Useful for mobile views. Accepts padding and/or text alignment.

Hint: The @include stack(20px) will be translated as:

display: block;
clear: both;
float: none;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;


Parameter(s): No parameter

Resets styles associated with center().

Hint: The @include uncenter() will be translated as:

max-width: none;
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;


Parameter(s): No parameter

Accepts no values. unmove() is a great helper function to quickly disable whatever source ordering you've done to an element.

Hint: The @include unmove() will be translated as:

position: static;
left: 0;


Parameter(s): No parameter

Cancel that stack(). This won't revert back to your column() calls. For that, manually call your column() method again.

Hint: The @include unmove() will be translated as:

text-align: left;
display: inline;
clear: none;
width: auto;
margin-left: 0;
margin-right: 0;