suitcss-utils-after

Trailing offset utilities for SUIT CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
suitcss-utils-after
801.0.18 years ago10 years agoMinified + gzip package size for suitcss-utils-after in KB

Readme

SUIT CSS utilities: after
Build Status
SUIT CSS trailing offset utilities.
Read more about SUIT CSS's design principles.

Installation

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

Available classes

  • u-afterXofY (numerous) - Specify the proportional offset before an object.

X must be an integer less than Y.
Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.

Plugins

Utilities that can be limited to specific Media Query breakpoints.
  • u-sm-afterXofY - To use at the smallest Media Query breakpoint.
  • u-md-afterXofY - To use at the medium Media Query breakpoint.
  • u-lg-afterXofY - To use at the large Media Query breakpoint.

Configuration

There are 3 Media Query breakpoints:
  • --sm-viewport
  • --md-viewport
  • --lg-viewport

When using the SUIT CSS preprocessor, breakpoints can be configured using @custom-media. For example:
@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

Usage

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 4+
  • Safari 5+
  • Internet Explorer 8+