Skip to content

Instantly share code, notes, and snippets.

@hiasinho
Last active March 31, 2017 06:41
Show Gist options
  • Save hiasinho/5dadcc677e56bfe85a64e36ead972656 to your computer and use it in GitHub Desktop.
Save hiasinho/5dadcc677e56bfe85a64e36ead972656 to your computer and use it in GitHub Desktop.
Extend inuit.css
// 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);
}
}
// 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