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
index.css
index.js
package.json 2.0.1 Nov 7, 2017

README.md

SUIT CSS utilities: size

Build Status

SUIT CSS sizing utilities. Sets width and flex-basis.

Read more about SUIT CSS's design principles.

Installation

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

Available classes

  • u-sizeFit - Make an element shrink wrap its content with flex-basis.
  • u-sizeFull - Make an element the width of its parent.
  • u-sizeFill - Make an element fill the remaining space. Distribute space evenly on multiple elements.
  • u-sizeFillAlt - An alternative method to make an element fill the remaining space. Distribute space based on element width.
  • u-sizeXofY (numerous) - Specify the proportional width of 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-sizeXofY - To use at the smallest Media Query breakpoint.
  • u-md-sizeXofY - To use at the medium Media Query breakpoint.
  • u-lg-sizeXofY - To use at the largest Media Query breakpoint.

Configuration

There are 3 Media Query breakpoints:

  • --sm-viewport
  • --md-viewport
  • --lg-viewport

When using postcss-custom-media, 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 generate the testing build.

npm run build-test

To lint code with postcss-bem-linter and stylelint

npm run lint

To watch the files for making changes to test:

npm run watch

Basic visual tests are in test/index.html.

Browser support

Refer to the caniuse page for flexbox. This package can still be used in older browsers if width is required

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox 28+
  • Safari 6.1+
  • Internet Explorer 10+