peduarte

/**
*
* Item Module
*
**/

.Item {
    @include flexbox;
    @include flex-direction(column);
    width: 100%;

peduarte

/**
*
* NL1 Module
*
**/

.NL1 {
    $cols-medium: 9;
    $cols-wide: 10;

peduarte

/**
*
* T2 Module
*
**/

.T-2 {
    $cols-medium: 3;
    $cols-wide: 2;

peduarte

// Defining grid columns
$g-small: 6 !default;
$g-wide: 12 !default;

// http://susydocs.oddbird.net/en/latest/settings/
$susy: (
    columns: $g-small,
    gutter-position: inside,
    gutters: 0,
    global-box-sizing: border-box,

peduarte

// Defining breakpoints
$bp-medium: 768px !default;
$bp-wide: 1024px !default;

// Defining container widths
$container-medium: 860px !default;
$container-wide: 1024px !default;

peduarte

// Defining media query helpers
// Aliases for susy-breakpoint
// http://susydocs.oddbird.net/en/latest/toolkit/#breakpoint
@mixin medium {
    @include susy-breakpoint($bp-medium, $susy-medium) { @content };
}

@mixin to-medium {
    @include susy-breakpoint(0 ($bp-medium - 1), $susy-small) { @content };
}

peduarte

<div class="Slice">
    <div class="Item NL1"></div>
    <div class="Item T2"></div>
</div>

peduarte

/**
*
* NL1 Module
*
**/

.NL1 {
    @include medium {
        @include tt-span(9);
    }

peduarte

/**
*
* T2 Module
*
**/

.T-2 {
    @include medium {
        @include tt-span(3);
    }

peduarte

/**
 * Function to render a ui component
 * @param  params - any available parameters allowed
 * @param  params.name
 * @return {partial}
 */
dust.helpers.uiComponent = function (chunk, context, bodies, params) {
    var name = context.resolve(params.name);
    return chunk.partial('components/' + name + '/' + name, context, params);
};