Skip to content

Instantly share code, notes, and snippets.

@Drixled

Drixled/_helpers.scss

Created December 6, 2016 18:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Drixled/2c22f3fbf8c7ab3a581550a5a61627f8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Drixled/2c22f3fbf8c7ab3a581550a5a61627f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_helpers.scss
.h1 { font-size: 2rem }
.h2 { font-size: 1.5rem }
.h3 { font-size: 1.25rem }
.h4 { font-size: 1rem }
.h5 { font-size: .875rem }
.h6 { font-size: .75rem }
.sans-serif { font-family: "museo-sans", sans-serif; }
.font-desyrel { font-family: 'Desyrel';}
.font-family-inherit { font-family: inherit }
.font-size-inherit { font-size: inherit }
.text-decoration-none { text-decoration: none }
.bold { font-weight: 700 }
.regular { font-weight: 400 }
.italic { font-style: italic }
.caps { text-transform: uppercase; }
.left-align { text-align: left }
.center { text-align: center }
.right-align { text-align: right }
.justify { text-align: justify }
.nowrap { white-space: nowrap }
.break-word { word-wrap: break-word }
.line-height-1 { line-height: 1 }
.line-height-2 { line-height: 1.125 }
.line-height-3 { line-height: 1.25 }
.line-height-4 { line-height: 1.5 }
.no-margin { margin: 0!important }
.no-padding { padding: 0!important }
.mg-10 { margin: 10px }
.mg-20 { margin: 20px }
.mg-30 { margin: 30px }
.mg-40 { margin: 40px }
.mg-50 { margin: 50px }
.mg-60 { margin: 60px }
.mg-70 { margin: 60px }
.mg-80 { margin: 80px }
.mg-90 { margin: 90px }
.mg-100 { margin: 100px }
.mg-x-10 { margin: 0 10px}
.mg-x-20 { margin: 0 20px}
.mg-x-30 { margin: 0 30px}
.mg-x-40 { margin: 0 40px}
.mg-x-50 { margin: 0 50px}
.mg-x-60 { margin: 0 60px}
.mg-x-70 { margin: 0 70px}
.mg-x-80 { margin: 0 80px}
.mg-x-90 { margin: 0 90px}
.mg-x-100 { margin: 0 100px}
.mg-y-10 { margin: 10px 0}
.mg-y-20 { margin: 20px 0}
.mg-y-30 { margin: 30px 0}
.mg-y-40 { margin: 40px 0}
.mg-y-50 { margin: 50px 0}
.mg-y-60 { margin: 60px 0}
.mg-y-70 { margin: 70px 0}
.mg-y-80 { margin: 80px 0}
.mg-y-90 { margin: 90px 0}
.mg-y-100 { margin: 100px 0}
.mg-top-0 { margin-top: 0 }
.mg-top-10 { margin-top: 10px }
.mg-top-20 { margin-top: 20px }
.mg-top-30 { margin-top: 30px }
.mg-top-40 { margin-top: 40px }
.mg-top-50 { margin-top: 50px }
.mg-top-60 { margin-top: 60px }
.mg-top-70 { margin-top: 60px }
.mg-top-80 { margin-top: 80px }
.mg-top-90 { margin-top: 90px }
.mg-top-100 { margin-top: 100px }
.mg-bottom-0 { margin-bottom: 0 }
.mg-bottom-10 { margin-bottom: 10px }
.mg-bottom-20 { margin-bottom: 20px }
.mg-bottom-30 { margin-bottom: 30px }
.mg-bottom-40 { margin-bottom: 40px }
.mg-bottom-50 { margin-bottom: 50px }
.mg-bottom-60 { margin-bottom: 60px }
.mg-bottom-70 { margin-bottom: 70px }
.mg-bottom-80 { margin-bottom: 80px }
.mg-bottom-90 { margin-bottom: 90px }
.mg-bottom-100 { margin-bottom: 100px }
.mg-left-0 { margin-left: 0 }
.mg-left-10 { margin-left: 10px }
.mg-left-20 { margin-left: 20px }
.mg-left-30 { margin-left: 30px }
.mg-left-40 { margin-left: 40px }
.mg-left-50 { margin-left: 50px }
.mg-left-60 { margin-left: 60px }
.mg-left-70 { margin-left: 70px }
.mg-left-80 { margin-left: 80px }
.mg-left-90 { margin-left: 90px }
.mg-left-100 { margin-left: 100px }
.mg-right-0 { margin-right: 0 }
.mg-right-10 { margin-right: 10px }
.mg-right-20 { margin-right: 20px }
.mg-right-30 { margin-right: 30px }
.mg-right-40 { margin-right: 40px }
.mg-right-50 { margin-right: 50px }
.mg-right-60 { margin-right: 60px }
.mg-right-70 { margin-right: 70px }
.mg-right-80 { margin-right: 80px }
.mg-right-90 { margin-right: 90px }
.mg-right-100 { margin-right: 100px }
.pd-10 { padding: 10px }
.pd-20 { padding: 20px }
.pd-30 { padding: 30px }
.pd-40 { padding: 40px }
.pd-50 { padding: 50px }
.pd-60 { padding: 60px }
.pd-70 { padding: 60px }
.pd-80 { padding: 80px }
.pd-90 { padding: 90px }
.pd-100 { padding: 100px }
.pd-x-10 { padding: 0 10px}
.pd-x-20 { padding: 0 20px}
.pd-x-30 { padding: 0 30px}
.pd-x-40 { padding: 0 40px}
.pd-x-50 { padding: 0 50px}
.pd-x-60 { padding: 0 60px}
.pd-x-70 { padding: 0 70px}
.pd-x-80 { padding: 0 80px}
.pd-x-90 { padding: 0 90px}
.pd-x-100 { padding: 0 100px}
.pd-y-10 { padding: 10px 0}
.pd-y-20 { padding: 20px 0}
.pd-y-30 { padding: 30px 0}
.pd-y-40 { padding: 40px 0}
.pd-y-50 { padding: 50px 0}
.pd-y-60 { padding: 60px 0}
.pd-y-70 { padding: 70px 0}
.pd-y-80 { padding: 80px 0}
.pd-y-90 { padding: 90px 0}
.pd-y-100 { padding: 100px 0}
.pd-top-0 { padding-top: 0px }
.pd-top-10 { padding-top: 10px }
.pd-top-20 { padding-top: 20px }
.pd-top-30 { padding-top: 30px }
.pd-top-40 { padding-top: 40px }
.pd-top-50 { padding-top: 50px }
.pd-top-60 { padding-top: 60px }
.pd-top-70 { padding-top: 70px }
.pd-top-80 { padding-top: 80px }
.pd-top-90 { padding-top: 90px }
.pd-top-100 { padding-top: 100px }
.pd-right-0 { padding-right: 0px }
.pd-right-10 { padding-right: 10px }
.pd-right-20 { padding-right: 20px }
.pd-right-30 { padding-right: 30px }
.pd-right-40 { padding-right: 40px }
.pd-right-50 { padding-right: 50px }
.pd-right-60 { padding-right: 60px }
.pd-right-70 { padding-right: 70px }
.pd-right-80 { padding-right: 80px }
.pd-right-90 { padding-right: 90px }
.pd-right-100 { padding-right: 100px }
.pd-bottom-0 { padding-bottom: 0px }
.pd-bottom-10 { padding-bottom: 10px }
.pd-bottom-20 { padding-bottom: 20px }
.pd-bottom-30 { padding-bottom: 30px }
.pd-bottom-40 { padding-bottom: 40px }
.pd-bottom-50 { padding-bottom: 50px }
.pd-bottom-60 { padding-bottom: 60px }
.pd-bottom-70 { padding-bottom: 70px }
.pd-bottom-80 { padding-bottom: 80px }
.pd-bottom-90 { padding-bottom: 90px }
.pd-bottom-100 { padding-bottom: 100px }
.pd-left-0 { padding-left: 0px }
.pd-left-10 { padding-left: 10px }
.pd-left-20 { padding-left: 20px }
.pd-left-30 { padding-left: 30px }
.pd-left-40 { padding-left: 40px }
.pd-left-50 { padding-left: 50px }
.pd-left-60 { padding-left: 60px }
.pd-left-70 { padding-left: 70px }
.pd-left-80 { padding-left: 80px }
.pd-left-90 { padding-left: 90px }
.pd-left-100 { padding-left: 100px }
.list-style-none { list-style: none }
.underline { text-decoration: underline }
.truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.list-reset {
list-style: none;
padding-left: 0
}
.inline { display: inline }
.block { display: block }
.inline-block { display: inline-block }
.table { display: table }
.table-cell { display: table-cell }
.overflow-hidden { overflow: hidden }
.overflow-scroll { overflow: scroll }
.overflow-auto { overflow: auto }
.no-float { float: none }
.left { float: left }
.right { float: right }
.fit { max-width: 100% }
.border-box { box-sizing: border-box }
.align-baseline { vertical-align: baseline }
.align-top { vertical-align: top }
.align-middle { vertical-align: middle }
.align-bottom { vertical-align: bottom }
.relative { position: relative }
.absolute { position: absolute }
.fixed { position: fixed }
.top-0 { top: 0 }
.right-0 { right: 0 }
.bottom-0 { bottom: 0 }
.left-0 { left: 0 }
.z1 { z-index: 1 }
.z2 { z-index: 2 }
.z3 { z-index: 3 }
.z4 { z-index: 4 }
.border {
border-style: solid;
border-width: 1px
}
.border-top {
border-top-style: solid;
border-top-width: 1px
}
.border-right {
border-right-style: solid;
border-right-width: 1px
}
.border-bottom {
border-bottom-style: solid;
border-bottom-width: 1px
}
.border-left {
border-left-style: solid;
border-left-width: 1px
}
.border-none { border: 0 }
.rounded { border-radius: 3px }
.circle { border-radius: 50% }
.rounded-top { border-radius: 3px 3px 0 0 }
.rounded-right { border-radius: 0 3px 3px 0 }
.rounded-bottom { border-radius: 0 0 3px 3px }
.rounded-left { border-radius: 3px 0 0 3px }
.not-rounded { border-radius: 0 }
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
@media (min-width: 40em) {
.sm-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
}
@media (min-width: 52em) {
.md-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
}
@media (min-width: 64em) {
.lg-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.items-start {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start
}
.items-end {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end
}
.items-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center
}
.items-baseline {
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
-ms-grid-row-align: baseline;
align-items: baseline
}
.items-stretch {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
-ms-grid-row-align: stretch;
align-items: stretch
}
.self-start {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start
}
.self-end {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end
}
.self-center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center
}
.self-baseline {
-webkit-align-self: baseline;
-ms-flex-item-align: baseline;
align-self: baseline
}
.self-stretch {
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch
}
.justify-start {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start
}
.justify-end {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end
}
.justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.justify-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.justify-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around
}
.content-start {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start
}
.content-end {
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end
}
.content-center {
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center
}
.content-between {
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between
}
.content-around {
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around
}
.content-stretch {
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch
}
.flex-auto {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
min-height: 0
}
.flex-none {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none
}
.order-0 {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0
}
.order-1 {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
.order-2 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2
}
.order-3 {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3
}
.order-last {
-webkit-box-ordinal-group: 100000;
-webkit-order: 99999;
-ms-flex-order: 99999;
order: 99999
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment