Awesome
SUIT CSS utilities: position
SUIT CSS utility classes for positioning.
Read more about SUIT CSS's design principles.
Installation
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 parentu-posFullScreen
- Fixes an element over the viewportu-posFixed
- Fixed position an element.u-posFixedCenter
- Fix an element in the centre of the viewportu-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>
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