CSS positioning utilities
HTML CSS JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.stylelintrc
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
browserslist
index.css
index.js
package.json

README.md

SUIT CSS utilities: position

Build Status

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