Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

94 lines (84 sloc) 2.914 kB
// ---------------------------------------------------------------------------
// Media Mixins
// Create a new layout context for (@content) descendants.
//
// $layout-cols : a (unitless) number of columns to use for this layout.
@mixin layout(
$layout-cols
) {
// store default $total-columns setting for later, then change it.
$default-layout : $total-columns;
$total-columns : $layout-cols;
// apply children in this new layout context.
@content;
// return to default $total-columns setting.
$total-columns : $default-layout;
}
// Nest a block of code inside a new media-query and layout context.
//
// $media-layout : a list of values [$min $layout $max $ie] including...
// : - one unitless number (columns in a layout)
// : - two optional lengths (min and max-width media-query breakpoints).
// : - one optional boolian or string to trigger fallback support for IE.
// $font-size : [optional] The base font-size of your layout, if you are using ems.
// : - defaults to $base-font-size
@mixin at-breakpoint(
$media-layout,
$font-size: $base-font-size
) {
$media-layout : medialayout($media-layout,$font-size);
$min : nth($media-layout,1);
$layout : nth($media-layout,2);
$max : nth($media-layout,3);
$ie : nth($media-layout,4);
// We need to have either a min-width breakpoint or a layout in order to proceed.
@if $min or $layout or $max {
// If we don't have a layout, we create one based on the min-width.
@if not $layout {
$layout: get-layout($min);
}
// If we still don't have a layout, we have a problem.
@if $layout {
// Set our new layout context.
@include layout($layout) {
@if $min and $max {
// Both $min and $max
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else {
@if (not $min) and (not $max) {
// Neither $min nor $max:
// We can create a breakpoint based on the number of columns in the layout.
$min: fix-ems(container-outer-width());
}
@if $min {
// Min only:
@media (min-width: $min) {
@content;
}
} @else {
// Max only:
@media (max-width: $max) {
@content;
}
}
}
// Set an IE fallback
@if $ie {
@if (type-of($ie) == 'bool') {
$ie: 'lt-ie9';
}
.#{$ie} & {
@content;
}
}
}
} @else {
@warn "Something went horribly wrong here. Try adjusting your variables.";
}
} @else {
@warn "You need to provide either a valid layout (number of columns)
or a valid media-query min-width breakpoint (length).";
}
}
Jump to Line
Something went wrong with that request. Please try again.