SUIT CSS utilities: position

SUIT CSS utility classes for positioning.

Read more about SUIT CSS's design principles.

Installation

• npm: npm install suitcss-utils-position
• Download: zip

Available classes

• u-posAbsolute - Absolutely position an element.
• u-posAbsoluteCenter - Absolutely position and centre an element.
• u-posFit - Fit an element to the dimensions of its parent
• u-posFullScreen - Fixes an element over the viewport
• u-posFixed - Fixed position an element.
• u-posFixedCenter - Fix an element in the centre of the viewport
• u-posRelative - Relatively position an element.
• u-posStatic - Static position an element.

Usage

Creating a dialog overlay

<div role="dialog" class="Dialog u-posFixedCenter">
  <img src="{src}" alt="" />
</div>
<div class="Cover u-posFullScreen"></div>

Demo

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 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 (latest)
• Safari 5+
• Internet Explorer 9+
• Android 2.3+
• iOS 5.1+
• Windows Phone 8.1

HEAD

1.0.1 (February 22, 2016)

• Enable BEM linting

1.0.0 (February 21, 2016)

• Changed u-posAbsoluteCenter to use transform to centre and no longer requires a width and height.
• Added u-posFit to fit an element to the size of its parent
• Added u-posFullScreen to fit an element over the viewport
• Added u-posFixedCenter to centre an element in a fixed position
• Update preprocessor to 1.0.1
• Fix stylelint conformance

0.2.2 (October 28, 2014)

• Add support for JS bundling.

0.2.1. (June 24, 2014)

• Add .css extension to imports for interoperability.

0.2.0 (June 21, 2014)

• npm-based workflow.
• Add new preprocessor build tools.

0.1.0 (March 25, 2014)

• Initial release.