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.
Read more about SUIT CSS's design principles.
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-gutter-size: the width of the gutter applied by the
N.B. This component affects the width of images in cells.
Arrange must only contain
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:
Nicolas Gallagher @necolas…
Or for an equally spaced row of buttons or icons, etc.
Install Node (comes with npm).
To generate a build:
npm run build
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
- Google Chrome (latest)
- Opera (latest)
- Firefox 4+
- Safari 5+
- Internet Explorer 8+