Skip to content

Commit 8540e1d

Browse files
mansonamansona
authored
Merge pull request #199 from ember-learn/update-layout-class
change flexbox to grid
2 parents ff1db39 + ba6dc99 commit 8540e1d

File tree

5 files changed

+157
-106
lines changed

5 files changed

+157
-106
lines changed

‎addon/styles/helpers.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,3 +321,7 @@
321321
.padding-right-xlarge {
322322
padding-right: var(--spacing-5);
323323
}
324+
325+
.max-width {
326+
max-width: 100%;
327+
}

‎addon/styles/layout.css

Lines changed: 97 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,116 @@
44
width: var(--max-width);
55
}
66

7-
.row {
8-
display: flex;
9-
margin-left: -2rem;
10-
margin-right: -2rem;
11-
flex-wrap: wrap;
12-
margin-bottom: 4rem;
7+
.layout-grid {
8+
display: grid;
9+
grid-template-columns: repeat(6,1fr);
10+
grid-gap: var(--spacing-2);
1311
}
1412

15-
.row >.col {
16-
margin: 0 2rem;
17-
flex-grow: 1;
18-
flex-basis: 0;
13+
.layout-grid > * {
14+
grid-column: span 6/span 6;
1915
}
2016

21-
.justify-center {
22-
justify-content: center;
17+
.col-1 {
18+
grid-column: span 1/span 1;
2319
}
2420

25-
.align-end {
26-
align-items: flex-end;
21+
.col-2 {
22+
grid-column: span 2/span 2;
2723
}
2824

29-
.col-one-half {
30-
width: 50%;
31-
margin: 0 2rem;
25+
.col-3 {
26+
grid-column: span 3/span 3;
3227
}
3328

34-
.col-one-third {
35-
width: 30.3%;
36-
margin: 0 2rem;
29+
.col-4 {
30+
grid-column: span 4/span 4;
3731
}
3832

39-
@media (max-width: 576px) {
40-
.row {
41-
flex-direction: column;
33+
.col-5 {
34+
grid-column: span 5/span 5;
35+
}
36+
37+
.col-6 {
38+
grid-column: span 6/span 6;
39+
}
40+
41+
.offset-1 {
42+
grid-column-start: 2;
43+
}
44+
45+
.offset-2 {
46+
grid-column-start: 3;
47+
}
48+
49+
.offset-3 {
50+
grid-column-start: 4;
51+
}
52+
53+
.offset-4 {
54+
grid-column-start: 5;
55+
}
56+
57+
.offset-5 {
58+
grid-column-start: 6;
59+
}
60+
61+
@media (min-width: 576px) {
62+
.col-1-large {
63+
grid-column: span 1/span 1;
64+
}
65+
66+
.col-2-large {
67+
grid-column: span 2/span 2;
4268
}
43-
.col-50 {
44-
width: 100%;
69+
70+
.col-3-large {
71+
grid-column: span 3/span 3;
72+
}
73+
74+
.col-4-large {
75+
grid-column: span 4/span 4;
76+
}
77+
78+
.col-5-large {
79+
grid-column: span 5/span 5;
80+
}
81+
82+
.col-6-large {
83+
grid-column: span 6/span 6;
84+
}
85+
86+
.offset-1-large {
87+
grid-column-start: 2;
88+
}
89+
90+
.offset-2-large {
91+
grid-column-start: 3;
92+
}
93+
94+
.offset-3-large {
95+
grid-column-start: 4;
96+
}
97+
98+
.offset-4-large {
99+
grid-column-start: 5;
100+
}
101+
102+
.offset-5-large {
103+
grid-column-start: 6;
45104
}
46105
}
47106

107+
@media (max-width: 576px) {
108+
.layout-grid {
109+
grid-template-columns: repeat(4,1fr);
110+
}
111+
112+
.col-5 {
113+
grid-column: span 4/span 4;
114+
}
115+
116+
.col-6 {
117+
grid-column: span 4/span 4;
118+
}
119+
}

‎docs/concepts/colours.md

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,29 @@ The primary palette is applied across every page of the website and contains the
77

88
The following swatches contain a sample of each of the primary palette colours, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.
99

10-
<div class="row">
11-
<div class="col">
12-
<ColorPallet @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark"/>
13-
</div>
14-
<div class="col">
15-
<ColorPallet @color="#E04E39" @name="Orange" @variable="--color-orange" @class-name="bg-orange"/>
16-
</div>
17-
<div class="col">
18-
<ColorPallet @color="#F4F6F8" @name="Muted Gray" @variable="--color-muted" @class-name="bg-muted"/>
19-
</div>
20-
</div>
21-
<div class="row">
22-
<div class="col">
23-
<ColorPallet @color="#FFFFFF" @name="Light" @variable="--color-light" @class-name="bg-light"/>
24-
</div>
25-
</div>
10+
<div class="layout-grid">
11+
<ColorPallet class="col-2-large" @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark" />
12+
13+
<ColorPallet class="col-2-large" @color="#E04E39" @name="Orange" @variable="--color-orange" @class-name="bg-orange"/>
2614

15+
<ColorPallet class="col-2-large" @color="#F4F6F8" @name="Muted Gray" @variable="--color-muted" @class-name="bg-muted"/>
2716

17+
<ColorPallet class="col-2-large" @color="#FFFFFF" @name="Light" @variable="--color-light" @class-name="bg-light"/>
18+
</div>
2819

2920
## Secondary Colours
3021
The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
3122

32-
<div class="row">
33-
<div class="col">
34-
<ColorPallet @color="#A2A3A8" @name="Light" @variable="--color-gray" @class-name="bg-gray"/>
35-
</div>
36-
<div class="col">
37-
<ColorPallet @color="#E3EEFC" @name="Color Info" @variable="--color-info" @class-name="bg-info"/>
38-
</div>
39-
<div class="col">
40-
<ColorPallet @color="#FFD8E1" @name="Color Danger" @variable="--color-danger" @class-name="bg-danger"/>
41-
</div>
42-
</div>
43-
<div class="row">
44-
<div class="col">
45-
<ColorPallet @color="#FCFFC9" @name="Color Warning" @variable="--color-warning" @class-name="bg-warning"/>
46-
</div>
47-
<div class="col">
48-
<ColorPallet @color="#D9F9E3" @name="Color Success" @variable="--color-success" @class-name="bg-success"/>
49-
</div>
23+
<div class="layout-grid">
24+
<ColorPallet class="col-2-large" @color="#A2A3A8" @name="Light" @variable="--color-gray" @class-name="bg-gray"/>
25+
26+
<ColorPallet class="col-2-large" @color="#E3EEFC" @name="Color Info" @variable="--color-info" @class-name="bg-info"/>
27+
28+
<ColorPallet class="col-2-large" @color="#FFD8E1" @name="Color Danger" @variable="--color-danger" @class-name="bg-danger"/>
29+
30+
<ColorPallet class="col-2-large" @color="#FCFFC9" @name="Color Warning" @variable="--color-warning" @class-name="bg-warning"/>
31+
32+
<ColorPallet class="col-2-large" @color="#D9F9E3" @name="Color Success" @variable="--color-success" @class-name="bg-success"/>
5033
</div>
5134

5235
### Examples

‎docs/concepts/layout.md

Lines changed: 38 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ A grid can be formed with fixed boxes by arranging tiles in an inline block, ico
77

88
#### Center Aligned fixed width column
99
Example of a centered half column. A column class is used to limit its width.
10+
1011
```html
11-
<div class="row justify-center">
12-
<div class="col-one-half text-center">
12+
<div class="layout-grid">
13+
<div class="col-4-large offset-1-large text-center">
1314
<h2>Build with the teams that never stop shipping.</h2>
1415
<p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
1516
</div>
@@ -19,8 +20,8 @@ Example of a centered half column. A column class is used to limit its width.
1920
### Left Aligned fixed width
2021

2122
```html
22-
<div class="row">
23-
<div class="col-one-half">
23+
<div class="layout-grid">
24+
<div class="col-3">
2425
<h3>A Simple Component</h3>
2526
<p>Ember Components are a superset of HTML – that means is a full-fledged Ember Component! To pass data into Components, use the @ symbol along with an argument name.</p>
2627
</div>
@@ -31,50 +32,40 @@ Example of a centered half column. A column class is used to limit its width.
3132
### Equally Distributed Columns
3233

3334
```html
34-
<div class="row">
35-
<div class="col">
36-
<div class="card text-center">
37-
<div class="card-content">
38-
<h3>Podcasts</h3>
39-
<p>Rock n' Roll with EmberJS.</p>
40-
</div>
35+
<div class="layout-grid">
36+
<div class="col-2-large card text-center">
37+
<div class="card-content">
38+
<h3>Podcasts</h3>
39+
<p>Rock n' Roll with EmberJS.</p>
4140
</div>
4241
</div>
43-
<div class="col">
44-
<div class="card text-center">
45-
<div class="card-content">
46-
<h3>Books</h3>
47-
<p>Rock n' Roll with EmberJS.</p>
48-
</div>
42+
<div class="col-2-large card text-center">
43+
<div class="card-content">
44+
<h3>Books</h3>
45+
<p>Rock n' Roll with EmberJS.</p>
4946
</div>
5047
</div>
51-
<div class="col">
52-
<div class="card text-center">
53-
<div class="card-content">
54-
<h3>Videos</h3>
55-
<p>Rock n' Roll with EmberJS.</p>
56-
</div>
48+
<div class="col-2-large card text-center">
49+
<div class="card-content">
50+
<h3>Videos</h3>
51+
<p>Rock n' Roll with EmberJS.</p>
5752
</div>
5853
</div>
5954
</div>
6055
```
6156

6257
```html
63-
<div class="row">
64-
<div class="col">
65-
<div class="card">
66-
<div class="card-content">
67-
<h3>Guides</h3>
68-
<p>If you're familiar with JavaScript and web application development, our Guides will teach you everything you need to know to get started building with Ember.</p>
69-
</div>
58+
<div class="layout-grid">
59+
<div class="col-3-large card">
60+
<div class="card-content">
61+
<h3>Guides</h3>
62+
<p>If you're familiar with JavaScript and web application development, our Guides will teach you everything you need to know to get started building with Ember.</p>
7063
</div>
7164
</div>
72-
<div class="col">
73-
<div class="card">
74-
<div class="card-content">
75-
<h3>Read Our Blog</h3>
76-
<p>Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember Blog.</p>
77-
</div>
65+
<div class="col-3-large card">
66+
<div class="card-content">
67+
<h3>Read Our Blog</h3>
68+
<p>Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember Blog.</p>
7869
</div>
7970
</div>
8071
</div>
@@ -83,53 +74,54 @@ Example of a centered half column. A column class is used to limit its width.
8374
### Photo Grid
8475

8576
```html
86-
<div class="row align-end">
87-
<div class="col">
77+
<div class="layout-grid">
78+
<div class="col-2-large">
8879
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/400x500/000/fff">
8980
</div>
90-
<div class="col">
81+
<div class="col-2-large">
9182
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/500x300/000/fff">
9283
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/600x400/000/fff">
9384
</div>
94-
<div class="col">
85+
<div class="col-2-large">
9586
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/400x500/000/fff">
9687
</div>
9788
</div>
9889
```
90+
9991
## Spacing Scale
10092
The spacing scale is used to manage spacing a white-space within layouts and components.
10193
The spacing scale can be applied to both margin and padding properties.
10294

103-
<div class="row">
104-
<div class="card col">
95+
<div class="layout-grid">
96+
<div class="card col-1">
10597
<div class="spacer-xsmall bg-orange">
10698
</div>
10799
<div class="card-content">
108100
<h4>Extra Small Offset</h4>
109101
</div>
110102
</div>
111-
<div class="card col">
103+
<div class="card col-1">
112104
<div class="spacer-small bg-orange">
113105
</div>
114106
<div class="card-content">
115107
<h4>Small Offset</h4>
116108
</div>
117109
</div>
118-
<div class="card col">
110+
<div class="card col-1">
119111
<div class="spacer-medium bg-orange">
120112
</div>
121113
<div class="card-content">
122114
<h4>Medium Offset</h4>
123115
</div>
124116
</div>
125-
<div class="card col">
117+
<div class="card col-1">
126118
<div class="spacer-large bg-orange">
127119
</div>
128120
<div class="card-content">
129121
<h4>Large Offset</h4>
130122
</div>
131123
</div>
132-
<div class="card col">
124+
<div class="card col-1">
133125
<div class="spacer-xlarge bg-orange">
134126
</div>
135127
<div class="card-content">

‎tests/dummy/app/templates/components/color-pallet.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{! template-lint-disable no-inline-styles style-concatenation }}
22

3-
<div class="color-pallet">
3+
<div class="color-pallet" ...attributes>
44
<div class="color-pallet__example" style="background-color: {{@color}}">
55
<div class="color-pallet__example-text-row" style="grid-template-columns: repeat({{textClasses.length}}, 1fr)">
66
{{#each textClasses as |textClass|}}

0 commit comments

Comments
 (0)