Grid

The philosophy

Making websites responsive shouldn't be such a tedious task, but it is. We try to make things easier, with our Guyn grid. We have a function and classes you can use.

An important thing to mention is that the designers at Matise design on a 24 column grid layout, it's important that designers and developers are on the same page.

The function

Since our grid is based on 24 columns we divide the view-width of a page by 24 for our grid-function. This means grid(24) is equal to 100vw and grid(12) is equal to 50vw. It's also possible to add decimals to the grid value.

height: grid(24); // outputs: height: 100vw;

height: grid(1); // outputs: height: 4.1666666667vw;

The classes

Our grid-classes make developing a responsive website even easier, they are based on percentages and not vw.

<div class="column column-12">
	<!-- This div will be 50% of the width of its container element. -->
</div>
<!-- It is also possible to add screen sizes to the classes. -->
<div class="column medium-12 small-full">
	<!-- This div will be 50% of the width of its container element on screens that are medium or larger and 100% of the width on small screens. -->
</div>

::: warning The element has to have a .column class. :::

Settings

| Variable | Default value | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | | $grid-columns | 24 | Amount of columns | | $grid-design-width | 1920px | Base design width. Used for converting rem to grid size and min/max grid | | size | | $grid-row-width | 4096px | Maximum row width, will be set as max-width for rows. | | $grid-breakpoints | small : 750 medium : 960 large : 1280 xlarge : 1920 xxlarge : 9999 | Breakpoints used for the grid. All classes will be automatically generated based on | these names and sizes. Do not add classes, this can break many things, changing values is allowed. | | $grid-parts | 1/1 : full 1/2 : half 1/3 : third 2/3 : two-third 1/4 : quarter 3/4 : three-quarter 1/5 : fifth 2/5 : two-fifth 3/5 : three-fifth 4/5 : four-fifth 1/6 : sixth 5/6 : five-sixth | Extra breakpoints automatically generates percentages. More can be added easily. |

Structure

Always make sure to keep the same structure. Changing this could give you some problems.

Basic

A simple example with 3 columns in a row. The columns will be next to each other on a tablet and bigger, but fall under each other on a mobile device.

<div class="row">
	<div class="column small-full medium-third">
		<div class="column small-full medium-third">
			<div class="column small-full medium-third"></div>
		</div>
	</div>
</div>

Centered

You have two columns, which have both 1/3 width. These columns by default will be aligned on the left (start) of the row.

<div class="row">
	<div class="column small-full medium-third">
		<div class="column small-full medium-third"></div>
	</div>
</div>

But you can easily center them with a center class on the row.

<div class="row center">
	<div class="column small-full medium-third">
		<div class="column small-full medium-third"></div>
	</div>
</div>

Long lists of columns

If you have a long list of columns and you don't want to add all classes on every column. You can also add these classes on the row. These will be applied automatically to all its first children. In that case the columns only will need a column class.

<div class="row small-full medium-third">
	<div class="column">
		<div class="column">
			<div class="column">
				<div class="column">
					<div class="column">
						...
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

If you want to overrule the given styling on one specific column. You can just add the classes on the column itself.

<div class="row small-full medium-third">
	<div class="column">
		<div class="column">
			<div class="column">
				<div class="column medium-two-third">
					<div class="column">
						...
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Grid Classes

Named classes

There are several sizes which have names. These names can be used in the classes on different sizes.

| size | value | | ------------ | ----- | | ..-full | 1/1 | | ..-half | 1/2 | | ..-third | 1/3 | | ..-quarter | 1/4 | | ..-fifth | 1/5 | | ..-sixth | 1/6 |

Also all extra parts are available..

| size | value | | ------------------ | ----- | | ..-two-third | 2/3 | | ..-three-quarter | 3/4 | | ..-four-fifth | 4/5 | | ..-five-sixth | 5/6 |

<div class="row">
	<div class="column small-full medium-half"></div>
</div>

Numbered classes

<div class="row">
	<div class="column small-24 medium-12"></div>
</div>

Visibilty Helper classes

| Class | Description | | ---------------------- | ------------------------------------- | | hide-for-small-only | Hides the element on small only | | hide-for-medium-only | Hides the element on medium only | | hide-for-large-only | Hides the element on large only | | hide-for-xlarge-only | Hides the element on xlarge only | | hide-for-medium-up | Hides the element on medium and above | | hide-for-large-up | Hides the element on large and above | | hide-for-xlarge-up | Hides the element on xlarge and above | | hide-for-medium-down | Hides the element on medium and below | | hide-for-large-down | Hides the element on large and above | | hide-for-xlarge-down | Hides the element on xlarge and above |

Min & Max Grid

Font-sizes are a good example to use in grid sizes (vw), but they could also get too small or too big. Thats a problem which is easy solvable with media queries, but you don't want it to just jump to another font-size while resizing your screen. Thats where the min- and max- mixins come in.

Examples

Basic Example

<h1>The quick brown fox jumps over the lazy dog</h1>

h1 {
	font-size: grid(1);
}

This will result in an element like this:

But you don't want the title to scale down all the way. You want it to stay at a minimum of 36px.

<h1>The quick brown fox jumps over the lazy dog</h1>

h1 {
	font-size: grid(1);
	@include min-(font-size, 1, 36px);
}

This will result in an element like this:

Advanced Example

Lets make it red at the same time as it jumps over to the set 36px;

<h1>The quick brown fox jumps over the lazy dog</h1>

h1 {
	padding: 1rem;
	font-size: grid(0.75);
	@include min-(font-size, 1, 36px) {
		background-color: #fe688e; // red
	}
	@include max-(font-size, 1, 96px) {
		background-color: #65ccfa; // blue
	}
}

This will result in an element like this:

The Mixin

| Mixin | Arguments | Description | | ----- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | min- | [$property (optional), $grid, $min-size] | Calculate on which viewport width grid size will be equal to the min-size and create a media-query with a min width based on this. | | max- | [$property (optional), $grid, $min-size] | Calculate on which viewport width grid size will be equal to the min-size and create a media-query with a max width based on this. |

Other usage

The element can be used with any property and also without any property. In some cases you just want to add another color on a specific point or set a different content on a breakpoint.

In that case you can use the mixins also without the property and just use the content.

<h1></h1>

h1 {
	padding: 1rem;
	&::before {
		content: "This is the normal size";
	}
	@include min-(1, 36px) {
		background-color: #770d8d; // purple;
		&::before {
			content: "I am on a small screen now";
		}
	}
	@include max-(font-size, 1, 96px) {
		background-color: #b8d3a5; // green
		&::before {
			content: "Now your window is big";
		}
	}
}

This will result in an element like this:

Media Queries

Guyn provides a few set media queries which can be used.

| variable | aka | Description | | --------------- | -------------------------------------- | ------------------------------------------------------------ | | $small-only | max-width: 750px | Mobile only - Targets small screens only | | $small-up | min-width: 0px | Minimum Mobile - Targets small screens and up | | $medium-only | min-width: 750px; max-width: 960px | Tablet (Portrait) only - Targets medium screens only | | $medium-up | min-width: 750px | Tablet (Portrait) and up - Targets medium screens and up | | $medium-down | max-width: 960px | Tablet (Portrait) and down - Targets medium screens and down | | $large-only | min-width: 960px; max-width: 1280px | Tablet (Landscape) only - Targets large screens only | | $large-up | min-width: 960px | Tablet (Landscape) and up - Targets large screens and up | | $large-down | max-width: 1280px | Tablet (Landscape) and down - Targets large screens and down | | $xlarge-only | min-width: 1280px; max-width: 1920px | Targets xlarge screens only | | $xlarge-up | min-width: 1280px | Targets xlarge screens and up | | $xlarge-down | max-width: 1920px | Targets xlarge screens and down | | $xxlarge-only | min-width: 1920px; max-width: 9999px | * Targets xlarge screens only | | $xxlarge-up | min-width: 1920px | * Targets xlarge screens and up | | $xxlarge-down | max-width: 9999px | * Targets xlarge screens and down |

• xxlarge is not outputted by default. Read more about output

Usage

You can use it as following;

.element {
	width: 500px;
	height: 400px;

	// For tablets
	@media #{$medium-only} {
		width: 100vw;
		height: 500px;
	}

	// For mobile screens
	@media #{$small-only} {
		width: 100vw;
		height: 100vw;
	}
}

In this case, the element will be by default 500 by 400 pixels. It will be set too 100vw by 500px on Portrait tablets and on mobile it will be square (100vw by 100vw).