Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: suitcss/components-grid
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 3.0.3
Choose a base ref
...
head repository: suitcss/components-grid
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 15 commits
  • 10 files changed
  • 7 contributors

Commits on Oct 13, 2016

  1. Standardize package.json

    Brian Drum committed Oct 13, 2016
    Copy the full SHA
    4d0d75d View commit details

Commits on Oct 15, 2016

  1. Merge pull request #47 from briandrum/update-package

    Standardize package.json
    giuseppeg authored Oct 15, 2016
    Copy the full SHA
    936ff3a View commit details

Commits on Apr 28, 2017

  1. Copy the full SHA
    3b2c3db View commit details
  2. Add lint npm script

    simonsmith committed Apr 28, 2017
    Copy the full SHA
    98a0fe9 View commit details

Commits on Dec 5, 2017

  1. Rename Grid-fit > Grid-fill

    Closes #51
    simonsmith committed Dec 5, 2017
    Copy the full SHA
    efabc69 View commit details
  2. Merge pull request #52 from suitcss/rename-grid-fit

    Rename Grid-fit > Grid-fill
    simonsmith authored Dec 5, 2017
    Copy the full SHA
    69d2a6f View commit details

Commits on Dec 7, 2017

  1. Repurpose Grid--fit

    Tim Kelty committed Dec 7, 2017
    Copy the full SHA
    e06ae3e View commit details

Commits on Dec 8, 2017

  1. Merge pull request #53 from suitcss/grid-fit

    Repurpose Grid--fit
    timkelty authored Dec 8, 2017
    Copy the full SHA
    7e3f41f View commit details

Commits on Dec 13, 2017

  1. Remove Grid-cell in favour of implicit Grid child.

    Tim Kelty authored and simonsmith committed Dec 13, 2017
    Copy the full SHA
    74add0a View commit details

Commits on Dec 14, 2017

  1. Merge pull request #54 from suitcss/remove-cell

    Remove Grid-cell in favour of implicit Grid child.
    timkelty authored Dec 14, 2017
    Copy the full SHA
    6e09694 View commit details

Commits on Jan 25, 2018

  1. 4.0.0

    simonsmith committed Jan 25, 2018
    Copy the full SHA
    75dd09e View commit details

Commits on Mar 26, 2018

  1. Update naming of variables according to the conventions

    Kristofor Salmin committed Mar 26, 2018
    Copy the full SHA
    4769dd7 View commit details

Commits on Mar 28, 2018

  1. Merge pull request #56 from racse1/update-variables

    Update naming of variables according to the conventions
    simonsmith authored Mar 28, 2018
    Copy the full SHA
    a63177d View commit details

Commits on Sep 12, 2019

  1. Note Breaking Change in CHANGELOG

    This one caught me off guard.
    jherdman authored Sep 12, 2019
    Copy the full SHA
    1c8d17d View commit details

Commits on Sep 16, 2019

  1. Merge pull request #58 from jherdman/patch-1

    Note Breaking Change in CHANGELOG
    simonsmith authored Sep 16, 2019
    Copy the full SHA
    b2793b6 View commit details
Showing with 7,052 additions and 223 deletions.
  1. +1 −2 .travis.yml
  2. +18 −11 CHANGELOG.md
  3. +35 −26 README.md
  4. +30 −35 lib/grid.css
  5. +4,191 −0 package-lock.json
  6. +25 −22 package.json
  7. +0 −6 test/config.json
  8. +188 −120 test/index.html
  9. +1 −1 test/test.css
  10. +2,563 −0 yarn.lock
3 changes: 1 addition & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
language: node_js
sudo: false
node_js:
- "4"
- "5"
- "stable"
29 changes: 18 additions & 11 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,35 @@
### HEAD

* Update naming of variables according to the conventions.

### 4.0.0 (January 25, 2018)

* Rename `Grid-fit` to `Grid-fill` and repurpose to match sizing utility behavior [#51](https://github.com/suitcss/components-grid/issues/51).
* Remove `Grid-cell` in favour of implicit Grid child [#54](https://github.com/suitcss/components-grid/pull/54)

### 3.0.3 (May 05, 2016)

* Fix issue with overflowing elements [#44](https://github.com/suitcss/components-grid/pull/44)
* Fix issue with offsets and no explicit cell width [#43](https://github.com/suitcss/components-grid/pull/43)
* Fix issue with overflowing elements [#44](https://github.com/suitcss/components-grid/pull/44).
* Fix issue with offsets and no explicit cell width [#43](https://github.com/suitcss/components-grid/pull/43).

### 3.0.2 (February 15, 2016)

* Update `stylelint-config-suitcss` to `4.0.0`
* Update `preprocessor` to `1.0.0`
* Fix `maxlen` warning on comments
* Update `stylelint-config-suitcss` to `4.0.0`.
* Update `preprocessor` to `1.0.0`.
* Fix `maxlen` warning on comments.
* Remove unused `stylelint` package as this is included with the suitcss-preprocessor.

### 3.0.1 (December 02, 2015)

* Upgrade to `^0.8.0` suitcss-preprocessor
* Ensure [Grid conforms](https://github.com/suitcss/components-grid/commit/91a5a46daf4e7964a38ce72f29801fd8de48d451) to SUIT CSS stylelint rules
* Add license field to `package.json`
* Upgrade to `^0.8.0` suitcss-preprocessor.
* Ensure [Grid conforms](https://github.com/suitcss/components-grid/commit/91a5a46daf4e7964a38ce72f29801fd8de48d451) to SUIT CSS stylelint rules.
* Add license field to `package.json`.

### 3.0.0 (November 01, 2015)

* Switch to flexbox for layout
* Add `Grid--fit` and `Grid--equalHeight` modifiers
* Use PostCSS instead of suitcss-preprocessor
* Switch to flexbox for layout.
* Add `Grid--fit` and `Grid--equalHeight` modifiers.
* Use PostCSS instead of suitcss-preprocessor.

### 2.0.2 (October 28, 2014)

61 changes: 35 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ Read more about [SUIT CSS](https://github.com/suitcss/suit/).

* Fluid layout.
* Intelligent cell wrapping.
* Evenly fit cell spacing
* Evenly fill cell spacing
* Equal height columns
* Horizontal centering of cells.
* Custom vertical alignment of cells (top, bottom, or middle).
@@ -30,52 +30,55 @@ Read more about [SUIT CSS](https://github.com/suitcss/suit/).
## Available classes

* `Grid`: core component
* `Grid--alignCenter`: center-align all child `Grid-cell`
* `Grid--alignRight`: right-align all child `Grid-cell`
* `Grid--alignMiddle`: middle-align all child `Grid-cell`
* `Grid--alignBottom`: bottom-align all child `Grid-cell`
* `Grid--fit`: evenly distribute space amongst all child `Grid-cell`
* `Grid--equalHeight`: all child `Grid-cell` match height of the tallest
* `Grid--alignCenter`: center-align all child cells
* `Grid--alignRight`: right-align all child cells
* `Grid--alignMiddle`: middle-align all child cells
* `Grid--alignBottom`: bottom-align all child cells
* `Grid--fill`: evenly distribute space amongst all child cells
* `Grid--fit`: fit cells to their content
* `Grid--equalHeight`: all child cells match height of the tallest
* `Grid--withGutter`: adds a gutter between cells
* `Grid-cell`: a child cell of `Grid` that wraps grid content
* `Grid-cell--center`: center an individual `Grid-cell`

## Configurable variables

* `--Grid-gutter-size`: the width of the gutter applied by the `Grid--withGutter` modifier class.
* `--Grid-gutterSize`: the width of the gutter applied by the `Grid--withGutter` modifier class.

## Use

A simple grid is easy to create. A grid container can have any number of child
cells. When used with `Grid--fit` space is evenly distributed without need for
cells. When used with `Grid--fill` space is evenly distributed without need for
sizing utilities.

**Note** Elements that are direct descendants of `Grid` will be flex items. It's
recommended to use an element that can easily have classes attached later if
needed, such as `u-sizeFill` or `u-flexJustifyCenter`

```html
<div class="Grid Grid--fit Grid--withGutter">
<div class="Grid-cell"></div>
<div class="Grid-cell"></div>
<div class="Grid-cell"></div>
<div class="Grid-cell"></div>
<div class="Grid Grid--fill Grid--withGutter">
<div><!-- cell content --></div>
<div><!-- cell content --></div>
<div><!-- cell content --></div>
<div><!-- cell content --></div>
</div>
```

For more granular control over layout make use of modifiers and sizing utilities.

```html
<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fit|Grid--equalHeight]">
<div class="Grid-cell u-size1of2 u-lg-size6of12"></div>
<div class="Grid-cell u-size1of2 u-lg-size4of12"></div>
<div class="Grid-cell u-size1of3 u-lg-size2of12"></div>
<div class="Grid-cell u-size1of3"></div>
<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fill|Grid--fit|Grid--equalHeight]">
<div class="u-size1of2 u-lg-size6of12"></div>
<div class="u-size1of2 u-lg-size4of12"></div>
<div class="u-size1of3 u-lg-size2of12"></div>
<div class="u-size1of3"></div>
</div>
```

Fit cells to their content and allow others to fill the remaining space.

```html
<div class="Grid">
<div class="Grid-cell u-sizeFit">Fit to content</div>
<div class="Grid-cell u-sizeFill">Take up remaining space</div>
<div class="u-sizeFit">Fit to content</div>
<div class="u-sizeFill">Take up remaining space</div>
</div>
```

@@ -93,7 +96,7 @@ GOOD:

```html
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size1of2 u-before1of4 u-after1of4">
<div class="u-size1of2 u-before1of4 u-after1of4">
{{>partial}}
</div>
</div>
@@ -103,7 +106,7 @@ BAD:

```html
<div class="Grid Grid--withGutter u-before1of4 u-after1of4">
<div class="Grid-cell">
<div>
{{>partial}}
</div>
</div>
@@ -116,7 +119,7 @@ grid's width, and not the width of the whole application.
```html
<div class="u-before1of4 u-after1of4">
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size1of2"> <!-- 50% of the width of the Grid -->
<div class="u-size1of2"> <!-- 50% of the width of the Grid -->
{{>partial}}
</div>
</div>
@@ -137,6 +140,12 @@ To generate a build:
npm run build
```

To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)

```
npm run lint
```

To generate the testing build:

```
65 changes: 30 additions & 35 deletions lib/grid.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/** @define Grid */
/** @define Grid; weak */

:root {
--Grid-gutter-size: 20px;
--Grid-gutterSize: 20px;
}

/**
@@ -15,7 +15,7 @@
========================================================================== */

/**
* All content must be contained within child `Grid-cell` elements.
* All content must be contained within child elements.
*
* 1. Account for browser defaults of elements that might be the root node of
* the component.
@@ -29,6 +29,21 @@
padding: 0; /* 1 */
}

/**
* No explicit width by default. Rely on combining a cell with a dimension
* utility or a component class that extends 'Grid'.
*
* 1. Set flex items to full width by default
* 2. Fix issue where elements with overflow extend past the
* `.Grid > *` container - https://git.io/vw5oF
*/

.Grid > * {
box-sizing: inherit;
flex-basis: 100%; /* 1 */
min-width: 0; /* 2 */
}

/**
* Modifier: center align all grid cells
*/
@@ -71,54 +86,34 @@
* http://git.io/vllWx
*/

.Grid--fit > .Grid-cell {
.Grid--fill > * {
flex: 1 1 0%; /* 1 */
}

/**
* Modifier: all cells match height of tallest cell in a row
* Modifier: fit cells to their content
*/

.Grid--equalHeight > .Grid-cell {
display: flex;
.Grid--fit > * {
flex-basis: auto;
}

/**
* Modifier: gutters
* Modifier: all cells match height of tallest cell in a row
*/

.Grid--withGutter {
margin: 0 calc(-0.5 * var(--Grid-gutter-size));
}

.Grid--withGutter > .Grid-cell {
padding: 0 calc(0.5 * var(--Grid-gutter-size));
.Grid--equalHeight > * {
display: flex;
}

/* Grid cell
========================================================================== */

/**
* No explicit width by default. Rely on combining `Grid-cell` with a dimension
* utility or a component class that extends 'Grid'.
*
* 1. Set flex items to full width by default
* 2. Fix issue where elements with overflow extend past the
* `Grid-cell` container - https://git.io/vw5oF
* Modifier: gutters
*/

.Grid-cell {
box-sizing: inherit;
flex-basis: 100%; /* 1 */
min-width: 0; /* 2 */
.Grid--withGutter {
margin: 0 calc(-0.5 * var(--Grid-gutterSize));
}

/**
* Modifier: horizontally center one unit
* Set a specific unit to be horizontally centered. Doesn't affect
* any other units. Can still contain a child `Grid` object.
*/

.Grid-cell--center {
margin: 0 auto;
.Grid--withGutter > * {
padding: 0 calc(0.5 * var(--Grid-gutterSize));
}
Loading