SUIT CSS component for horizontal arrangement
npm install suitcss-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.
* npm: npm install suitcss-components-arrange
* Download: zip
* 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)
* --Arrange-gutter-size: the width of the gutter applied by the
Arrange--withGutter modifier class.
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 firstArrange-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
…
Or for an equally spaced row of buttons or icons, etc.
`html`
Install Node (comes with npm).
``
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`.
* Google Chrome (latest)
* Opera (latest)
* Firefox 4+
* Safari 5+
* Internet Explorer 8+