Skip to content

change flexbox to grid #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 8, 2019
Merged

change flexbox to grid #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98a5801
change flexbox to grid
ghislaineguerin Aug 8, 2019
ba6dc99
removing all use of row and col
mansona Aug 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions addon/styles/helpers.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,3 +321,7 @@
.padding-right-xlarge {
padding-right: var(--spacing-5);
}

.max-width {
max-width: 100%;
}
122 changes: 97 additions & 25 deletions addon/styles/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,116 @@
width: var(--max-width);
}

.row {
display: flex;
margin-left: -2rem;
margin-right: -2rem;
flex-wrap: wrap;
margin-bottom: 4rem;
.layout-grid {
display: grid;
grid-template-columns: repeat(6,1fr);
grid-gap: var(--spacing-2);
}

.row >.col {
margin: 0 2rem;
flex-grow: 1;
flex-basis: 0;
.layout-grid > * {
grid-column: span 6/span 6;
}

.justify-center {
justify-content: center;
.col-1 {
grid-column: span 1/span 1;
}

.align-end {
align-items: flex-end;
.col-2 {
grid-column: span 2/span 2;
}

.col-one-half {
width: 50%;
margin: 0 2rem;
.col-3 {
grid-column: span 3/span 3;
}

.col-one-third {
width: 30.3%;
margin: 0 2rem;
.col-4 {
grid-column: span 4/span 4;
}

@media (max-width: 576px) {
.row {
flex-direction: column;
.col-5 {
grid-column: span 5/span 5;
}

.col-6 {
grid-column: span 6/span 6;
}

.offset-1 {
grid-column-start: 2;
}

.offset-2 {
grid-column-start: 3;
}

.offset-3 {
grid-column-start: 4;
}

.offset-4 {
grid-column-start: 5;
}

.offset-5 {
grid-column-start: 6;
}

@media (min-width: 576px) {
.col-1-large {
grid-column: span 1/span 1;
}

.col-2-large {
grid-column: span 2/span 2;
}
.col-50 {
width: 100%;

.col-3-large {
grid-column: span 3/span 3;
}

.col-4-large {
grid-column: span 4/span 4;
}

.col-5-large {
grid-column: span 5/span 5;
}

.col-6-large {
grid-column: span 6/span 6;
}

.offset-1-large {
grid-column-start: 2;
}

.offset-2-large {
grid-column-start: 3;
}

.offset-3-large {
grid-column-start: 4;
}

.offset-4-large {
grid-column-start: 5;
}

.offset-5-large {
grid-column-start: 6;
}
}

@media (max-width: 576px) {
.layout-grid {
grid-template-columns: repeat(4,1fr);
}

.col-5 {
grid-column: span 4/span 4;
}

.col-6 {
grid-column: span 4/span 4;
}
}
51 changes: 17 additions & 34 deletions docs/concepts/colours.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,29 @@ The primary palette is applied across every page of the website and contains the

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.

<div class="row">
<div class="col">
<ColorPallet @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark"/>
</div>
<div class="col">
<ColorPallet @color="#E04E39" @name="Orange" @variable="--color-orange" @class-name="bg-orange"/>
</div>
<div class="col">
<ColorPallet @color="#F4F6F8" @name="Muted Gray" @variable="--color-muted" @class-name="bg-muted"/>
</div>
</div>
<div class="row">
<div class="col">
<ColorPallet @color="#FFFFFF" @name="Light" @variable="--color-light" @class-name="bg-light"/>
</div>
</div>
<div class="layout-grid">
<ColorPallet class="col-2-large" @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark" />

<ColorPallet class="col-2-large" @color="#E04E39" @name="Orange" @variable="--color-orange" @class-name="bg-orange"/>

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

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

## Secondary Colours
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.

<div class="row">
<div class="col">
<ColorPallet @color="#A2A3A8" @name="Light" @variable="--color-gray" @class-name="bg-gray"/>
</div>
<div class="col">
<ColorPallet @color="#E3EEFC" @name="Color Info" @variable="--color-info" @class-name="bg-info"/>
</div>
<div class="col">
<ColorPallet @color="#FFD8E1" @name="Color Danger" @variable="--color-danger" @class-name="bg-danger"/>
</div>
</div>
<div class="row">
<div class="col">
<ColorPallet @color="#FCFFC9" @name="Color Warning" @variable="--color-warning" @class-name="bg-warning"/>
</div>
<div class="col">
<ColorPallet @color="#D9F9E3" @name="Color Success" @variable="--color-success" @class-name="bg-success"/>
</div>
<div class="layout-grid">
<ColorPallet class="col-2-large" @color="#A2A3A8" @name="Light" @variable="--color-gray" @class-name="bg-gray"/>

<ColorPallet class="col-2-large" @color="#E3EEFC" @name="Color Info" @variable="--color-info" @class-name="bg-info"/>

<ColorPallet class="col-2-large" @color="#FFD8E1" @name="Color Danger" @variable="--color-danger" @class-name="bg-danger"/>

<ColorPallet class="col-2-large" @color="#FCFFC9" @name="Color Warning" @variable="--color-warning" @class-name="bg-warning"/>

<ColorPallet class="col-2-large" @color="#D9F9E3" @name="Color Success" @variable="--color-success" @class-name="bg-success"/>
</div>

### Examples
Expand Down
84 changes: 38 additions & 46 deletions docs/concepts/layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ A grid can be formed with fixed boxes by arranging tiles in an inline block, ico

#### Center Aligned fixed width column
Example of a centered half column. A column class is used to limit its width.

```html
<div class="row justify-center">
<div class="col-one-half text-center">
<div class="layout-grid">
<div class="col-4-large offset-1-large text-center">
<h2>Build with the teams that never stop shipping.</h2>
<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>
</div>
Expand All @@ -19,8 +20,8 @@ Example of a centered half column. A column class is used to limit its width.
### Left Aligned fixed width

```html
<div class="row">
<div class="col-one-half">
<div class="layout-grid">
<div class="col-3">
<h3>A Simple Component</h3>
<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>
</div>
Expand All @@ -31,50 +32,40 @@ Example of a centered half column. A column class is used to limit its width.
### Equally Distributed Columns

```html
<div class="row">
<div class="col">
<div class="card text-center">
<div class="card-content">
<h3>Podcasts</h3>
<p>Rock n' Roll with EmberJS.</p>
</div>
<div class="layout-grid">
<div class="col-2-large card text-center">
<div class="card-content">
<h3>Podcasts</h3>
<p>Rock n' Roll with EmberJS.</p>
</div>
</div>
<div class="col">
<div class="card text-center">
<div class="card-content">
<h3>Books</h3>
<p>Rock n' Roll with EmberJS.</p>
</div>
<div class="col-2-large card text-center">
<div class="card-content">
<h3>Books</h3>
<p>Rock n' Roll with EmberJS.</p>
</div>
</div>
<div class="col">
<div class="card text-center">
<div class="card-content">
<h3>Videos</h3>
<p>Rock n' Roll with EmberJS.</p>
</div>
<div class="col-2-large card text-center">
<div class="card-content">
<h3>Videos</h3>
<p>Rock n' Roll with EmberJS.</p>
</div>
</div>
</div>
```

```html
<div class="row">
<div class="col">
<div class="card">
<div class="card-content">
<h3>Guides</h3>
<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>
</div>
<div class="layout-grid">
<div class="col-3-large card">
<div class="card-content">
<h3>Guides</h3>
<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>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-content">
<h3>Read Our Blog</h3>
<p>Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember Blog.</p>
</div>
<div class="col-3-large card">
<div class="card-content">
<h3>Read Our Blog</h3>
<p>Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember Blog.</p>
</div>
</div>
</div>
Expand All @@ -83,53 +74,54 @@ Example of a centered half column. A column class is used to limit its width.
### Photo Grid

```html
<div class="row align-end">
<div class="col">
<div class="layout-grid">
<div class="col-2-large">
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/400x500/000/fff">
</div>
<div class="col">
<div class="col-2-large">
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/500x300/000/fff">
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<div class="col-2-large">
<img class="img-fluid margin-bottom-small" src="https://dummyimage.com/400x500/000/fff">
</div>
</div>
```

## Spacing Scale
The spacing scale is used to manage spacing a white-space within layouts and components.
The spacing scale can be applied to both margin and padding properties.

<div class="row">
<div class="card col">
<div class="layout-grid">
<div class="card col-1">
<div class="spacer-xsmall bg-orange">
</div>
<div class="card-content">
<h4>Extra Small Offset</h4>
</div>
</div>
<div class="card col">
<div class="card col-1">
<div class="spacer-small bg-orange">
</div>
<div class="card-content">
<h4>Small Offset</h4>
</div>
</div>
<div class="card col">
<div class="card col-1">
<div class="spacer-medium bg-orange">
</div>
<div class="card-content">
<h4>Medium Offset</h4>
</div>
</div>
<div class="card col">
<div class="card col-1">
<div class="spacer-large bg-orange">
</div>
<div class="card-content">
<h4>Large Offset</h4>
</div>
</div>
<div class="card col">
<div class="card col-1">
<div class="spacer-xlarge bg-orange">
</div>
<div class="card-content">
Expand Down
2 changes: 1 addition & 1 deletion tests/dummy/app/templates/components/color-pallet.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{! template-lint-disable no-inline-styles style-concatenation }}

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