Utilities
u-Utility : “A very specific role [that is] not tied to any specific piece of UI.”
Align Items
Sass
// Basic
@include u-align-items('center');
// Responsive
@include u-align-items('center', 'md');Markup
Basic
<div class="u-display-flex / u-align-items-center">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
<img src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Responsive
<div class="u-display-flex / u-align-items-center@md">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
<img src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Align Self
Sass
// Basic
@include u-align-self('flex-start');
@include u-align-self('flex-end');
// Responsive
@include u-align-self('flex-start', 'md');
@include u-align-self('flex-end', 'md');Markup
Basic
<div class="u-display-flex / u-align-items-center">
<img class="u-align-self-flex-start" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
<img class="u-align-self-flex-end" src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Responsive
<div class="u-display-flex / u-align-items-center">
<img class="u-align-self-flex-start@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
<img class="u-align-self-flex-end@md" src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Animation
Sass
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
// Basic
@include u-animation('fade-in-400ms', 400ms fade-in linear forwards) {
opacity: 1;
}
// Responsive
@include u-animation('fade-in-400ms', 400ms fade-in linear forwards, 'md') {
opacity: 1;
}Markup
Basic
<img class="u-animation-fade-in-400ms" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Responsive
<img class="u-animation-fade-in-400ms@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Aspect Ratio
Sass
// Basic
@include u-aspect-ratio(3, 1);
@include u-aspect-ratio(16, 9);
// Responsive
@include u-aspect-ratio(3, 1, 'md');
@include u-aspect-ratio(16, 9, 'md');Markup
Basic
<div class="u-background-color-gray-1">
<div class="u-aspect-ratio-16x9"></div>
</div>Responsive
<div class="u-background-color-gray-1">
<div class="u-aspect-ratio-3x1 u-aspect-ratio-16x9@md"></div>
</div>Background Color
Sass
// Basic
@include u-background-color('gray-1', $color-gray-1);
// Responsive
@include u-background-color('gray-1', $color-gray-1, 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-background-color-gray-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-background-color-gray-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>Background Position
Sass
// Basic
@include u-background-position('top-right', top right);
// Responsive
@include u-background-position('top-right', top right, 'md');Markup
Basic
<div class="u-background-position-top-right" style="background-image: url('http://placehold.it/100/ff0000/ffffff?text=1'); background-size: 100px; background-repeat: no-repeat;">
<div class="u-aspect-ratio-3x1"></div>
</div>Responsive
<div class="u-background-position-top-right@md" style="background-image: url('http://placehold.it/100/ff0000/ffffff?text=1'); background-size: 100px; background-repeat: no-repeat;">
<div class="u-aspect-ratio-3x1"></div>
</div>Border
Directions: null, vertical, horizontal, top, right, bottom, left.
Sass
// Basic
@include u-border('top-gray-3', 1px solid $color-gray-3);
// Responsive
@include u-border('top-gray-3', 1px solid $color-gray-3, 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="u-border-top-gray-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="u-border-top-gray-3@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>Box Shadow
Sass
// Basic
@include u-box-shadow('down-black-1', 0 2px 5px rgba($color-black-1, 0.1));
// Responsive
@include u-box-shadow('down-black-1', 0 2px 5px rgba($color-black-1, 0.1), 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="u-box-shadow-down-black-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="u-box-shadow-down-black-1@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>Color
Sass
// Basic
@include u-color('red-1', $color-red-1);
// Responsive
@include u-color('red-1', $color-red-1, 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-color-red-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-color-red-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>Content
Sass
// Basic
@include u-content-before('arrow-left', '« ');
@include u-content-after('arrow-right', ' »');
// Responsive
@include u-content-before('arrow-left', '« ', 'md');
@include u-content-after('arrow-right', ' »', 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="u-content-before-arrow-left u-content-after-arrow-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="u-content-before-arrow-left@md u-content-after-arrow-right@md">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>Depth (z-index)
TODO: How should we handle negative values? For example, should we use parens: .u-depth\(-1\) { z-index: -1; }.
Sass
// Basic
@include u-depth(1);
@include u-depth(2);
@include u-depth(3);
// Responsive
@include u-depth(1, 'md');
@include u-depth(2, 'md');
@include u-depth(3, 'md');Markup
Basic
<div class="u-position-relative">
<div class="u-aspect-ratio-3x1"></div>
<img class="u-depth-2" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1" style="position: absolute; top: 20px; left: 20px;">
<img class="u-depth-3" src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2" style="position: absolute; top: 40px; left: 40px;">
<img class="u-depth-1" src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3" style="position: absolute; top: 60px; left: 60px;">
</div>Responsive
<div class="u-position-relative">
<div class="u-aspect-ratio-3x1"></div>
<img class="u-depth-2@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1" style="position: absolute; top: 20px; left: 20px;">
<img class="u-depth-3@md" src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2" style="position: absolute; top: 40px; left: 40px;">
<img class="u-depth-1@md" src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3" style="position: absolute; top: 60px; left: 60px;">
</div>Display
Sass
// Basic
@include u-display('block');
@include u-visually-hidden();
// Responsive
@include u-display('block', 'md');
@include u-visually-hidden('md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="u-display-block / u-background-color-gray-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="u-display-block@md / u-background-color-gray-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>Flex
Sass
// Basic
@include u-flex('0', 0);
@include u-flex('1', 1);
// Responsive
@include u-flex('0', 0, 'md');
@include u-flex('1', 1, 'md');Markup
Basic
<div class="u-display-flex">
<img class="u-flex-0" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img class="u-flex-1" src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
</div>Responsive
<div class="u-display-flex">
<img class="u-flex-0@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img class="u-flex-1@md" src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
</div>Flex Direction
Sass
// Basic
@include u-flex-direction('row-reverse');
// Responsive
@include u-flex-direction('row-reverse', 'md');Markup
Basic
<div class="u-display-flex / u-flex-direction-row-reverse">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
<img src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Responsive
<div class="u-display-flex / u-flex-direction-row-reverse@md">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
<img src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Flex Wrap
Sass
// Basic
@include u-flex-wrap('wrap');
// Responsive
@include u-flex-wrap('wrap', 'md');Markup
Basic
<div class="u-display-flex / u-flex-wrap-wrap">
<img src="http://placehold.it/300x100/ff0000/ffffff?text=1" width="300" height="100" alt="Item 1">
<img src="http://placehold.it/300x100/00ff00/ffffff?text=2" width="300" height="100" alt="Item 2">
<img src="http://placehold.it/300x100/0000ff/ffffff?text=3" width="300" height="100" alt="Item 3">
</div>Responsive
<div class="u-display-flex / u-flex-wrap-wrap@md">
<img src="http://placehold.it/300x100/ff0000/ffffff?text=1" width="300" height="100" alt="Item 1">
<img src="http://placehold.it/300x100/00ff00/ffffff?text=2" width="300" height="100" alt="Item 2">
<img src="http://placehold.it/300x100/0000ff/ffffff?text=3" width="300" height="100" alt="Item 3">
</div>Float
Sass
// Basic
@include u-float('right');
@include u-float('left');
@include u-clearfix('right');
// Responsive
@include u-float('right', 'md');
@include u-float('left', 'md');
@include u-clearfix('md');Markup
Basic
<p class="u-clearfix">
<img class="u-float-right" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
</p>Responsive
<p class="u-clearfix">
<img class="u-float-right@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
</p>Font Family
Sass
// Basic
@include u-font-family('display', $font-family--display);
// Responsive
@include u-font-family('display', $font-family--display, 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-font-family-display">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-font-family-display@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Font Size
Sass
// Basic
@include u-font-size('100%', 100%);
@include u-font-size('heading', 1.5rem);
// Responsive
@include u-font-size('100%', 100%, 'md');
@include u-font-size('heading', 1.5rem, 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<h4 class="u-font-size-100%">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<p class="u-font-size-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<h4 class="u-font-size-100%@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<p class="u-font-size-heading@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Font Style
Sass
// Basic
@include u-font-style('italic');
// Responsive
@include u-font-style('italic', 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-font-style-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-font-style-italic@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Font Weight
Sass
// Basic
@include u-font-weight('400', 400);
@include u-font-weight('bold', bold);
// Responsive
@include u-font-weight('400', 400, 'md');
@include u-font-weight('bold', bold, 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<h4 class="u-font-weight-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<p class="u-font-weight-bold@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<h4 class="u-font-weight-400@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<p class="u-font-weight-bold@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Height
Sass
// Basic
@include u-height('50vh', 50vh);
// Responsive
@include u-height('50vh', 50vh, 'md');Markup
Basic
<img class="u-height-50vh" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">Responsive
<img class="u-height-50vh@md" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">Hover
TODO: How can we include default properties like transition?
Sass
// Basic
@include u-hover('dim', 'is-active') {
opacity: 0.6;
}
// Responsive
@include u-hover('dim', 'is-active', 'md') {
opacity: 0.6;
}Markup
Basic
<img class="u-hover-dim" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Responsive
<img class="u-hover-dim@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Justify Content
Sass
// Basic
@include u-justify-content('center');
// Responsive
@include u-justify-content('center', 'md');Markup
Basic
<div class="u-display-flex / u-justify-content-center">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
<img src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Responsive
<div class="u-display-flex / u-justify-content-center@md">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
<img src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Line Height
Sass
// Basic
@include u-line-height('0.8', 0.8);
// Responsive
@include u-line-height('0.8', 0.8, 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita reprehenderit aspernatur, non ratione excepturi et quia recusandae repellendus natus, libero facilis doloremque sint inventore voluptatem, voluptatibus odio sapiente iste officiis.
<p class="u-line-height-0.8">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita reprehenderit aspernatur, non ratione excepturi et quia recusandae repellendus natus, libero facilis doloremque sint inventore voluptatem, voluptatibus odio sapiente iste officiis.</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita reprehenderit aspernatur, non ratione excepturi et quia recusandae repellendus natus, libero facilis doloremque sint inventore voluptatem, voluptatibus odio sapiente iste officiis.
<p class="u-line-height-0.8@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita reprehenderit aspernatur, non ratione excepturi et quia recusandae repellendus natus, libero facilis doloremque sint inventore voluptatem, voluptatibus odio sapiente iste officiis.</p>Margin
Directions: null, vertical, horizontal, top, right, bottom, left.
Sass
// Basic
@include u-margin('horizontal-auto', auto);
// Responsive
@include u-margin('horizontal-auto', auto, 'md');Markup
Basic
<img class="u-margin-horizontal-auto" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Responsive
<img class="u-margin-horizontal-auto@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Max Height
Sass
// Basic
@include u-max-height('100', rem(100));
// Responsive
@include u-max-height('100', rem(100), 'md');Markup
Basic
<img class="u-max-height-100" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">Responsive
<img class="u-max-height-100@md" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">Max Width
Sass
// Basic
@include u-max-width('100', rem(100));
// Responsive
@include u-max-width('100', rem(100), 'md');Markup
Basic
<img class="u-max-width-100" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">Responsive
<img class="u-max-width-100@md" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">Min Height
Sass
// Basic
@include u-min-height('200', rem(200));
// Responsive
@include u-min-height('200', rem(200), 'md');Markup
Basic
<img class="u-min-height-200" src="http://placehold.it/100/ff0000/ffffff?text=1" height="100" height="100" alt="Item 1">Responsive
<img class="u-min-height-200@md" src="http://placehold.it/100/ff0000/ffffff?text=1" height="100" height="100" alt="Item 1">Min Width
Sass
// Basic
@include u-min-width('200', rem(200));
// Responsive
@include u-min-width('200', rem(200), 'md');Markup
Basic
<img class="u-min-width-200" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Responsive
<img class="u-min-width-200@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Object Fit
Important: Requires polyfill for IE and Edge: Can I use… Use either lazySizes object fit extension or object-fit-images
Values: fill, contain, cover, none, scale-down.
Sass
// Basic
@include u-object-fit('cover', cover);
@include u-object-fit('cover-100%', cover) {
width: 100%;
height: 100%;
}
// Responsive
@include u-object-fit('cover', cover, 'md');
@include u-object-fit('cover-100%', cover, 'md') {
width: 100%;
height: 100%;
}Markup
Basic
<img class="u-width-1/1 / u-height-200 / u-object-fit-cover" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">
<figure class="u-height-200">
<img class="u-object-fit-cover-100%" src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
</figure>Responsive
<img class="u-width-1/1 / u-height-200 / u-object-fit-cover@md" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">
<figure class="u-height-200">
<img class="u-object-fit-cover-100%@md" src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
</figure>Opacity
Sass
// Basic
@include u-opacity('60', 0.6);
// Responsive
@include u-opacity('60', 0.6, 'md');Markup
Basic
<img class="u-opacity-60" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Responsive
<img class="u-opacity-60@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Order
TODO: How should we handle negative values? For example, should we use parens: .u-order\(-1\) { z-index: -1; }.
Sass
// Basic
@include u-order(1);
@include u-order(2);
@include u-order(3);
// Responsive
@include u-order(1, 'md');
@include u-order(2, 'md');
@include u-order(3, 'md');Markup
Basic
<div class="u-display-flex">
<img class="u-order-2" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img class="u-order-3" src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
<img class="u-order-1" src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Responsive
<div class="u-display-flex">
<img class="u-order-2@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
<img class="u-order-3@md" src="http://placehold.it/100/00ff00/ffffff?text=2" width="100" height="100" alt="Item 2">
<img class="u-order-1@md" src="http://placehold.it/100/0000ff/ffffff?text=3" width="100" height="100" alt="Item 3">
</div>Overflow
Sass
// Basic
@include u-overflow('hidden');
// Responsive
@include u-overflow('hidden', 'md');Markup
Basic
<div class="u-width-100 / u-overflow-hidden">
<img src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">
</div>Responsive
<div class="u-width-100 / u-overflow-hidden@md">
<img src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">
</div>Padding
Directions: null, vertical, horizontal, top, right, bottom, left.
Sass
// Basic
@include u-padding('horizontal-sm', $gutter-sm);
// Responsive
@include u-padding('horizontal-sm', $gutter-sm, 'md');Markup
Basic
<div class="u-padding-horizontal-sm">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
</div>Responsive
<div class="u-padding-horizontal-sm@md">
<img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
</div>Pointer Events
Sass
// Basic
@include u-pointer-events('none');
// Responsive
@include u-pointer-events('none', 'md');Markup
Basic
<p class="u-pointer-events-none">
<a href="javascript:alert('Hello!');">Click me</a>
</p>Responsive
<p class="u-pointer-events-none@md">
<a href="javascript:alert('Hello!');">Click me</a>
</p>Position
Sass
// Basic
@include u-position('relative', relative);
@include u-position('center', absolute) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// Responsive
@include u-position('relative', relative, 'md');
@include u-position('center', absolute, 'md') {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Markup
Basic
<div class="u-position-relative / u-height-200">
<img class="u-position-center" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
</div>Responsive
<div class="u-position-relative / u-height-200">
<img class="u-position-center@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
</div>Text Align
Sass
// Basic
@include u-text-align('center');
// Responsive
@include u-text-align('center', 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-text-align-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-text-align-center@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Text Overflow
Sass
// Basic
@include u-text-overflow('ellipsis');
// Responsive
@include u-text-overflow('ellipsis', 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-width-100 / u-overflow-hidden / u-white-space-nowrap / u-text-overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="u-width-100 / u-overflow-hidden / u-white-space-nowrap / u-text-overflow-ellipsis@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Text Transform
Sass
// Basic
@include u-text-transform('uppercase');
// Responsive
@include u-text-transform('uppercase', 'md');Markup
Basic
Lorem ipsum dolor
<p class="u-text-transform-uppercase">Lorem ipsum dolor</p>Responsive
Lorem ipsum dolor
<p class="u-text-transform-uppercase@md">Lorem ipsum dolor</p>Transform
Sass
// Basic
@include u-transform('rotate-90', rotate(90deg));
// Responsive
@include u-transform('rotate-90', rotate(90deg), 'md');Markup
Basic
<img class="u-transform-rotate-90" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">Responsive
<img class="u-transform-rotate-90@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">User Select
Sass
// Basic
@include u-user-select('none');
// Responsive
@include u-user-select('none', 'md');Markup
Basic
Select me
<p class="u-user-select-none">Select me</p>Responsive
Select me
<p class="u-user-select-none@md">Select me</p>Vertical Align
Sass
// Basic
@include u-vertical-align('middle');
// Responsive
@include u-vertical-align('middle', 'md');Markup
Basic
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<p>
Lorem ipsum dolor sit amet <img class="u-display-inline-block / u-vertical-align-middle" src="http://placehold.it/100/ff0000/ffffff?text=1" width="50" height="50" alt="Item 1"> consectetur adipisicing elit.
</p>Responsive
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<p>
Lorem ipsum dolor sit amet <img class="u-display-inline-block / u-vertical-align-middle@md" src="http://placehold.it/100/ff0000/ffffff?text=1" width="50" height="50" alt="Item 1"> consectetur adipisicing elit.
</p>White Space
Sass
// Basic
@include u-white-space('nowrap');
// Responsive
@include u-white-space('nowrap', 'md');Markup
Basic
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit, molestias hic. Numquam rerum eum, quae! Quod voluptate tempore aut, molestias! Aut atque, quis animi ab fugiat. Eveniet, nam ducimus.
<p class="u-white-space-nowrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit, molestias hic. Numquam rerum eum, quae! Quod voluptate tempore aut, molestias! Aut atque, quis animi ab fugiat. Eveniet, nam ducimus.
</p>Responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit, molestias hic. Numquam rerum eum, quae! Quod voluptate tempore aut, molestias! Aut atque, quis animi ab fugiat. Eveniet, nam ducimus.
<p class="u-white-space-nowrap@md">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit, molestias hic. Numquam rerum eum, quae! Quod voluptate tempore aut, molestias! Aut atque, quis animi ab fugiat. Eveniet, nam ducimus.
</p>Width
Sass
// Basic
@include u-width('1/1', percentage(1 / 1));
@include u-width('1/2', percentage(1 / 2));
// Responsive
@include u-width('1/1', percentage(1 / 1), 'md');
@include u-width('1/2', percentage(1 / 2), 'md');Markup
Basic
<div class="u-display-flex / u-flex-wrap-wrap">
<img class="u-width-1/2" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">
<img class="u-width-1/2" src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
</div>Responsive
<div class="u-display-flex / u-flex-wrap-wrap">
<img class="u-width-1/1 u-width-1/2@md" src="http://placehold.it/200/ff0000/ffffff?text=1" width="200" height="200" alt="Item 1">
<img class="u-width-1/1 u-width-1/2@md" src="http://placehold.it/200/00ff00/ffffff?text=2" width="200" height="200" alt="Item 2">
</div>