SUIT CSS utilities: size


SUIT CSS sizing utilities. Sets width and flex-basis.

Read more about SUIT CSS's design principles.

Installation

* npm: npm install suitcss-utils-size
* Download: zip

Available classes

* u-sizeFit - Make an element shrink wrap its content with flex-basis.
* u-sizeFull - Make an element the width of its parent.
* u-sizeFill - Make an element fill the remaining space. Distribute space evenly on multiple elements.
* u-sizeFillAlt - An alternative method to make an element fill the remaining space. Distribute space based on element width.
* u-sizeXofY (numerous) - Specify the proportional width of an object.

X must be an integer less than Y.

Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.

$3

Utilities that can be limited to specific Media Query breakpoints.

* u-sm-sizeXofY - To use at the smallest Media Query breakpoint.
* u-md-sizeXofY - To use at the medium Media Query breakpoint.
* u-lg-sizeXofY - To use at the largest Media Query breakpoint.

$3

There are 3 Media Query breakpoints:

* --sm-viewport
* --md-viewport
* --lg-viewport

When using postcss-custom-media,
breakpoints can be configured using @custom-media. For example:

``css
@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);
`

Usage

Please refer to the README for SUIT CSS utils

Testing

Install Node (comes with npm).

`
npm install
`

To generate a build:

`
npm run build
`

To generate the testing build.

`
npm run build-test
`

To lint code with postcss-bem-linter and stylelint

`
npm run lint
`

To watch the files for making changes to test:

`
npm run watch
`

Basic visual tests are in test/index.html.

Browser support

Refer to the caniuse page for flexbox.
This package can still be used in older browsers if width` is required

* Google Chrome (latest)
* Opera (latest)
* Firefox 28+
* Safari 6.1+
* Internet Explorer 10+