Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit a2e3e04

Browse files
author
Sérgio Gomes
committed
feat(layout-grid): Add initial implementation of the layout grid.
1 parent cc54d18 commit a2e3e04

File tree

12 files changed

+628
-2
lines changed

12 files changed

+628
-2
lines changed

‎.stylelintrc.yaml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,14 @@ rules:
245245
- severity: warning
246246
# Part of google's style guide
247247
number-leading-zero: never
248+
# No unknown unit
249+
unit-no-unknown:
250+
- true
251+
# Temporary rule to ignore CSS Grid `fr` unit while stylelint doesn't support it.
252+
# See https://github.com/stylelint/stylelint/issues/2307
253+
# TODO(sgomes): remove once fixed in stylelint
254+
- ignoreUnits:
255+
- fr
248256

249257
# We use Harry Roberts' BEM dialect as our preferred way to format classes.
250258
# See: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

‎demos/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<li><a href="elevation.html">Elevation</a></li>
3535
<li><a href="fab.html">FAB</a></li>
3636
<li><a href="icon-toggle.html">Icon Toggle</a></li>
37+
<li><a href="layout-grid.html">Layout grid</a></li>
3738
<li><a href="list.html">List</a></li>
3839
<li><a href="select.html">Select</a></li>
3940
<li><a href="simple-menu.html">Menu (simple)</a></li>

‎demos/layout-grid.html

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2016 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License
16+
-->
17+
<html>
18+
<head>
19+
<meta charset="utf-8">
20+
<title>MDC Layout Grid Demo</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
23+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
24+
<script src="assets/material-components-web.css.js" charset="utf-8"></script>
25+
26+
<style>
27+
.demo-grid {
28+
background-color: #DDDDDD;
29+
margin-bottom: 32px;
30+
}
31+
32+
.demo-cell {
33+
box-sizing: border-box;
34+
background-color: #666666;
35+
height: 200px;
36+
padding: 8px;
37+
color: white;
38+
39+
font-size: 1.5em;
40+
}
41+
42+
.demo-grid.max-width {
43+
max-width: 1600px;
44+
}
45+
46+
.demo-grid.left-align {
47+
margin-left: 0;
48+
margin-right: auto;
49+
}
50+
51+
.demo-grid-legend {
52+
margin: 16px 0 8px 0;
53+
}
54+
55+
.demo-ruler {
56+
position: fixed;
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
bottom: 0;
61+
left: 0;
62+
height: 20px;
63+
width: 100%;
64+
margin: 0;
65+
background: black;
66+
color: white;
67+
}
68+
69+
.demo-controls {
70+
display: none;
71+
margin-bottom: 8px;
72+
}
73+
.demo-warning::after {
74+
content: "This browser does not support custom properties, so margins and gutters cannot be changed at runtime.";
75+
}
76+
77+
@supports (--foo: green) {
78+
.demo-controls {
79+
display: block;
80+
}
81+
82+
.demo-warning::after {
83+
content: "";
84+
}
85+
}
86+
</style>
87+
</head>
88+
<body>
89+
<main class="mdc-typography">
90+
<h1>MDC Layout Grid</h1>
91+
92+
<div class="demo-controls">
93+
Margin:
94+
<select id="margin">
95+
<option value="8px">8px</option>
96+
<option value="16px" selected>16px</option>
97+
<option value="24px">24px</option>
98+
<option value="40px">40px</option>
99+
</select>
100+
101+
<br>
102+
103+
Gutter:
104+
<select id="gutter">
105+
<option value="8px">8px</option>
106+
<option value="16px" selected>16px</option>
107+
<option value="24px">24px</option>
108+
<option value="40px">40px</option>
109+
</select>
110+
</div>
111+
<div class="demo-warning"></div>
112+
113+
114+
<div class="demo-grid-legend">Grid of 1 column wide items</div>
115+
<div class="demo-grid mdc-layout-grid">
116+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
117+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
118+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
119+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
120+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
121+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
122+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
123+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
124+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
125+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
126+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
127+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
128+
</div>
129+
130+
<div class="demo-grid-legend">Grid of 4 column wide items</div>
131+
<div class="demo-grid mdc-layout-grid">
132+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
133+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
134+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
135+
</div>
136+
137+
<div class="demo-grid-legend">Grid of differently sized items</div>
138+
<div class="demo-grid mdc-layout-grid">
139+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6">6</div>
140+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
141+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-2">2</div>
142+
</div>
143+
144+
<div class="demo-grid-legend">Grid of items with tweaks at different screen sizes</div>
145+
<div class="demo-grid mdc-layout-grid">
146+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-8-tablet">6 (8 tablet)</div>
147+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6-tablet">4 (6 tablet)</div>
148+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--span-4-phone">2 (4 phone)</div>
149+
</div>
150+
151+
<div class="demo-grid-legend">Grid with max width and center alignment</div>
152+
<div class="demo-grid mdc-layout-grid max-width">
153+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
154+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
155+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
156+
</div>
157+
158+
<div class="demo-grid-legend">Grid with max width and left alignment</div>
159+
<div class="demo-grid mdc-layout-grid max-width left-align">
160+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
161+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
162+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
163+
</div>
164+
165+
<div class="demo-ruler"><div id="current"></div></div>
166+
</main>
167+
168+
<script>
169+
(function(global) {
170+
'use strict';
171+
var marginSelect = document.querySelector('#margin');
172+
marginSelect.addEventListener('change', function() {
173+
document.documentElement.style.setProperty('--mdc-layout-grid-margin', marginSelect.value);
174+
});
175+
176+
var gutterSelect = document.querySelector('#gutter');
177+
gutterSelect.addEventListener('change', function() {
178+
document.documentElement.style.setProperty('--mdc-layout-grid-gutter', gutterSelect.value);
179+
});
180+
181+
var current = document.querySelector('#current');
182+
var update = function() {
183+
var size = '(phone)';
184+
if (window.innerWidth >= 840) {
185+
size = '(desktop)';
186+
} else if (window.innerWidth >= 480) {
187+
size = '(tablet)';
188+
}
189+
current.textContent = window.innerWidth + 'px ' + size;
190+
};
191+
window.addEventListener('resize', update);
192+
update();
193+
})(this);
194+
</script>
195+
</body>
196+
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
},
2424
"devDependencies": {
2525
"ascii-table": "0.0.9",
26-
"autoprefixer": "^6.3.6",
26+
"autoprefixer": "^6.7.2",
2727
"babel-core": "^6.0.0",
2828
"babel-loader": "^6.2.4",
2929
"babel-plugin-transform-object-assign": "^6.8.0",

‎packages/material-components-web/material-components-web.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
@import "@material/fab/mdc-fab";
2424
@import "@material/form-field/mdc-form-field";
2525
@import "@material/icon-toggle/mdc-icon-toggle";
26+
@import "@material/layout-grid/mdc-layout-grid";
2627
@import "@material/list/mdc-list";
2728
@import "@material/menu/mdc-menu";
2829
@import "@material/radio/mdc-radio";

‎packages/material-components-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@material/fab": "^0.3.0",
2121
"@material/form-field": "^0.1.1",
2222
"@material/icon-toggle": "^0.1.2",
23+
"@material/layout-grid": "^0.1.0",
2324
"@material/list": "^0.2.0",
2425
"@material/menu": "^0.1.2",
2526
"@material/radio": "^0.1.2",

0 commit comments

Comments
 (0)