YUI Pure CSS Extensions
Extension Library for YUI Pure CSS (www.purecss.io) designed to work purposefully with the default grid.
Getting Started
CDN
<link rel="stylesheet" href="https://unpkg.com/purecss-utils"/>NPM
npm install purecss-utilsResponsive Utilities
Allows for hiding/showing content based on media breakpoints
@media screen and (max-width:35.5em) {
.pure-hidden-xs {
display: none !important
}
}
@media screen and (min-width:35.5em) and (max-width:47.999em) {
.pure-hidden-sm {
display: none !important
}
}
@media screen and (min-width:48em) and (max-width:63.999em) {
.pure-hidden-md {
display: none !important
}
}
@media screen and (min-width:64em) and (max-width:79.999em) {
.pure-hidden-lg {
display: none !important
}
}
@media screen and (min-width:80em) {
.pure-hidden-xl {
display: none !important
}
}Push & Pull
Boostrap-esque pushing and pulling, to offset columns.
.pure-push-{breakpoint}-{1-24}-{1-24} { }<div class="pure-u-sm-1-4 pure-push-sm-3-4"></div>
<div class="pure-u-sm-3-4 pure-pull-sm-1-4"></div>Flexbox Grid
Flexbox powered grid.
<div class="pure-g-flex">
<div class="pure-u-flex-1-3 pure-u-flex-sm-2-3"></div>
<div class="pure-u-flex-2-3 pure-u-flex-sm-1-3"></div>
</div>