Spacing utilities for SUIT CSS
- Download: zip
inset
u-spaceInsetQuarterEx
-u-spaceInsetHalfEx
-u-spaceInsetThreeQuarterEx
-u-spaceInsetOneEx
-u-spaceInsetOneAndAHalfEx
-u-spaceInsetTwoEx
-u-spaceInsetThreeEx
-u-spaceInsetFourEx
-u-spaceInsetEightEx
-
inset squish
u-spaceInsetSquishExtraSmall
-u-spaceInsetSquishSmall
-u-spaceInsetSquishMedium
-u-spaceInsetSquishLarge
-u-spaceInsetSquishExtraLarge
-
inset stretch
u-spaceInsetStretchExtraSmall
-u-spaceInsetStretchSmall
-u-spaceInsetStretchMedium
-u-spaceInsetStretchLarge
-u-spaceInsetStretchExtraLarge
-
inline left
u-spaceInlineLeftHalfEx
-u-spaceInlineLeftThreeQuarterEx
-u-spaceInlineLeftOneEx
-u-spaceInlineLeftOneAndAHalfEx
-u-spaceInlineLeftTwoEx
-
inline right
u-spaceInlineRightHalfEx
-u-spaceInlineRightThreeQuarterEx
-u-spaceInlineRightOneEx
-u-spaceInlineRightOneAndAHalfEx
-u-spaceInlineRightTwoEx
-
stack
u-spaceStackQuarterEx
-u-spaceStackHalfEx
-u-spaceStackThreeQuarterEx
-u-spaceStackOneEx
-u-spaceStackOneAndAHalfEx
-u-spaceStackTwoEx
-u-spaceStackThreeEx
-u-spaceStackFourEx
-u-spaceStackEightEx
-
All space utilities can be limited to specific Media Query breakpoints.
u-sm-spaceInsetX
- To use at the smallest Media Query breakpoint.u-md-spaceInsetX
- To use at the medium Media Query breakpoint.u-lg-spaceInsetX
- To use at the largest Media Query breakpoint.
<div class="u-spaceInsetHalfEx u-md-spaceInsetOneEx u-lg-spaceInsetTwoEx">
<!-- content -->
</div>
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);
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
.
- Google Chrome (latest)
- Opera (latest)
- Firefox 28+
- Safari 6.1+
- Internet Explorer 10+