Skip to content

Instantly share code, notes, and snippets.

@radum
Created March 8, 2019 12:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save radum/fe5352a36985483635a8bbdd405953b2 to your computer and use it in GitHub Desktop.
Save radum/fe5352a36985483635a8bbdd405953b2 to your computer and use it in GitHub Desktop.
Building Robust Layouts With Container Units
@function columns($i) {
@return calc(#{$i} * var(--column-unit));
}
@function gutters($i) {
@return calc(#{$i} * var(--gutter-unit));
}
@function column-spans($i) {
@return calc(#{$i} * var(--column-and-gutter-unit) - var(--gutter-unit));
}
@function gutter-spans($i) {
@return calc(#{$i} * var(--column-and-gutter-unit) - var(--column-unit));
}
@function mix-units($columns, $gutters: $columns) {
@return calc((#{$columns} * var(--column-unit)) + (#{$gutters} * var(--gutter-unit)));
}
:root {
// Grid proportions
--grid-width: 960;
--grid-column-width: 60;
--grid-columns: 12;
// Grid logic
--grid-gutters: calc(var(--grid-columns) - 1);
// Grid proportion logic
--column-proportion: calc(var(--grid-column-width) / var(--grid-width));
--gutter-proportion: calc((1 - (var(--grid-columns) * var(--column-proportion))) / var(--grid-gutters));
// Container Units
--column-unit: calc(var(--column-proportion) * var(--container-width));
--gutter-unit: calc(var(--gutter-proportion) * var(--container-width));
--column-and-gutter-unit: calc(var(--column-unit) + var(--gutter-unit));
// Container Width
--container-width: 80vw;
}
@media (min-width: 1000px) {
:root {
--container-width: 90vw;
}
}
@media (min-width: 1400px) {
:root {
--container-width: 1300px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment