suitcss-components-arrange
v1.1.1
Published
SUIT CSS component for horizontal arrangement
Downloads
1,379
Readme
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
Available classes
Arrange
- The core component classArrange--middle
- The modifier class for middle-aligned cellsArrange--bottom
- The modifier class for bottom-aligned cellsArrange--equal
- The modifier class for equal-width cellsArrange--withGutter
- The modifier class for adding a gutter between cells.Arrange-sizeFit
- The child class for cells to snap to fit their contentArrange-sizeFill
- The child class for cells to expand to fill the remaining spaceArrange-row
- The child class for a new row of cells (Arrange-sizeFit
orArrange-sizeFill
)
Configurable variables
--Arrange-gutter-size
: the width of the gutter applied by theArrange--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+