https://github.com/suitcss/components-arrange
Component CSS for arranging/aligning horizontal cells, a bit like flexbox
https://github.com/suitcss/components-arrange
Last synced: 3 months ago
JSON representation
Component CSS for arranging/aligning horizontal cells, a bit like flexbox
- Host: GitHub
- URL: https://github.com/suitcss/components-arrange
- Owner: suitcss
- License: mit
- Created: 2013-05-26T06:47:18.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2018-03-29T15:28:17.000Z (about 8 years ago)
- Last Synced: 2026-04-01T06:59:37.329Z (3 months ago)
- Language: HTML
- Homepage: http://suitcss.github.io/components-arrange/test/
- Size: 85.9 KB
- Stars: 72
- Watchers: 13
- Forks: 14
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SUIT CSS components-arrange
[](https://travis-ci.org/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](http://www.w3.org/TR/css-flexbox/)
and you may instead find more use from [utils-flex](https://github.com/suitcss/utils-flex).
Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
## Installation
* [npm](http://npmjs.org/): `npm install suitcss-components-arrange`
* Download: [zip](https://github.com/suitcss/components-arrange/releases/latest)
## 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:
```html
Nicolas Gallagher @necolas
…
```
Or for an equally spaced row of buttons or icons, etc.
```html
-
Reply
-
Like
-
Save
-
Remove
```
## Testing
Install [Node](http://nodejs.org) (comes with npm).
```
npm install
```
To generate a build:
```
npm run build
```
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
```
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+