Skip to content
Permalink
Browse files

fix(grid): Add documentation for col bump classes (#3193)

  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Apr 20, 2018
1 parent f8f8801 commit a095cba8aeced576c80ed4469124c26640326680
Showing with 55 additions and 3 deletions.
  1. +1 −1 ui/utilities/grid/_doc.scss
  2. +35 −1 ui/utilities/grid/docs.mdx
  3. +2 −1 ui/utilities/grid/docs/Grid.jsx
  4. +17 −0 ui/utilities/grid/docs/Grid.scss
@@ -28,7 +28,7 @@
*
* @utility
* @name grid
* @selector [class*='slds-grid'], [class*='slds-wrap'], [class*='slds-nowrap'], [class*='slds-gutters'], .slds-col, [class*='slds-col-'], .slds-has-flexi-truncate, .slds-no-flex, .slds-no-space, [class*='slds-grow'], [class*='slds-shrink'], [class*='slds-container']
* @selector [class*='slds-grid'], [class*='slds-wrap'], [class*='slds-nowrap'], [class*='slds-gutters'], .slds-col, [class*='slds-col-'], [class*='slds-col_'], .slds-has-flexi-truncate, .slds-no-flex, .slds-no-space, [class*='slds-grow'], [class*='slds-shrink'], [class*='slds-container']
* @support dev-ready
* @layout responsive
*/
@@ -362,6 +362,40 @@ If you want your columns to grow from the end of the horizontal axis, apply the
</Grid>
</Example>

### Content alignment with bump

To "bump" a single or multiple grid items, apply the class `slds-col_bump-{direction}`, with `{direction}` being either left, right, top or bottom, to a grid item.

**Bump Left**

In the example below, applying the left bump class to item 5 bumps items 1 through 4 to the left.

<Example title="Grid Content Alignment Bump Left">
<Grid bareGrid>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div className="slds-col_bump-left"><span>5</span></div>
<div><span>6</span></div>
</Grid>
</Example>

**Bump Right**

In the example below, applying the right bump class to item 5 bumps item 6 to the right.

<Example title="Grid Content Alignment Bump Right">
<Grid bareGrid>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div className="slds-col_bump-right"><span>5</span></div>
<div><span>6</span></div>
</Grid>
</Example>

### Reversed

There may be times you find yourself in a situation to reverse the visual flow of your columns, you can do this both horizontally and vertically. To reverse the horizontal flow, add the class `slds-grid_reverse` to the `slds-grid` container. To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the `slds-grid` container.
@@ -452,7 +486,7 @@ To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the

To specify the vertical placement of grid items on the cross axis, you can apply `slds-align-top`, `slds-align-middle`, and `slds-align-bottom` to a `slds-col` element.

<Example title="Grid Vertical Align inidividual">
<Example title="Grid Vertical Align individual">
<Grid style={{height: '200px'}}>
<Column className="slds-align-top">1</Column>
<Column className="slds-align-middle">2</Column>
@@ -25,7 +25,8 @@ class Grid extends Component {
<div
className={classNames(
'simple-grid',
this.props.small && 'simple-grid_small'
this.props.small && 'simple-grid_small',
this.props.bareGrid && 'simple-grid_bare-columns'
)}
>
<CodeView>
@@ -37,3 +37,20 @@
.simple-grid__buttons {
margin: auto;
}

.simple-grid_bare-columns .slds-grid > div {
display: inline-flex;
background: #54698d;
color: #fff;
text-align: center;
background-clip: content-box;
border: 1px solid #fff;
border-radius: 0;
}

.simple-grid_bare-columns .slds-grid > div > span {
align-self: center;
margin: auto;
font-size: 1.575rem;
padding: 0.5rem;
}

0 comments on commit a095cba

Please sign in to comment.
You can’t perform that action at this time.