From 9c2b86acdd15e4b27cc4da679424d62d98225d49 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 18 Jun 2018 11:54:08 -0400 Subject: [PATCH] docs(grid): update API docs and add to breaking changes --- angular/BREAKING.md | 14 ++++++++++++++ core/src/components/col/readme.md | 3 +++ core/src/components/grid/readme.md | 24 ++---------------------- core/src/components/row/readme.md | 2 ++ 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/angular/BREAKING.md b/angular/BREAKING.md index 7831d1feaf..b3cabfd391 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -13,6 +13,7 @@ A list of the breaking changes introduced in Ionic Angular v4. - [Dynamic Mode](#dynamic-mode) - [FAB](#fab) - [Fixed Content](#fixed-content) +- [Grid](#grid) - [Icon](#icon) - [Input](#Input) - [Item](#item) @@ -427,6 +428,19 @@ The `` container was previously placed inside of the fixed content by d ``` +## Grid + +The Grid has been refactored in order to support css variables and a dynamic number of columns. The following column attributes have been changed. + +_In the following examples, `{breakpoint}` refers to the optional screen breakpoint (xs, sm, md, lg, xl) and `{value}` refers to the number of columns._ + +- `col-{breakpoint}-{value}` attributes have been renamed to `size-{breakpoint}=“{value}”` +- `offset-{breakpoint}-{value}` attributes have been renamed to `offset-{breakpoint}=“{value}”` +- `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”` +- `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”` + +Customizing the padding styles should now be done with css variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md). + ## Icon ### Fonts Removed diff --git a/core/src/components/col/readme.md b/core/src/components/col/readme.md index e40db8ad50..f5a593d6c4 100644 --- a/core/src/components/col/readme.md +++ b/core/src/components/col/readme.md @@ -3,6 +3,9 @@ Columns are cellular components of the [grid](../Grid) system and go inside of a [row](../Row). They will expand to fill their row. All content within a grid should go inside of a column. +See [Grid Layout](/docs/layout/grid) for more information. + + ## Column attributes By default, columns will stretch to fill the entire height of the row. diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md index d0f509ba8a..76ff669022 100644 --- a/core/src/components/grid/readme.md +++ b/core/src/components/grid/readme.md @@ -3,29 +3,9 @@ The grid is a powerful mobile-first flexbox system for building custom layouts. -It is composed of two units — a grid, and column(s). Columns will expand to fill the grid, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS. +It is composed of three units — a grid, [row(s)](../Row) and [column(s)]((../Col)). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS. -See [Responsive Grid](/docs/layout/grid) for more information. - -## Grid attributes - -By default, columns will stretch to fill the entire height of the grid and wrap when necessary. -There are several attributes that can be added to a grid to customize this behavior. - -| Property | Description | -|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| -| nowrap | Adds `flex-wrap: nowrap`. Forces the columns to a single row. | -| wrap-reverse | Adds `flex-wrap: wrap-reverse`. The columns will wrap in reverse. | -| align-items-start | Adds `align-items: flex-start`. All columns will be vertically aligned at the top, unless they specify their own alignment. | -| align-items-center | Adds `align-items: center`. All columns will be vertically aligned in the center, unless they specify their own alignment. | -| align-items-end | Adds `align-items: flex-end`. All columns will be vertically aligned at the bottom, unless they specify their own alignment. | -| align-items-stretch | Adds `align-items: stretch`. All columns will be stretched to take up the entire height of the row, unless they specify their own alignment. | -| align-items-baseline | Adds `align-items: baseline`. All columns will be vertically aligned at their baselines, unless they specify their own alignment. | -| justify-content-start | Adds `justify-content: start`. All columns will be horizontally aligned at the start. | -| justify-content-center | Adds `justify-content: center`. All columns will be horizontally aligned at the center. | -| justify-content-end | Adds `justify-content: end`. All columns will be horizontally aligned at the end. | -| justify-content-around | Adds `justify-content: space-around`. All columns will be horizontally aligned with equal space around them. | -| justify-content-between | Adds `justify-content: space-between`. All columns will be horizontally aligned with a half-size space on either end. | +See [Grid Layout](/docs/layout/grid) for more information. diff --git a/core/src/components/row/readme.md b/core/src/components/row/readme.md index 9ace389668..f52dc8b380 100644 --- a/core/src/components/row/readme.md +++ b/core/src/components/row/readme.md @@ -3,6 +3,8 @@ Rows are horizontal components of the [grid](../Grid) system and contain varying numbers of [columns](../Col). They ensure the columns are positioned properly. +See [Grid Layout](/docs/layout/grid) for more information. + ## Row attributes