suitcss-utils-position

    1.0.1 • Public • Published

    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

    Install

    npm i suitcss-utils-position

    DownloadsWeekly Downloads

    814

    Version

    1.0.1

    License

    none

    Last publish

    Collaborators

    • giuseppegurgone
    • necolas
    • simonsmith
    • timkelty