be31ad9f21
- Maximum of 3 columns in "web" layout, with 360px fixed width columns, 40px gutters and excess padding left and right. - 2 columns in "tablet" layout, with variable size columns and 24px gutters. - 1 columns in "phone" layout, with 16px gutters.
98 lines
2.6 KiB
SCSS
98 lines
2.6 KiB
SCSS
/* Cutoff points for devices */
|
|
$min_tablet_size: 768px;
|
|
$min_desktop_size: 1024px;
|
|
|
|
/* Web (desktop) layout. Columns are fixed width, and there's a maximum number
|
|
of 3 columns, after which we just add padding to either side. */
|
|
$web_columns: 3;
|
|
$web_column_size: 360px;
|
|
$web_gutter: 40px;
|
|
|
|
/* Tablet layout. There's a fixed number of columns, which grow to fill the
|
|
entire container. */
|
|
$tablet_columns: 2;
|
|
$tablet_gutter: 24px;
|
|
|
|
/* Phone layout. There's a fixed number of columns, which grow to fill the
|
|
entire container. */
|
|
$phone_columns: 1;
|
|
$phone_gutter: 16px;
|
|
|
|
|
|
/* Web layout */
|
|
.column-layout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
padding: $web_gutter / 2;
|
|
}
|
|
|
|
.column-layout > * {
|
|
min-width: $web_column_size;
|
|
width: $web_column_size;
|
|
margin: $web_gutter / 2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Alright, this is not pretty, but we need to add a number of invisible
|
|
elements to make sure that the flexbox elements align properly, even when
|
|
wrapping to less than 3 columns. It's the only way I've found to get the
|
|
last line to align correctly, while keeping the flexbox centered on its
|
|
container.
|
|
TODO(sgomes): Explore a different way of doing this. */
|
|
.column-layout > .wrap-hack {
|
|
height: 0;
|
|
min-height: 0;
|
|
max-height: 0;
|
|
border: none;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Add padding to avoid the flexbox growing beyond 3 columns.
|
|
Yes, we use padding with calc. I promise this is the last hack. */
|
|
$web_block_size: $web_column_size + $web_gutter;
|
|
$web_padding_size: $web_columns * ($web_column_size + $web_gutter) / 2;
|
|
@media screen
|
|
and (min-width: ($web_columns + 1) * $web_block_size) {
|
|
.column-layout {
|
|
padding-left: calc(50% - #{$web_padding_size});
|
|
padding-right: calc(50% - #{$web_padding_size});
|
|
}
|
|
}
|
|
|
|
/* Tablet layout */
|
|
$tablet_column_percent: 100% / $tablet_columns;
|
|
@media screen
|
|
and (min-width: $min_tablet_size)
|
|
and (max-width: $min_desktop_size - 1px) {
|
|
.column-layout {
|
|
padding: $tablet_gutter / 2;
|
|
}
|
|
|
|
.column-layout > * {
|
|
margin: $tablet_gutter / 2;
|
|
min-width: calc(#{$tablet_column_percent} - #{$tablet_gutter});
|
|
width: calc(#{$tablet_column_percent} - #{$tablet_gutter});
|
|
}
|
|
}
|
|
|
|
/* Phone layout */
|
|
$phone_column_percent: 100% / $phone_columns;
|
|
@media screen and (max-width: $min_tablet_size - 1px) {
|
|
.column-layout {
|
|
padding: $phone_gutter / 2;
|
|
}
|
|
|
|
.column-layout > * {
|
|
margin: $phone_gutter / 2;
|
|
width: calc(#{$phone_column_percent} - #{$phone_gutter});
|
|
min-width: calc(#{$phone_column_percent} - #{$phone_gutter});
|
|
}
|
|
}
|