SUIT CSS components-arrange


A SUIT CSS component for horizontally and vertically arranging a single row of
cells. Includes modifier classes for equal-width cells and gutter-separated
cells. Makes use of CSS table layout.

Note: This component has been superseded by flexbox
and you may instead find more use from utils-flex.

Read more about SUIT CSS's design principles.

Installation

* npm: npm install suitcss-components-arrange
* Download: zip

Available classes

* Arrange - The core component class
* Arrange--middle - The modifier class for middle-aligned cells
* Arrange--bottom - The modifier class for bottom-aligned cells
* Arrange--equal - The modifier class for equal-width cells
* Arrange--withGutter - The modifier class for adding a gutter between cells.
* Arrange-sizeFit - The child class for cells to snap to fit their content
* Arrange-sizeFill - The child class for cells to expand to fill the remaining space
* Arrange-row - The child class for a new row of cells (Arrange-sizeFit or Arrange-sizeFill)

Configurable variables

* --Arrange-gutter-size: the width of the gutter applied by the
Arrange--withGutter modifier class.

Usage

N.B. This component affects the width of images in cells.

Arrange must only contain Arrange-sizeFit, Arrange-sizeFill, and Arrange-row child nodes.

It's recommended that you only use one Arrange-sizeFill per component
instance (unless using the Arrange--equal modifier; see below). The first
Arrange-sizeFill in the component's source order will not share the extra
space with any subsequent nodes of that class.

Arrange relies on a core component class that is extended by additional
modifier classes. This component works best for small-scale UI layout, for
example, image-content pairs:

``html


Nicolas Gallagher @necolas
…

`html


• 
  Reply
  


• 
  Like
  


• 
  Save
  


• 
  Remove
  

`
npm install
`

To generate a build:

`
npm run build
`

To lint code with postcss-bem-linter and stylelint

`
npm run lint
`

To generate the testing build.

`
npm run build-test
`

To watch the files for making changes to test:

`
npm run watch
`

Basic visual tests are in test/index.html`.

Browser support

* Google Chrome (latest)
* Opera (latest)
* Firefox 4+
* Safari 5+
* Internet Explorer 8+