*
* This will reverse the displayed order of the system so that it runs in the
* opposite order to our source, effectively flipping the system over.
*
*
*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
// By default we use the `font-size: 0;` trick to remove whitespace between
// items. Set this to true in order to use a markup-based strategy like
// commenting out whitespace or minifying HTML.
$inuit-use-markup-fix: false !default;
/* Default/mandatory classes.
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block; /* [1] */
margin: 0; /* [2] */
padding: 0; /* [2] */
list-style: none; /* [1] */
margin-left: -$inuit-global-spacing-unit; /* [3] */
@if ($inuit-use-markup-fix == false) {
font-size: 0;
}
}
/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 3. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 4. By default, all layout items are full-width (mobile first).
* 5. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
* 6. Fallback for old IEs not supporting `rem` values.
*/
.o-layout__item {
box-sizing: border-box; /* [1] */
display: inline-block; /* [2] */
vertical-align: top; /* [3] */
width: 100%; /* [4] */
padding-left: $inuit-global-spacing-unit; /* [5] */
@if ($inuit-use-markup-fix == false) {
font-size: $inuit-global-font-size; /* [6] */
font-size: 1rem;
}
}
/* Gutter size modifiers.
========================================================================== */
.o-layout--tiny {
margin-left: -$inuit-global-spacing-unit-tiny;
> .o-layout__item {
padding-left: $inuit-global-spacing-unit-tiny;
}
}
.o-layout--small {
margin-left: -$inuit-global-spacing-unit-small;
> .o-layout__item {
padding-left: $inuit-global-spacing-unit-small;
}
}
.o-layout--large {
margin-left: -$inuit-global-spacing-unit-large;
> .o-layout__item {
padding-left: $inuit-global-spacing-unit-large;
}
}
.o-layout--huge {
margin-left: -$inuit-global-spacing-unit-huge;
> .o-layout__item {
padding-left: $inuit-global-spacing-unit-huge;
}
}
.o-layout--flush {
margin-left: 0;
> .o-layout__item {
padding-left: 0;
}
}
/* Vertical alignment modifiers.
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle {
> .o-layout__item {
vertical-align: middle;
}
}
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom {
> .o-layout__item {
vertical-align: bottom;
}
}
/* Fill order modifiers.
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
.o-layout--center {
text-align: center;
> .o-layout__item {
text-align: left;
}
}
/**
* Fill up the layout system from the right-hand side.
*/
.o-layout--right {
text-align: right;
> .o-layout__item {
text-align: left;
}
}
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl;
> .o-layout__item {
direction: ltr;
text-align: left;
}
}
/* ==========================================================================
#MEDIA
========================================================================== */
/**
* Place any image- and text-like content side-by-side, as per:
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.o-media {
@include inuit-clearfix();
display: block;
}
.o-media__img {
float: left;
margin-right: $inuit-global-spacing-unit;
> img {
display: block;
}
}
.o-media__body {
overflow: hidden;
display: block;
&,
> :last-child {
margin-bottom: 0;
}
}
/* Size variants
========================================================================== */
/**
* Modify the amount of space between our image and our text. We also have
* reversible options for all available sizes.
*/
.o-media--tiny {
> .o-media__img {
margin-right: $inuit-global-spacing-unit-tiny;
}
&.o-media--reverse {
> .o-media__img {
margin-right: 0;
margin-left: $inuit-global-spacing-unit-tiny;
}
}
}
.o-media--small {
> .o-media__img {
margin-right: $inuit-global-spacing-unit-small;
}
&.o-media--reverse {
> .o-media__img {
margin-right: 0;
margin-left: $inuit-global-spacing-unit-small;
}
}
}
.o-media--large {
> .o-media__img {
margin-right: $inuit-global-spacing-unit-large;
}
&.o-media--reverse {
> .o-media__img {
margin-right: 0;
margin-left: $inuit-global-spacing-unit-large;
}
}
}
.o-media--huge {
> .o-media__img {
margin-right: $inuit-global-spacing-unit-huge;
}
&.o-media--reverse {
> .o-media__img {
margin-right: 0;
margin-left: $inuit-global-spacing-unit-huge;
}
}
}
/* Reversed media objects
========================================================================== */
.o-media--reverse {
> .o-media__img {
float: right;
margin-right: 0;
margin-left: $inuit-global-spacing-unit;
}
}
/* Gutterless media objects
========================================================================== */
.o-media--flush {
> .o-media__img {
margin-right: 0;
margin-left: 0;
}
}
/* ==========================================================================
#FLAG
========================================================================== */
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image.
*
* http://csswizardry.com/2013/05/the-flag-object/
*
* 1. Allows us to control vertical alignments.
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
*/
.o-flag {
display: table; /* [1] */
width: 100%; /* [2] */
}
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.o-flag__img,
.o-flag__body {
display: table-cell;
vertical-align: middle; /* [1] */
}
/**
* Flag images have a space between them and the body of the object.
*
* 1. Force `.flag__img` to take up as little space as possible:
* https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
*/
.o-flag__img {
width: 1px; /* [1] */
padding-right: $inuit-global-spacing-unit;
/**
* 1. Fixes problem with images disappearing.
*/
> img {
max-width: none; /* [1] */
}
}
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.o-flag__body {
width: auto; /* [1] */
&,
> :last-child {
margin-bottom: 0;
}
}
/* Size variants.
========================================================================== */
.o-flag--tiny {
> .o-flag__img {
padding-right: $inuit-global-spacing-unit-tiny;
}
&.o-flag--reverse {
> .o-flag__img {
padding-right: 0;
padding-left: $inuit-global-spacing-unit-tiny;
}
}
}
.o-flag--small {
> .o-flag__img {
padding-right: $inuit-global-spacing-unit-small;
}
&.o-flag--reverse {
> .o-flag__img {
padding-right: 0;
padding-left: $inuit-global-spacing-unit-small;
}
}
}
.o-flag--large {
> .o-flag__img {
padding-right: $inuit-global-spacing-unit-large;
}
&.o-flag--reverse {
> .o-flag__img {
padding-right: 0;
padding-left: $inuit-global-spacing-unit-large;
}
}
}
.o-flag--huge {
> .o-flag__img {
padding-right: $inuit-global-spacing-unit-huge;
}
&.o-flag--reverse {
> .o-flag__img {
padding-right: 0;
padding-left: $inuit-global-spacing-unit-huge;
}
}
}
.o-flag--flush {
> .o-flag__img {
padding-right: 0;
padding-left: 0;
}
}
/* Reversed flag.
========================================================================== */
/**
* 1. Swap the rendered direction of the object…
* 2. …and reset it.
* 3. Reassign margins to the correct sides.
*/
.o-flag--reverse {
direction: rtl; /* [1] */
> .o-flag__img,
> .o-flag__body {
direction: ltr; /* [2] */
}
> .o-flag__img {
padding-right: 0; /* [3] */
padding-left: $inuit-global-spacing-unit; /* [3] */
}
}
/* Alignment variants.
========================================================================== */
/**
* Vertically align the image- and body-content differently. Defaults to middle.
*/
.o-flag--top {
> .o-flag__img,
> .o-flag__body {
vertical-align: top;
}
}
.o-flag--bottom {
> .o-flag__img,
> .o-flag__body {
vertical-align: bottom;
}
}
/* ==========================================================================
#LIST-BARE
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets, and any
* indentation.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
/* ==========================================================================
#LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
/* ==========================================================================
#BOX
========================================================================== */
/**
* The box object simply boxes off content. Extend with cosmetic styles in the
* Components layer.
*
* 1. So we can apply the `.o-box` class to naturally-inline elements.
*/
.o-box {
@include inuit-clearfix();
display: block; /* [1] */
padding: $inuit-global-spacing-unit;
> :last-child {
margin-bottom: 0;
}
}
/* Size variants
========================================================================== */
.o-box--flush {
padding: 0;
}
.o-box--tiny {
padding: $inuit-global-spacing-unit-tiny;
}
.o-box--small {
padding: $inuit-global-spacing-unit-small;
}
.o-box--large {
padding: $inuit-global-spacing-unit-large;
}
.o-box--huge {
padding: $inuit-global-spacing-unit-huge;
}
/* ==========================================================================
#BLOCK
========================================================================== */
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.o-block {
display: block;
text-align: center;
}
.o-block__img {
margin-bottom: $inuit-global-spacing-unit;
/* Size variants.
====================================================================== */
.o-block--flush > & {
margin-bottom: 0;
}
.o-block--tiny > & {
margin-bottom: $inuit-global-spacing-unit-tiny;
}
.o-block--small > & {
margin-bottom: $inuit-global-spacing-unit-small;
}
.o-block--large > & {
margin-bottom: $inuit-global-spacing-unit-large;
}
.o-block--huge > & {
margin-bottom: $inuit-global-spacing-unit-huge;
}
}
.o-block__body {
display: block;
}
/* Alignment variants.
========================================================================== */
.o-block--right {
text-align: right;
}
.o-block--left {
text-align: left;
}
/* ==========================================================================
#RATIO
========================================================================== */
// A list of aspect ratios that get generated as modifier classes.
$inuit-ratios: (
(2:1),
(4:3),
(16:9),
) !default;
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
*
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
*
* 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
*/
.o-ratio {
position: relative;
display: block;
overflow: hidden;
&:before {
content: "";
display: block;
width: 100%;
padding-bottom: 100%; /* [1] */
}
}
.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
/* stylelint-disable */
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
*
*
*/
@each $ratio in $inuit-ratios {
@each $antecedent, $consequent in $ratio {
@if (type-of($antecedent) != number) {
@error "`#{$antecedent}` needs to be a number."
}
@if (type-of($consequent) != number) {
@error "`#{$consequent}` needs to be a number."
}
.o-ratio--#{$antecedent}\:#{$consequent}:before {
padding-bottom: ($consequent/$antecedent) * 100%;
}
}
}
/* stylelint-enable */
/* ==========================================================================
#CROP
========================================================================== */
// A list of cropping ratios that get generated as modifier classes.
$inuit-crops: (
(2:1),
(4:3),
(16:9),
) !default;
/**
* Provide a cropping container in order to display media (usually images)
* cropped to certain ratios.
*
* 1. Set up a positioning context in which the image can sit.
* 2. This is the crucial part: where the cropping happens.
*/
.o-crop {
position: relative; /* [1] */
display: block;
overflow: hidden; /* [2] */
}
/**
* Apply this class to the content (usually `img`) that needs cropping.
*
* 1. Image’s default positioning is top-left in the cropping box.
* 2. Make sure the media doesn’t stop itself too soon.
*/
.o-crop__content {
position: absolute;
top: 0; /* [1] */
left: 0; /* [1] */
max-width: none; /* [2] */
}
/**
* We can position the media in different locations within the cropping area.
*/
.o-crop__content--right {
right: 0;
left: auto;
}
.o-crop__content--bottom {
top: auto;
bottom: 0;
}
.o-crop__content--center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* stylelint-disable */
/* Crop-ratio variants.
========================================================================== */
/**
* Generate a series of crop classes to be used like so:
*
*
*
*/
@each $crop in $inuit-crops {
@each $antecedent, $consequent in $crop {
@if (type-of($antecedent) != number) {
@error "`#{$antecedent}` needs to be a number."
}
@if (type-of($consequent) != number) {
@error "`#{$consequent}` needs to be a number."
}
.o-crop--#{$antecedent}\:#{$consequent} {
padding-bottom: ($consequent/$antecedent) * 100%;
}
}
}
/* stylelint-enable */
/* ==========================================================================
#TABLE
========================================================================== */
/**
* A simple object for manipulating the structure of HTML `table`s.
*/
.o-table {
width: 100%;
}
/* Equal-width table cells.
========================================================================== */
/**
* `table-layout: fixed` forces all cells within a table to occupy the same
* width as each other. This also has performance benefits: because the browser
* does not need to (re)calculate cell dimensions based on content it discovers,
* the table can be rendered very quickly. Further reading:
* https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
*/
.o-table--fixed {
table-layout: fixed;
}
/* Size variants.
========================================================================== */
.o-table--tiny {
th,
td {
padding: $inuit-global-spacing-unit-tiny;
}
}
.o-table--small {
th,
td {
padding: $inuit-global-spacing-unit-small;
}
}
.o-table--large {
th,
td {
padding: $inuit-global-spacing-unit-large;
}
}
.o-table--huge {
th,
td {
padding: $inuit-global-spacing-unit-huge;
}
}
/* ==========================================================================
#PACK
========================================================================== */
/**
* The pack object simply causes any number of elements pack up horizontally to
* automatically fill an equal, fluid width of their parent.
*
* 1. Fill all available space.
* 2. Remove any leftover styling from lists.
* 3. Cause children to be automatically equally sized.
*/
.o-pack {
width: 100%; /* [1] */
margin-left: 0; /* [2] */
display: table;
table-layout: fixed; /* [3] */
}
/**
* 1. Cause children to adopt table-like structure.
* 2. Default item alignment is with the tops of each other.
*/
.o-pack__item {
display: table-cell; /* [1] */
vertical-align: top; /* [2] */
/* Vertical alignment variants.
====================================================================== */
.o-pack--middle > & {
vertical-align: middle;
}
.o-pack--bottom > & {
vertical-align: bottom;
}
}
/* Unequal-width items.
========================================================================== */
.o-pack--auto {
table-layout: auto;
}
/* Size variants.
========================================================================== */
.o-pack--tiny {
border-spacing: $inuit-global-spacing-unit-tiny;
}
.o-pack--small {
border-spacing: $inuit-global-spacing-unit-small;
}
.o-pack--large {
border-spacing: $inuit-global-spacing-unit-large;
}
.o-pack--huge {
border-spacing: $inuit-global-spacing-unit-huge;
}
/* Reversed order packs
========================================================================== */
.o-pack--reverse {
direction: rtl;
> .o-pack__item {
direction: ltr;
}
}