Last active
March 31, 2017 06:41
-
-
Save hiasinho/5dadcc677e56bfe85a64e36ead972656 to your computer and use it in GitHub Desktop.
Extend inuit.css
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
// Foundation Grid | |
// | |
// A Sticky used on canvases | |
// | |
// Markup: | |
// <div class="row"> | |
// <div class="small-2 large-4 columns"><div class="kss-example-component">...</div></div> | |
// <div class="small-4 large-4 columns"><div class="kss-example-component">...</div></div> | |
// <div class="small-6 large-4 columns"><div class="kss-example-component">...</div></div> | |
// </div> | |
// <div class="row"> | |
// <div class="small-3 small-centered columns"><div class="kss-example-component">3 centered</div></div> | |
// </div> | |
// <div class="row medium-uncollapse large-collapse"> | |
// <div class="small-6 columns"> | |
// <div class="kss-example-component">Removes gutter at large media query</div> | |
// </div> | |
// <div class="small-6 columns"> | |
// <div class="kss-example-component">Removes gutter at large media query</div> | |
// </div> | |
// </div> | |
// <div class="row"> | |
// <div class="small-10 small-push-2 columns"><div class="kss-example-component">10</div></div> | |
// <div class="small-2 small-pull-10 columns"><div class="kss-example-component">2, last</div></div> | |
// </div> | |
// <div class="row"> | |
// <div class="large-1 columns"><div class="kss-example-component">1</div></div> | |
// <div class="large-8 large-offset-3 columns"><div class="kss-example-component">8, offset 3</div></div> | |
// </div> | |
// <div class="row row__gutter"> | |
// <div class="large-4 columns"><div class="kss-example-component">1</div></div> | |
// <div class="large-8 columns"><div class="kss-example-component">8, offset 3</div></div> | |
// </div> | |
// <div class="row row__gutter--flush"> | |
// <div class="large-4 columns"><div class="kss-example-component">1</div></div> | |
// <div class="large-8 columns"><div class="kss-example-component">8, offset 3</div></div> | |
// </div> | |
// <div class="row row__gutter--medium"> | |
// <div class="large-4 columns"><div class="kss-example-component">1</div></div> | |
// <div class="large-8 columns"><div class="kss-example-component">8, offset 3</div></div> | |
// </div> | |
// | |
// Styleguide objects.foundation-grid | |
$breakpoints: ( | |
small: 0, | |
medium: 640px, | |
large: 1024px, | |
xlarge: 1200px, | |
xxlarge: 1440px, | |
); | |
$print-breakpoint: large; | |
$-zf-zero-breakpoint: small; | |
$breakpoint-classes: (small medium large); | |
// Grid | |
$global-flexbox: false; | |
$global-width: $inuit-wrapper-width; | |
$global-left: left; | |
$global-right: right; | |
$grid-row-width: $global-width; | |
$grid-column-count: 12; | |
$grid-column-gutter: ( | |
small: 24px, | |
medium: 36px, | |
); | |
$grid-column-align-edge: true; | |
$block-grid-max: 8; | |
@include foundation-grid( | |
$row: 'row', | |
$column: 'column', | |
$column-row: 'column-row', | |
$gutter: 'gutter', | |
$push: 'push', | |
$pull: 'pull', | |
$center: 'centered', | |
$uncenter: 'uncentered', | |
$collapse: 'collapse', | |
$uncollapse: 'uncollapse', | |
$offset: 'offset', | |
$end: 'end', | |
$expanded: 'expanded', | |
$block: 'block' | |
); | |
.row__gutter { | |
> .column, | |
> .columns { | |
@include grid-col-gutter(24px); | |
} | |
} | |
.row__gutter--flush { | |
> .column, | |
> .columns { | |
@include grid-col-gutter(0); | |
} | |
} | |
.row__gutter--medium { | |
> .column, | |
> .columns { | |
@include grid-col-gutter(36px); | |
} | |
} |
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
// Neat Grid | |
// | |
// Exmaple for a Neat grid | |
// | |
// .o-neat-grid--collapse - Collapse | |
// | |
// Markup: | |
// <div class="o-neat-grid {{modifier_class}}"> | |
// <div class="o-neat-grid__col"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-desktop-6"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-desktop-6"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-tablet-3"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-6 u-desktop-6"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-6 u-desktop-3"><div class="kss-example-component">1</div></div> | |
// <div class="o-neat-grid__col u-tablet-3 u-tablet-push-3 u-desktop-6 u-desktop-push-3"> | |
// <div class="kss-example-component">1</div> | |
// </div> | |
// <div class="o-neat-grid__col u-tablet-only-3"><div class="kss-example-component">1</div></div> | |
// </div> | |
// | |
// Styleguide objects.neat-grid | |
$neat-grid: ( | |
columns: 12, | |
gutter: 24px, | |
media: null, | |
color: $strat-blue-40 | |
); | |
$strat-widths-breakpoint-separator: "-"; | |
.o-neat-grid { | |
@include grid-container($neat-grid); | |
@if (strat-config(debug) == true) { | |
@include grid-visual(); | |
} | |
} | |
.o-neat-grid__col { | |
@include grid-column(12, $neat-grid); | |
} | |
.o-neat-grid--collapse { | |
@include grid-collapse; | |
} | |
// Responsive Widths | |
// ============================================================================= | |
@mixin strat-neat-width($breakpoint: null) { | |
@for $span from 1 through map-get($neat-grid, columns) { | |
.u#{$breakpoint}-#{$span} { | |
@include grid-column($span, $neat-grid); | |
} | |
} | |
} | |
@mixin strat-neat-push($breakpoint: null) { | |
@for $span from 1 through map-get($neat-grid, columns) { | |
.u#{$breakpoint}-push-#{$span} { | |
@include grid-push($span, $neat-grid); | |
} | |
} | |
} | |
@mixin strat-neat-shift($breakpoint: null) { | |
@for $span from 1 through map-get($neat-grid, columns) { | |
.u#{$breakpoint}-shift-#{$span} { | |
@include grid-shift($span, $neat-grid); | |
} | |
} | |
} | |
@include strat-neat-width; | |
@include strat-neat-push; | |
@include strat-neat-shift; | |
@if (variable-exists(mq-breakpoints)) { | |
@each $bp-from, $bp-value in $mq-breakpoints { | |
@debug index($mq-breakpoints, ($bp-from $bp-value)); | |
} | |
@each $bp-from, $bp-value in $mq-breakpoints { | |
$index: index($mq-breakpoints, ($bp-from $bp-value)); | |
$next: $index + 1; | |
$bp-until: null; | |
@if ($next <= length($mq-breakpoints)) { | |
$bp-until: nth(nth($mq-breakpoints, $next), 1); | |
} | |
@include mq($from: $bp-from) { | |
@include strat-neat-width(#{$strat-widths-breakpoint-separator}#{$bp-from}); | |
@include strat-neat-push(#{$strat-widths-breakpoint-separator}#{$bp-from}); | |
@include strat-neat-shift(#{$strat-widths-breakpoint-separator}#{$bp-from}); | |
} | |
@if ($bp-until) { | |
@include mq($from: $bp-from, $until: $bp-until) { | |
@include strat-neat-width(#{$strat-widths-breakpoint-separator}#{$bp-from}-only); | |
@include strat-neat-push(#{$strat-widths-breakpoint-separator}#{$bp-from}-only); | |
@include strat-neat-shift(#{$strat-widths-breakpoint-separator}#{$bp-from}-only); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment