Skip to content

Instantly share code, notes, and snippets.

@dashw00d
Created January 6, 2019 16:00
Show Gist options
  • Save dashw00d/65014f887b5ec0bf3eda9d5e40b0816e to your computer and use it in GitHub Desktop.
Save dashw00d/65014f887b5ec0bf3eda9d5e40b0816e to your computer and use it in GitHub Desktop.
Spacing helpers I use for materialize content pieces
.margin.top-0{
margin-top:0
}
.margin.bottom-0{
bottom-top:0
}
.margin.top-10{
margin-top:10px
}
.margin.bottom-10{
margin-bottom:10px
}
.margin.top-20{
margin-top:20px
}
.margin.bottom-20{
margin-bottom:20px
}
.margin.top-40{
margin-top:40px
}
.margin.bottom-40{
margin-bottom:40px
}
.margin.top-60{
margin-top:60px
}
.margin.bottom-60{
margin-bottom:60px
}
.margin.top-80{
margin-top:80px
}
.margin.bottom-80{
margin-bottom:60px
}
.margin.top-100{
margin-top:100px
}
.margin.bottom-100{
margin-bottom:100px
}
.margin.top-120{
margin-top:120px
}
.margin.bottom-120{
margin-bottom:120px
}
.margin.top-140{
margin-top:140px
}
.margin.bottom-140{
margin-bottom:140px
}
.margin.top-160{
margin-top:160px
}
.margin.bottom-160{
margin-bottom:160px
}
.margin.all-10{
margin:5px
}
.margin.all-20{
margin:10px
}
.margin.all-40{
margin:20px
}
.no-margin{
margin:0!important
}
.no-padding{
padding:0!important
}
.block{
display:block
}
.block.center{
margin:0 auto
}
.clear{
clear:both
}
.padding.top-0{
padding-top:0
}
.padding.bottom-0{
padding-bottom:0
}
.padding.top-10{
padding-top:10px
}
.padding.bottom-10{
padding-bottom:10px
}
.padding.top-20{
padding-top:20px
}
.padding.bottom-20{
padding-bottom:20px
}
.padding.top-40{
padding-top:40px
}
.padding.bottom-40{
padding-bottom:40px
}
.padding.top-60{
padding-top:60px
}
.padding.bottom-60{
padding-bottom:60px
}
.padding.top-80{
padding-top:80px
}
.padding.bottom-80{
padding-bottom:80px
}
.padding.top-100{
padding-top:100px
}
.padding.bottom-100{
padding-bottom:100px
}
.padding.top-120{
padding-top:120px
}
.padding.bottom-120{
padding-bottom:120px
}
.padding.top-160{
padding-top:160px
}
.padding.bottom-160{
padding-bottom:160px
}
.padding.all-10{
padding:10px
}
.padding.all-20{
padding:20px
}
.padding.all-40{
padding:40px
}
.underline.bottom{
border-bottom:1px solid #d5d5d5
}
.padding.s-top-0{
padding-top:0
}
.padding.s-bottom-0{
padding-bottom:0
}
.padding.s-top-10{
padding-top:10px
}
.padding.s-bottom-10{
padding-bottom:10px
}
.padding.s-top-20{
padding-top:20px
}
.padding.s-bottom-20{
padding-bottom:20px
}
.padding.s-top-40{
padding-top:40px
}
.padding.s-bottom-40{
padding-bottom:40px
}
.padding.s-top-60{
padding-top:60px
}
.padding.s-bottom-60{
padding-bottom:60px
}
.padding.s-top-80{
padding-top:80px
}
.padding.s-bottom-80{
padding-bottom:80px
}
.padding.s-top-100{
padding-top:100px
}
.padding.s-bottom-100{
padding-bottom:100px
}
.padding.s-top-120{
padding-top:120px
}
.padding.s-bottom-120{
padding-bottom:120px
}
.padding.s-top-140{
padding-top:140px
}
.padding.s-bottom-140{
padding-bottom:140px
}
.padding.s-top-160{
padding-top:160px
}
.padding.s-bottom-160{
padding-bottom:160px
}
.padding.s-all-20{
padding:20px
}
.margin.s-top-0{
margin-top:0
}
.margin.s-bottom-0{
margin-bottom:0
}
.margin.s-top-10{
margin-top:10px
}
.margin.s-bottom-10{
margin-bottom:10px
}
.margin.s-top-20{
margin-top:20px
}
.margin.s-bottom-20{
margin-bottom:20px
}
.margin.s-top-40{
margin-top:40px
}
.margin.s-bottom-40{
margin-bottom:40px
}
.margin.s-top-60{
margin-top:60px
}
.margin.s-bottom-60{
margin-bottom:60px
}
.margin.s-top-80{
margin-top:80px
}
.margin.s-bottom-80{
margin-bottom:80px
}
.margin.s-top-100{
margin-top:100px
}
.margin.s-bottom-100{
margin-bottom:100px
}
.margin.s-top-120{
margin-top:120px
}
.margin.s-bottom-120{
margin-bottom:120px
}
.margin.s-top-140{
margin-top:140px
}
.margin.s-bottom-140{
margin-bottom:140px
}
.margin.s-top-160{
margin-top:160px
}
.margin.s-bottom-160{
margin-bottom:160px
}
.margin.s-all-20{
margin:20px
}
@media only screen and (min-width:601px){
.row .col.offset-m0{
margin-left:auto
}
.row .col.offset-s0.offset-m1{
margin-left:8.33333%
}
.padding.m-top-0{
padding-top:0
}
.padding.m-bottom-0{
padding-bottom:0
}
.padding.m-top-20{
padding-top:20px
}
.padding.m-bottom-20{
padding-bottom:20px
}
.padding.m-top-40{
padding-top:40px
}
.padding.m-bottom-40{
padding-bottom:40px
}
.padding.m-top-60{
padding-top:60px
}
.padding.m-bottom-60{
padding-bottom:60px
}
.padding.m-top-80{
padding-top:80px
}
.padding.m-bottom-80{
padding-bottom:80px
}
.padding.m-top-100{
padding-top:100px
}
.padding.m-bottom-100{
padding-bottom:100px
}
.padding.m-top-120{
padding-top:120px
}
.padding.m-bottom-120{
padding-bottom:120px
}
.padding.m-top-160{
padding-top:160px
}
.padding.m-bottom-160{
padding-bottom:160px
}
.padding.m-all-20{
padding:20px
}
.margin.m-top-0{
margin-top:0
}
.margin.m-bottom-0{
margin-bottom:0
}
.margin.m-top-20{
margin-top:20px
}
.margin.m-bottom-20{
margin-bottom:20px
}
.margin.m-top-40{
margin-top:40px
}
.margin.m-bottom-40{
margin-bottom:40px
}
.margin.m-top-60{
margin-top:60px
}
.margin.m-bottom-60{
margin-bottom:60px
}
.margin.m-top-80{
margin-top:80px
}
.margin.m-bottom-80{
margin-bottom:80px
}
.margin.m-top-100{
margin-top:100px
}
.margin.m-bottom-100{
margin-bottom:100px
}
.margin.m-top-120{
margin-top:120px
}
.margin.m-bottom-120{
margin-bottom:120px
}
.margin.m-top-160{
margin-top:160px
}
.margin.m-bottom-160{
margin-bottom:160px
}
.margin.m-all-20{
margin:20px
}
}
@media only screen and (min-width:993px){
.row .col.offset-l0{
margin-left:auto
}
.row .col.offset-m0.offset-l1{
margin-left:8.33333%
}
.padding.l-top-0{
padding-top:0
}
.padding.l-bottom-0{
padding-bottom:0
}
.padding.l-top-20{
padding-top:20px
}
.padding.l-bottom-20{
padding-bottom:20px
}
.padding.l-top-40{
padding-top:40px
}
.padding.l-bottom-40{
padding-bottom:40px
}
.padding.l-top-60{
padding-top:60px
}
.padding.l-bottom-60{
padding-bottom:60px
}
.padding.l-top-80{
padding-top:80px
}
.padding.l-bottom-80{
padding-bottom:80px
}
.padding.l-top-100{
padding-top:100px
}
.padding.l-bottom-100{
padding-bottom:100px
}
.padding.l-top-120{
padding-top:120px
}
.padding.l-bottom-120{
padding-bottom:120px
}
.padding.l-top-160{
padding-top:160px
}
.padding.l-bottom-160{
padding-bottom:160px
}
.padding.l-all-20{
padding:20px
}
.margin.l-top-0{
margin-top:0
}
.margin.l-bottom-0{
margin-bottom:0
}
.margin.l-top-20{
margin-top:20px
}
.margin.l-bottom-20{
margin-bottom:20px
}
.margin.l-top-40{
margin-top:40px
}
.margin.l-bottom-40{
margin-bottom:40px
}
.margin.l-top-60{
margin-top:60px
}
.margin.l-bottom-60{
margin-bottom:60px
}
.margin.l-top-80{
margin-top:80px
}
.margin.l-bottom-80{
margin-bottom:80px
}
.margin.l-top-100{
margin-top:100px
}
.margin.l-bottom-100{
margin-bottom:100px
}
.margin.l-top-120{
margin-top:120px
}
.margin.l-bottom-120{
margin-bottom:120px
}
.margin.l-top-160{
margin-top:160px
}
.margin.l-bottom-160{
margin-bottom:160px
}
.margin.l-all-20{
margin:20px
}
}
@media only screen and (min-width:1201px){
.row .col.offset-xl0{
margin-left:auto
}
.row .col.offset-l0.offset-xl1{
margin-left:8.33333%
}
.padding.xl-top-0{
padding-top:0
}
.padding.xl-bottom-0{
padding-bottom:0
}
.padding.xl-top-20{
padding-top:20px
}
.padding.xl-bottom-20{
padding-bottom:20px
}
.padding.xl-top-40{
padding-top:40px
}
.padding.xl-bottom-40{
padding-bottom:40px
}
.padding.xl-top-60{
padding-top:60px
}
.padding.xl-bottom-60{
padding-bottom:60px
}
.padding.xl-top-80{
padding-top:80px
}
.padding.xl-bottom-80{
padding-bottom:80px
}
.padding.xl-top-100{
padding-top:100px
}
.padding.xl-bottom-100{
padding-bottom:100px
}
.padding.xl-top-120{
padding-top:120px
}
.padding.xl-bottom-120{
padding-bottom:120px
}
.padding.xl-top-160{
padding-top:160px
}
.padding.xl-bottom-160{
padding-bottom:160px
}
.padding.xl-all-20{
padding:20px
}
.margin.xl-top-0{
margin-top:0
}
.margin.xl-bottom-0{
margin-bottom:0
}
.margin.xl-top-20{
margin-top:20px
}
.margin.xl-bottom-20{
margin-bottom:20px
}
.margin.xl-top-40{
margin-top:40px
}
.margin.xl-bottom-40{
margin-bottom:40px
}
.margin.xl-top-60{
margin-top:60px
}
.margin.xl-bottom-60{
margin-bottom:60px
}
.margin.xl-top-80{
margin-top:80px
}
.margin.xl-bottom-80{
margin-bottom:80px
}
.margin.xl-top-100{
margin-top:100px
}
.margin.xl-bottom-100{
margin-bottom:100px
}
.margin.xl-top-120{
margin-top:120px
}
.margin.xl-bottom-120{
margin-bottom:120px
}
.margin.xl-top-160{
margin-top:160px
}
.margin.xl-bottom-160{
margin-bottom:160px
}
.margin.xl-all-20{
margin:20px
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment