postcss-utilities
Version:
PostCSS plugin to add a collection of mixins, shortcuts, helpers and tools for your CSS
108 lines (92 loc) • 1.94 kB
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
max-width: 990px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
/* Truncate
========================================================================== */
.truncate {
float: left;
@util truncate;
width: 500px;
}
.multiline {
width: 500px;
@util truncate(3, 1.5);
font-size: 1.2em;
}
/* Hide Visually
========================================================================== */
a {
float: left;
@util hide-visually;
color: #fff;
}
/* Clear Fix
========================================================================== */
.cfx {
@util clearfix;
}
.cfx {
color: #000;
@util clearfix;
}
/* Horizontal Rule
========================================================================== */
hr {
float: left;
@util hr;
color: #fff;
}
.custom-hr {
@util hr(red, 1em);
}
/* Circle
========================================================================== */
.circle {
float: left;
@util circle(200px, red);
color: #fff;
}
/* Reset List
========================================================================== */
ul {
float: left;
@util reset-list;
color: #000;
}
/* Aspect Ratio
========================================================================== */
.box-16-9 {
background-color: #ccc;
@util aspect-ratio(16:9);
margin-bottom: 20px;
}
.box-4-3 {
background-color: #ccc;
@util aspect-ratio(4:3);
margin-bottom: 20px;
}
.aspect-default {
@util aspect-ratio;
}
/* Center Block
========================================================================== */
.center-block {
float: left;
@util center-block;
top: 0;
}
/* Center
========================================================================== */
.center {
float: left;
@util center;
color: #fff;
}