Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS to add offsets to Pure grids http://purecss.io/
/*
Offsets from https://raw.githubusercontent.com/tilomitra/pure/d7f85e37abec3fdab14a541305ad05783159655c/src/grids/css/grids-offsets.css
Media queries from Pure v0.5.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
@media screen and (min-width: 35.5em) {
.offset-sm-0 {
margin-left:0;
}
.offset-sm-1-2 {
margin-left: 50%;
*margin-left: 49.995%;
}
.offset-sm-1-3 {
margin-left: 33.33%;
*margin-left: 33.325%;
}
.offset-sm-2-3 {
margin-left: 66.67%;
*margin-left: 66.665%;
}
.offset-sm-1-4 {
margin-left: 25%;
*margin-left: 24.995%;
}
.offset-sm-3-4 {
margin-left: 75%;
*margin-left: 74.995%;
}
.offset-sm-1-5 {
margin-left: 20%;
*margin-left: 19.995%;
}
.offset-sm-2-5 {
margin-left: 40%;
*margin-left: 39.995%;
}
.offset-sm-3-5 {
margin-left: 60%;
*margin-left: 59.995%;
}
.offset-sm-4-5 {
margin-left: 80%;
*margin-left: 79.995%;
}
.offset-sm-1-6 {
margin-left: 16.66%;
*margin-left: 16.655%;
}
.offset-sm-5-6 {
margin-left: 83.33%;
*margin-left: 83.325%;
}
.offset-sm-1-8 {
margin-left: 12.5%;
*margin-left: 12.495%;
}
.offset-sm-3-8 {
margin-left: 37.5%;
*margin-left: 37.495%;
}
.offset-sm-5-8 {
margin-left: 62.5%;
*margin-left: 62.495%;
}
.offset-sm-7-8 {
margin-left: 87.5%;
*margin-left: 87.495%;
}
.offset-sm-1-12 {
margin-left: 8.33%;
*margin-left: 8.325%;
}
.offset-sm-5-12 {
margin-left: 41.67%;
*margin-left: 41.665%;
}
.offset-sm-7-12 {
margin-left: 58.33%;
*margin-left: 58.325%;
}
.offset-sm-11-12 {
margin-left: 91.67%;
*margin-left: 91.665%;
}
.offset-sm-1-24 {
margin-left: 4.17%;
*margin-left: 4.165%;
}
.offset-sm-5-24 {
margin-left: 20.83%;
*margin-left: 20.825%;
}
.offset-sm-7-24 {
margin-left: 29.17%;
*margin-left: 29.165%;
}
.offset-sm-11-24 {
margin-left: 45.83%;
*margin-left: 45.825%;
}
.offset-sm-13-24 {
margin-left: 54.17%;
*margin-left: 54.165%;
}
.offset-sm-17-24 {
margin-left: 70.83%;
*margin-left: 70.825%;
}
.offset-sm-19-24 {
margin-left: 79.17%;
*margin-left: 79.165%;
}
.offset-sm-23-24 {
margin-left: 95.83%;
*margin-left: 95.825%;
}
}
@media screen and (min-width: 48em) {
.offset-md-0 {
margin-left:0;
}
.offset-md-1-2 {
margin-left: 50%;
*margin-left: 49.995%;
}
.offset-md-1-3 {
margin-left: 33.33%;
*margin-left: 33.325%;
}
.offset-md-2-3 {
margin-left: 66.67%;
*margin-left: 66.665%;
}
.offset-md-1-4 {
margin-left: 25%;
*margin-left: 24.995%;
}
.offset-md-3-4 {
margin-left: 75%;
*margin-left: 74.995%;
}
.offset-md-1-5 {
margin-left: 20%;
*margin-left: 19.995%;
}
.offset-md-2-5 {
margin-left: 40%;
*margin-left: 39.995%;
}
.offset-md-3-5 {
margin-left: 60%;
*margin-left: 59.995%;
}
.offset-md-4-5 {
margin-left: 80%;
*margin-left: 79.995%;
}
.offset-md-1-6 {
margin-left: 16.66%;
*margin-left: 16.655%;
}
.offset-md-5-6 {
margin-left: 83.33%;
*margin-left: 83.325%;
}
.offset-md-1-8 {
margin-left: 12.5%;
*margin-left: 12.495%;
}
.offset-md-3-8 {
margin-left: 37.5%;
*margin-left: 37.495%;
}
.offset-md-5-8 {
margin-left: 62.5%;
*margin-left: 62.495%;
}
.offset-md-7-8 {
margin-left: 87.5%;
*margin-left: 87.495%;
}
.offset-md-1-12 {
margin-left: 8.33%;
*margin-left: 8.325%;
}
.offset-md-5-12 {
margin-left: 41.67%;
*margin-left: 41.665%;
}
.offset-md-7-12 {
margin-left: 58.33%;
*margin-left: 58.325%;
}
.offset-md-11-12 {
margin-left: 91.67%;
*margin-left: 91.665%;
}
.offset-md-1-24 {
margin-left: 4.17%;
*margin-left: 4.165%;
}
.offset-md-5-24 {
margin-left: 20.83%;
*margin-left: 20.825%;
}
.offset-md-7-24 {
margin-left: 29.17%;
*margin-left: 29.165%;
}
.offset-md-11-24 {
margin-left: 45.83%;
*margin-left: 45.825%;
}
.offset-md-13-24 {
margin-left: 54.17%;
*margin-left: 54.165%;
}
.offset-md-17-24 {
margin-left: 70.83%;
*margin-left: 70.825%;
}
.offset-md-19-24 {
margin-left: 79.17%;
*margin-left: 79.165%;
}
.offset-md-23-24 {
margin-left: 95.83%;
*margin-left: 95.825%;
}
}
@media screen and (min-width: 64em) {
.offset-lg-0 {
margin-left:0;
}
.offset-lg-1-2 {
margin-left: 50%;
*margin-left: 49.995%;
}
.offset-lg-1-3 {
margin-left: 33.33%;
*margin-left: 33.325%;
}
.offset-lg-2-3 {
margin-left: 66.67%;
*margin-left: 66.665%;
}
.offset-lg-1-4 {
margin-left: 25%;
*margin-left: 24.995%;
}
.offset-lg-3-4 {
margin-left: 75%;
*margin-left: 74.995%;
}
.offset-lg-1-5 {
margin-left: 20%;
*margin-left: 19.995%;
}
.offset-lg-2-5 {
margin-left: 40%;
*margin-left: 39.995%;
}
.offset-lg-3-5 {
margin-left: 60%;
*margin-left: 59.995%;
}
.offset-lg-4-5 {
margin-left: 80%;
*margin-left: 79.995%;
}
.offset-lg-1-6 {
margin-left: 16.66%;
*margin-left: 16.655%;
}
.offset-lg-5-6 {
margin-left: 83.33%;
*margin-left: 83.325%;
}
.offset-lg-1-8 {
margin-left: 12.5%;
*margin-left: 12.495%;
}
.offset-lg-3-8 {
margin-left: 37.5%;
*margin-left: 37.495%;
}
.offset-lg-5-8 {
margin-left: 62.5%;
*margin-left: 62.495%;
}
.offset-lg-7-8 {
margin-left: 87.5%;
*margin-left: 87.495%;
}
.offset-lg-1-12 {
margin-left: 8.33%;
*margin-left: 8.325%;
}
.offset-lg-5-12 {
margin-left: 41.67%;
*margin-left: 41.665%;
}
.offset-lg-7-12 {
margin-left: 58.33%;
*margin-left: 58.325%;
}
.offset-lg-11-12 {
margin-left: 91.67%;
*margin-left: 91.665%;
}
.offset-lg-1-24 {
margin-left: 4.17%;
*margin-left: 4.165%;
}
.offset-lg-5-24 {
margin-left: 20.83%;
*margin-left: 20.825%;
}
.offset-lg-7-24 {
margin-left: 29.17%;
*margin-left: 29.165%;
}
.offset-lg-11-24 {
margin-left: 45.83%;
*margin-left: 45.825%;
}
.offset-lg-13-24 {
margin-left: 54.17%;
*margin-left: 54.165%;
}
.offset-lg-17-24 {
margin-left: 70.83%;
*margin-left: 70.825%;
}
.offset-lg-19-24 {
margin-left: 79.17%;
*margin-left: 79.165%;
}
.offset-lg-23-24 {
margin-left: 95.83%;
*margin-left: 95.825%;
}
}
@media screen and (min-width: 80em) {
.offset-xl-0 {
margin-left:0;
}
.offset-xl-1-2 {
margin-left: 50%;
*margin-left: 49.995%;
}
.offset-xl-1-3 {
margin-left: 33.33%;
*margin-left: 33.325%;
}
.offset-xl-2-3 {
margin-left: 66.67%;
*margin-left: 66.665%;
}
.offset-xl-1-4 {
margin-left: 25%;
*margin-left: 24.995%;
}
.offset-xl-3-4 {
margin-left: 75%;
*margin-left: 74.995%;
}
.offset-xl-1-5 {
margin-left: 20%;
*margin-left: 19.995%;
}
.offset-xl-2-5 {
margin-left: 40%;
*margin-left: 39.995%;
}
.offset-xl-3-5 {
margin-left: 60%;
*margin-left: 59.995%;
}
.offset-xl-4-5 {
margin-left: 80%;
*margin-left: 79.995%;
}
.offset-xl-1-6 {
margin-left: 16.66%;
*margin-left: 16.655%;
}
.offset-xl-5-6 {
margin-left: 83.33%;
*margin-left: 83.325%;
}
.offset-xl-1-8 {
margin-left: 12.5%;
*margin-left: 12.495%;
}
.offset-xl-3-8 {
margin-left: 37.5%;
*margin-left: 37.495%;
}
.offset-xl-5-8 {
margin-left: 62.5%;
*margin-left: 62.495%;
}
.offset-xl-7-8 {
margin-left: 87.5%;
*margin-left: 87.495%;
}
.offset-xl-1-12 {
margin-left: 8.33%;
*margin-left: 8.325%;
}
.offset-xl-5-12 {
margin-left: 41.67%;
*margin-left: 41.665%;
}
.offset-xl-7-12 {
margin-left: 58.33%;
*margin-left: 58.325%;
}
.offset-xl-11-12 {
margin-left: 91.67%;
*margin-left: 91.665%;
}
.offset-xl-1-24 {
margin-left: 4.17%;
*margin-left: 4.165%;
}
.offset-xl-5-24 {
margin-left: 20.83%;
*margin-left: 20.825%;
}
.offset-xl-7-24 {
margin-left: 29.17%;
*margin-left: 29.165%;
}
.offset-xl-11-24 {
margin-left: 45.83%;
*margin-left: 45.825%;
}
.offset-xl-13-24 {
margin-left: 54.17%;
*margin-left: 54.165%;
}
.offset-xl-17-24 {
margin-left: 70.83%;
*margin-left: 70.825%;
}
.offset-xl-19-24 {
margin-left: 79.17%;
*margin-left: 79.165%;
}
.offset-xl-23-24 {
margin-left: 95.83%;
*margin-left: 95.825%;
}
}
@kalebheitzman

This comment has been minimized.

Show comment
Hide comment

Awesome

@Shaunm44

This comment has been minimized.

Show comment
Hide comment
@Shaunm44

Shaunm44 May 13, 2017

Noticed that PureCSS enables you to create grids without size indicators (i.e. '-sm-' or '-lg'), so that will always apply.

I added the classes to the CSS.
Tried looking for how to make a "pull request" but I don't see it. So here's the link to my fork.

Link to my version

Noticed that PureCSS enables you to create grids without size indicators (i.e. '-sm-' or '-lg'), so that will always apply.

I added the classes to the CSS.
Tried looking for how to make a "pull request" but I don't see it. So here's the link to my fork.

Link to my version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment