Decanter Examples

Centered Container
Responsive Container
Neat: Grid Column
Items per row

Centered-container

The centered container mixin has several purposes. At it's most basic, it's a way to create a wraper-less container that allows you to have constrained content while being able to set a background color that spans the entire width of the page.

The content is constrained by padding, instead of margin, which allows us to do things like set a background color or image without an additional wrapper container.

In the examples below, we've added an example wrapper to demonstrate the padding boundaries, which are denoted with a dashed border.

Generally, $max-width is used when we want fixed width containers at large breakpoints.

Finally, the $columns setting is calculated either from the full width of the container, or in the case of $max-width, it's computed from the container's max width. This allows for a great amount of flexibility.

Centered-container (8 col)

@include centered-container(8);

$vspace: {length}

@include centered-container(8, $vspace: 0);

In this example, we're passing an additional parameter of $vspace: 0, which removes the top and bottom padding from the container.

$max-width: true

@include centered-container(12, $max-width: false);

@include grid-media($media-xl-min) {
  @include centered-container(12, $max-width: true);
}

When passed the $max-width: true setting, the centered container mixin stops growing at the projects $max-container-width size (minus the current $grid-media's gutters)

$max-width: {length}

@include centered-container(12, $max-width: false);

$_gutter: _retrieve-neat-setting($neat-grid, gutter);

@include grid-media($grid: (media: 'screen and (min-width: #{800px})')) {
  @include centered-container(12, $max-width: 800px);
};

When passed a $max-width: 800px value, the centered container mixin stops growing at the specified width (minus the current $grid-media's gutters)

$max-width: {length}, $grid-collapse: {bool}

@include centered-container(12, $max-width: 800px, $grid-collapse: true);

When passed a $max-width: 800px value, combined with $grid-collapse: true, the centered container mixin stops growing at the specified width (while consuming the current $grid-media's gutters)

$responsive-container();

The responsive-container(); mixin consumes a sass map of containers and breakpoints, which allows you to create a customized experience that varies by breakpoint.

$_vspace: 1em;
$_container: (
xs: ( columns: 8, grid-media: $media-xs-only, v-space: $_vspace, max-width: false, grid-collapse: false ),
sm: ( columns: 8,  grid-media: $media-sm-only, v-space: $_vspace, max-width: false, grid-collapse: false ),
md: ( columns: 6, grid-media: $media-md-only, v-space: $_vspace, max-width: false, grid-collapse: false ),
lg: ( columns: 12, grid-media: $media-lg-only, v-space: $_vspace, max-width: false, grid-collapse: false ),
xl: ( columns: 12, grid-media: $media-xl,      v-space: $_vspace, max-width: true,  grid-collapse: false ),
print:  ( columns: 8, grid-media: $media-print, v-space: $_vspace, max-width: true, grid-collapse: false ),
);
@include responsive-container($_container);

grid-column

For reference on the Neat Grid, check out the project's Examples page

Items per row

The items-per-row mixin is simply a shortcut that outputs the correct neat and alpha classes in order to quickly bootstrap an item grid. Taking it a step further, the flex-items-per-row mixin also quickly instantiates an instance of a flexbox container for some more advanced layout examples.

Items-per-row example

@include centered-container(10);

@include grid-container;
        @include grid-collapse;
        @include items-per-row(4, '.item');

.item

Some items have two lines

.item

Items-per-row, custom selector

@include grid-container;
@include grid-collapse;
@include items-per-row(5, 'article');

article

Some items have two lines

article

Flex-Items-per-row, centered with equal heights

@include grid-container;
@include grid-collapse;
@include flex-items-per-row(4, '.item', $center-grid: true, $equal-heights: true);

.item

Some items have two lines

.item

Flex items per row, centered without equal heights

@include grid-container;
@include grid-collapse;
@include items-per-row(5, 'article', $center-grid: true, $equal-heights: false);

article

Some items have two lines

article

Flex items per row, not centered with equal heights

@include grid-container;
@include grid-collapse;
@include items-per-row(5, 'article', $center-grid: false, $equal-heights: true);

article

Some items have two lines

article