From 6bbe00d54fc7a879ff652f8bc5dd6c1011d3ddd4 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Fri, 21 Apr 2017 17:18:35 -0700 Subject: [PATCH] Replace concept of offset with explicit 'start' for CSS Grid --- docs/pages/css-grid.md | 211 +-------------------------------------- scss/grid/_css-grid.scss | 13 +++ 2 files changed, 16 insertions(+), 208 deletions(-) diff --git a/docs/pages/css-grid.md b/docs/pages/css-grid.md index 15f9abc62..6d596ed7e 100644 --- a/docs/pages/css-grid.md +++ b/docs/pages/css-grid.md @@ -55,182 +55,6 @@ The structure of the flex grid is identical to that of the float grid. Rows use --- -## Advanced Sizing - -If no sizing class is added to the column, it will simply expand to fill the leftover space. We call this an *expand behavior*. - -```html_example -
-
4 columns
-
Whatever's left!
-
-``` - ---- - -Multiple expanding columns will share the leftover space equally. - -```html_example -
-
4 columns
-
Whatever's left!
-
Whatever's left!
-
-``` - ---- - -A column can also be made to *shrink*, by adding the `.shrink` class. This means it will only take up the horizontal space its contents need. - -```html_example -
-
Shrink!
-
Expand!
-
-``` - ---- - -## Responsive Adjustments - -Columns in a flex grid will not wrap if not given an explicit size—this is what allows the magical auto-sizing to work. To make columns stack on smaller screens, add the class `.small-12` manually. - -To switch back to the expand behavior from a percentage or shrink behavior, use the classes `.medium-expand` or `.large-expand`. In the below example, the columns stack on small screens, and become even-width on large screens. - -```html_example -
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
-``` - ---- - -### Automatic Stacking - -We have a few shorthand classes for the above behavior. Use the `.[size]-unstack` classes to stack all columns in the row by default, and then unstack them on a larger screen size, making each one equal-width. - -```html_example -
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
-``` - ---- - -## Column Alignment - -Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row. - -### Horizontal Alignment - -Columns can be aligned the same way you would align text in a paragraph. By default, all columns align to the left (or the right in RTL), but this can be overridden with by adding the `.align-[dir]` class to the flex row. - -```html -
-
Aligned to
-
the left
-
-
-
Aligned to
-
the right
-
-
-
Aligned to
-
the middle
-
-
-
Aligned to
-
the edges
-
-
-
Aligned to
-
the space around
-
-``` - -
-
-
-
Aligned to
-
the left
-
-
-
Aligned to
-
the right
-
-
-
Aligned to
-
the middle
-
-
-
Aligned to
-
the edges
-
-
-
Aligned to
-
the space around
-
-
-
- -You might be wondering what the difference between `.align-justify` and `.align-spaced` is. A justified grid (`justify-content: space-between`) evenly distributes the space *between* each column. The first and last columns pin to the edge of the grid. - -A spaced grid (`justify-content: space-around`) evenly distributes the space *around* each column. This means there will always be space to the left of the first column, and to the right of the last column. - -The horizontal alignment classes are shorthands for the `justify-content` CSS property. [Learn more about `justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). - ---- - -### Vertical Alignment - -By default, all columns in a flex grid stretch to be equal height. This behavior can be changed with another set of alignment classes. That's right, *middle alignment in CSS*! - -Your options for vertical alignment are `top`, `middle`, `bottom`, and `stretch`. Note that we use the word *middle* for vertical alignment, and *center* for horizontal alignment. - -Applying a vertical alignment class to the flex row will affect every column directly inside it. - -```html_example -
-
I'm in the middle!
-
I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
-
-``` - -```html_example -
-
These columns align to the top.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
-
-``` - ---- - -Similar alignment classes can also be applied to individual columns, which use the format `.align-self-*` instead of `.align-*`. - -
-

In Foundation 6.2, we introduced the .align-self-* classes, which replace the old method of using .align-* classes on columns. The old classes will be removed completely in Foundation 6.3.

-
- -```html_example -
-
Align bottom
-
Align middle
-
Align top
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?
-
-``` - ---- ## Collapse/Uncollapse Rows @@ -272,48 +96,19 @@ The `.is-collapse-child` class removes negative margins from nested row under co --- -## Offsets +## Starts -Offsets work identically to the float grid, by applying `margin-left` to a column. +CSS Grid doesn't use the concept of an "offset" in the same way that the float and flex grids do, it is more explicit. You can specify exactly the row that you want things to start on. ```html_example
-
Offset 2 on large
+
Start in column 3 on large
4 columns
``` --- -## Source Ordering - -Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks. - -The CSS property is easy enough to remember. - -```scss -.element { - order: 1; -} -``` - -Columns within a row will be sorted by their `order` property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML. - -We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes. - -```html_example -
-
- This column will come second on small, and first on medium and larger. -
-
- This column will come first on small, and second on medium and larger. -
-
-``` - ---- - ## Block Grids To define column widths at the row-level, instead of the individual column level, add the class `.[size]-up-[n]` to a row, where `[n]` is the number of columns to display per row, and `[size]` is the breakpoint at which to apply the effect. diff --git a/scss/grid/_css-grid.scss b/scss/grid/_css-grid.scss index a247040e6..552dd6a31 100644 --- a/scss/grid/_css-grid.scss +++ b/scss/grid/_css-grid.scss @@ -128,6 +128,10 @@ grid-column-end: $column-end; } +@mixin css-grid-column-start($n) { + grid-column-start: $n; +} + @mixin foundation-css-grid { .row { @include css-grid-container; @@ -159,6 +163,15 @@ } // TODO: Figure out stack/unstack + + @for $i from 1 through $grid-column-count { + // Offsets + $o: $i - 1; + + .#{$-zf-size}-start-#{$o} { + @include css-grid-column-start($o); + } + } } .columns { -- 2.47.2