Created
January 6, 2019 16:00
-
-
Save dashw00d/65014f887b5ec0bf3eda9d5e40b0816e to your computer and use it in GitHub Desktop.
Spacing helpers I use for materialize content pieces
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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