Yeah Grid Utils @1.2.1

A collection of helper functions and classes to streamline the basic structure of css-grid-based layouts. The idea is to always do .container > .grid > .your-column.

Use it: yeah-grid-utils.scss.

define your breakpoints: Either "width" or "width height"


$breakpoints: ( 
	xs: 320px,
	md: 768px,
	lg: 1024px,
	xl: 1920px 1080px
);
auto

and how they behave:


$grid-sizes: ( 
	xs: (
		gutter-width: 10px,
		outer-margin: 15px,
		max-width: 500px,
	),
	md: (
		gutter-width: 20px,
		outer-margin: 40px,
		max-width: 950px
	),
	lg: (
		gutter-width: 30px,
		outer-margin: 80px,
		max-width: 1200px
	),
	xl: (
		gutter-width: 60px,
		outer-margin: 100px,
		max-width: 1400px,
	),
);

Use @include at() with sizes from $grid-sizes or pixel-values. This is mobile first.

@include at(md) {
	background: Beige;
}
@include at(1000px) {
	background: LightSkyBlue;
}
@include at(1920px 1080px) {
	background: PeachPuff;
}

Tip: By using "0px 900px" you ignore the width and look for height only

Use @include until() with sizes from $grid-sizes or pixel-values. This is mobile last.

.include-until {
	@include until(1000px) {
		background: Beige;
	}
	@include until(md) {
		background: LightGreen;
	}
}

Tip: Be careful with "width height" values when using until(): This may lead to strange results.

.column-gap and / or .row-gap adds the defined gutter-width as column or row gap.
1
2
3
4

Special classes & mixins

With the following mixins you can reuse values from the grid definitions. The second parameter (factor) is optional.

.inset{
	@include gutter-width-as('padding', .5);
}

.margin-top{
	@include outer-margin-as('top-margin');
}

.fixed-height{
	height: value-at('outer-margin', 'lg', 2);
}
.inset
.margin-top
.fixed-height

.grid-full(ignores outer-margin, but stays inside the max width)

.container-full ignores the max-width, but respects the $wide-screen: 1920px !default;

Combine .container-full and .grid-full to achive a widescreen-container without outer-margin (e.g. for images)