This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="Slice"> | |
<div class="Item NL1"></div> | |
<div class="Item T2"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* T2 Module | |
* | |
**/ | |
.T-2 { | |
$cols-medium: 3; | |
$cols-wide: 2; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* NL1 Module | |
* | |
**/ | |
.NL1 { | |
@include medium { | |
@include tt-span(9); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* T2 Module | |
* | |
**/ | |
.T-2 { | |
@include medium { | |
@include tt-span(3); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="Slice"> | |
<div class="Item NL1"></div> | |
<div class="Item T2"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Defining breakpoints | |
$bp-medium: 768px !default; | |
$bp-wide: 1024px !default; | |
// Defining container widths | |
$container-medium: 860px !default; | |
$container-wide: 1024px !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 }; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<h2 class="Headline Headline--m">News headline</h2> | |
{@uiComponent name="byline" text="Tim Shipman, Political Editor" /}; | |
{@uiComponent name="dip" text="First paragraph of news content will go here..." /}; | |
{@uiComponent name="link" text="Read full story" modifider="primary" /}; | |
</div> |