suitcss-utils-position

Positioning utilities for SUIT CSS

Usage no npm install needed!

<script type="module">
  import suitcssUtilsPosition from 'https://cdn.skypack.dev/suitcss-utils-position';
</script>

README

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