Skip to content

Commit 98a5801

Browse files
ghislainegueringhislaineguerin
committed
change flexbox to grid
1 parent ff1db39 commit 98a5801

File tree

2 files changed

+154
-44
lines changed

2 files changed

+154
-44
lines changed

‎addon/styles/layout.css

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

7+
.layout-grid {
8+
display: grid;
9+
grid-template-columns: repeat(6,1fr);
10+
grid-gap: var(--spacing-2);
11+
}
12+
13+
.layout-grid > * {
14+
grid-column: span 6/span 6;
15+
}
16+
17+
.max-width {
18+
max-width: 100%;
19+
}
20+
21+
.col-1 {
22+
grid-column: span 1/span 1;
23+
}
24+
25+
.col-2 {
26+
grid-column: span 2/span 2;
27+
}
28+
29+
.col-3 {
30+
grid-column: span 3/span 3;
31+
}
32+
33+
.col-4 {
34+
grid-column: span 4/span 4;
35+
}
36+
37+
.col-5 {
38+
grid-column: span 5/span 5;
39+
}
40+
41+
.col-6 {
42+
grid-column: span 6/span 6;
43+
}
44+
45+
.offset-1 {
46+
grid-column-start: 2;
47+
}
48+
49+
.offset-2 {
50+
grid-column-start: 3;
51+
}
52+
53+
.offset-3 {
54+
grid-column-start: 4;
55+
}
56+
57+
.offset-4 {
58+
grid-column-start: 5;
59+
}
60+
61+
.offset-5 {
62+
grid-column-start: 6;
63+
}
64+
65+
@media (min-width: 576px) {
66+
.col-1-large {
67+
grid-column: span 1/span 1;
68+
}
69+
70+
.col-2-large {
71+
grid-column: span 2/span 2;
72+
}
73+
74+
.col-3-large {
75+
grid-column: span 3/span 3;
76+
}
77+
78+
.col-4-large {
79+
grid-column: span 4/span 4;
80+
}
81+
82+
.col-5-large {
83+
grid-column: span 5/span 5;
84+
}
85+
86+
.col-6-large {
87+
grid-column: span 6/span 6;
88+
}
89+
90+
.offset-1-large {
91+
grid-column-start: 2;
92+
}
93+
94+
.offset-2-large {
95+
grid-column-start: 3;
96+
}
97+
98+
.offset-3-large {
99+
grid-column-start: 4;
100+
}
101+
102+
.offset-4-large {
103+
grid-column-start: 5;
104+
}
105+
106+
.offset-5-large {
107+
grid-column-start: 6;
108+
}
109+
}
110+
111+
@media (max-width: 576px) {
112+
.layout-grid {
113+
grid-template-columns: repeat(4,1fr);
114+
}
115+
116+
.col-5 {
117+
grid-column: span 4/span 4;
118+
}
119+
120+
.col-6 {
121+
grid-column: span 4/span 4;
122+
}
123+
}
124+
125+
7126
.row {
8127
display: flex;
9128
margin-left: -2rem;
@@ -36,12 +155,12 @@
36155
margin: 0 2rem;
37156
}
38157

158+
.cards {
159+
160+
}
161+
39162
@media (max-width: 576px) {
40163
.row {
41164
flex-direction: column;
42165
}
43-
.col-50 {
44-
width: 100%;
45-
}
46166
}
47-

‎docs/concepts/layout.md

Lines changed: 31 additions & 40 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,15 +74,15 @@ 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>

0 commit comments

Comments
 (0)