Responsive + CSS Custom Props

by phloe

HTML

<div class="grid">
	<div class="grid__cell grid__cell--xs-6 grid__cell--sm-4">
		<div class="teaser">
			<h3 class="teaser__title">Title</h3>
		</div>
	</div>
	<div class="grid__cell grid__cell--xs-6 grid__cell--sm-4">
		<div class="teaser">
			<h3 class="teaser__title">Title</h3>
		</div>
	</div>
	<div class="grid__cell grid__cell--xs-6 grid__cell--sm-4">
		<div class="teaser">
			<h3 class="teaser__title">Title</h3>
		</div>
	</div>
</div>

SCSS

:root {
	--columns: 12;
	--bp-value: 4;
	--size: 8;
	
	@media (min-width: 400px) {
		--bp-value: 8;
	}

	@media (min-width: 800px) {
		--bp-value: 12;
	}
}

.grid {
	display: flex;
	flex-flow: row wrap;
	margin: -15px;
	
	&__cell {
		--columns: 12;
		--size: calc(2 + (var(--columns) * 0.5));
		flex-basis: calc(((var(--columns) / 12) * 100%) - 30px);
		margin: 15px;

		&--xs {
			&-2 {
			--columns: 2;
			}
			&-4 {
				--columns: 4;
			}
			&-6 {
				--columns: 6;
			}
			&-8 {
				--columns: 8;
			}
		}

		@media (min-width: 400px) {
			&--sm {
				&-2 {
					--columns: 2;
				}
				&-4 {
					--columns: 4;
				}
				&-6 {
					--columns: 6;
				}
			}
		}

		@media (min-width: 800px) {
			&--md {
				&-2 {
					--columns: 2;
				}
				&-4 {
					--columns: 4;
				}
				&-6 {
					--columns: 6;
				}
			}
		}
	}
}

.teaser {
	padding: 10px;
	background-color: #EEE;
	
	&__title {
		font-size: calc((0.5rem * var(--size)) / (12 / var(--bp-value)));
	}
}