Adding column layout according to Material mockups:
- 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.master
parent
b035eae767
commit
be31ad9f21
|
@ -115,6 +115,11 @@
|
|||
<h1>Header panel</h1>
|
||||
<iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Column Layout</h1>
|
||||
<iframe src="./styleguide/column-layout/demo.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="styleguide/navigation/sidenav.js" async defer></script>
|
||||
|
|
|
@ -0,0 +1,97 @@
|
|||
/* 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});
|
||||
}
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
'use strict';
|
||||
|
||||
(function() {
|
||||
window.addEventListener('load', function() {
|
||||
var INVISIBLE_WRAPPING_ELEMENT_CLASS = 'wrap-hack';
|
||||
var INVISIBLE_WRAPPING_ELEMENT_COUNT = 3;
|
||||
var columnLayouts = document.querySelectorAll('.column-layout');
|
||||
|
||||
for (var i = 0; i < columnLayouts.length; i++) {
|
||||
var columnLayout = columnLayouts[i];
|
||||
// Add some hidden elements to make sure everything aligns correctly. See
|
||||
// CSS file for details.
|
||||
for (var j = 0; j < INVISIBLE_WRAPPING_ELEMENT_COUNT; j++) {
|
||||
var hiddenHackDiv = document.createElement('div');
|
||||
hiddenHackDiv.classList.add(INVISIBLE_WRAPPING_ELEMENT_CLASS);
|
||||
columnLayout.appendChild(hiddenHackDiv);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Column Layout</title>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="column-layout">
|
||||
<div>Each child</div>
|
||||
<div>gets to be</div>
|
||||
<div>an independent entity</div>
|
||||
<div>to be placed in columns,</div>
|
||||
<div>automatically.</div>
|
||||
</div>
|
||||
<script src="column-layout.js"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,21 @@
|
|||
@import '../styleguide_demo_bp';
|
||||
@import '../palette/palette';
|
||||
@import '_column-layout';
|
||||
|
||||
.column-layout {
|
||||
background-color: nth($paletteGrey, 2);
|
||||
}
|
||||
|
||||
.column-layout > * {
|
||||
min-height: 300px;
|
||||
background-color: nth($paletteGreen, 2);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.column-layout > *:nth-of-type(3n+1) {
|
||||
background-color: nth($paletteRed, 2);
|
||||
}
|
||||
|
||||
.column-layout > *:nth-of-type(3n+2) {
|
||||
background-color: nth($paletteBlue, 2);
|
||||
}
|
Loading…
Reference in New Issue