purecss-utils

1.0.0 • Public • Published

YUI Pure CSS Extensions

Extension Library for YUI Pure CSS (www.purecss.io) designed to work purposefully with the default grid.

Since PureCSS is no longer being maintained, please checkout Hydrogen which has esstentially the same feature coverage as Pure as is being actively maintained!

Responsive 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>

Package Sidebar

Install

npm i purecss-utils

Weekly Downloads

250

Version

1.0.0

License

MIT

Unpacked Size

195 kB

Total Files

12

Last publish

Collaborators

  • pimbrouwers