pimbrouwers/purecss-utils

Extesnion Library for YUI Pure CSS (www.purecss.io)

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

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>

purecss-utils's Issues

NPM package

Hello guys,

Could you make a npm package to be able to import it correctly ?

Thanks a lot !

How to use it?

I think this is what we really need. But the question is simple. How to use it? Any step by step to integrated with PURECSS.io?

Regards

Jauhari

Reset Option

Hi, thank's for this library, maybe you can add reset option for different Media Queries.

@media screen and (min-width:35em){ 
    .pure-push-reset-sm { left: 0; }
    .pure-pull-reset-sm { right: 0; }
}
@media screen and (min-width:48em){ 
    .pure-push-reset-md { left: 0; }
    .pure-pull-reset-md { right: 0; }
}
@media screen and (min-width:64em){ 
    .pure-push-reset-lg { left: 0; }
    .pure-pull-reset-lg { right: 0; }
}
@media screen and (min-width:80em){ 
    .pure-push-reset-xl { left: 0; }
    .pure-pull-reset-xl { right: 0; }
}

Flex properties overwriting Flex basis

I think flex 0 0 auto in div[class*="oss-u-flex"] overwriting each oss-u-flex flex basis.
So I can't get the width.
I think you need either remove this or give each an !important ?

Source files ?

This is something i'd like to use, but as we use different grids (across many websites) we can not use this without the source (i suppose you generated this using something like https://github.com/yahoo/grunt-pure-grids or SCAA/LESS).

Can you add the source file(s) to this repo ? Or is there another repo with the sources ?