Component CSS for arranging/aligning horizontal cells, a bit like flexbox
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.stylelintrc
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
browserslist
index.css
index.js
package.json
yarn.lock

README.md

SUIT CSS components-arrange

Build Status

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-gutterSize: 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:

<div class="Arrange Arrange--middle Arrange--withGutter">
  <div class="Arrange-sizeFit">
    <img src="img.png" alt="">
  </div>
  <div class="Arrange-sizeFill">
    Nicolas Gallagher @necolas
    …
  </div>
</div>

Or for an equally spaced row of buttons or icons, etc.

<ul class="Arrange Arrange--equal">
  <li class="Arrange-sizeFill">
    <button class="Button u-sizeFull">Reply</button>
  </li>
  <li class="Arrange-sizeFill">
    <button class="Button u-sizeFull">Like</button>
  </li>
  <li class="Arrange-sizeFill">
    <button class="Button u-sizeFull">Save</button>
  </li>
  <li class="Arrange-sizeFill">
    <button class="Button u-sizeFull">Remove</button>
  </li>
</ul>

Testing

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.

Browser support

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