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:

The quick brown fox jumps over the lazy dog

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:

The quick brown fox jumps over the lazy dog

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(.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 quick brown fox jumps over the lazy dog

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: