Incorporate CSS column guide

mhulse commented 7 years ago

https://gist.github.com/javasteve99/3013151

Make it mesh well with Pure css?

https://purecss.io/grids/#grids-units-sizes

[grid] {
    width: 128rem;
    margin: 0 auto;
    background-size: 33rem;
    background-image: linear-gradient(
        to right, 
        rgba(255, 0, 0, 0.25) 0, 
        rgba(255, 0, 0, 0.25) 29rem, 
        transparent 29rem
    );
    background-attachment: local;
    background-origin: content-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    pointer-events: none;
}
@media (min-width: 35.5em) {

}
@media (min-width: 48em) {

}
@media (min-width: 64em) {

}
@media (min-width: 80em) {

}
@media (min-width: 120em) {

}

<div grid="4"></div>

mhulse commented 7 years ago

Just found this:

https://github.com/larsenwork/CSS-Responsive-Grid-Overlay

Tryy to ignore the CSS Tricks paid advert article promoting his chrome plugin! :)

CSS Tricks please!

djburkhart commented 6 years ago

Hey, just ran across this project the other day. My project (H5C3.gs) is an example of how you could implement your grid column guides using modern css.

mhulse / ps-web-starters

Incorporate CSS column guide #4