Created
July 14, 2017 04:40
-
-
Save patmood/a7ad116cd997cb12554d830eae8d63b2 to your computer and use it in GitHub Desktop.
Basscss in a single file
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
/* Basscss Type Scale */ | |
.h1 { font-size: var(--h1) } | |
.h2 { font-size: var(--h2) } | |
.h3 { font-size: var(--h3) } | |
.h4 { font-size: var(--h4) } | |
.h5 { font-size: var(--h5) } | |
.h6 { font-size: var(--h6) } | |
:root { | |
--h1: 2rem; | |
--h2: 1.5rem; | |
--h3: 1.25rem; | |
--h4: 1rem; | |
--h5: .875rem; | |
--h6: .75rem; | |
} | |
/* Basscss Typography */ | |
.font-family-inherit { font-family: inherit } | |
.font-size-inherit { font-size: inherit } | |
.text-decoration-none { text-decoration: none } | |
.bold { font-weight: var(--bold-font-weight, bold) } | |
.regular { font-weight: normal } | |
.italic { font-style: italic } | |
.caps { text-transform: uppercase; letter-spacing: var(--caps-letter-spacing); } | |
.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: var(--line-height-1) } | |
.line-height-2 { line-height: var(--line-height-2) } | |
.line-height-3 { line-height: var(--line-height-3) } | |
.line-height-4 { line-height: var(--line-height-4) } | |
.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; | |
} | |
:root { | |
--line-height-1: 1; | |
--line-height-2: 1.125; | |
--line-height-3: 1.25; | |
--line-height-4: 1.5; | |
--letter-spacing: 1; | |
--caps-letter-spacing: .2em; | |
--bold-font-weight: bold; | |
} | |
/* Basscss Align */ | |
.align-baseline { vertical-align: baseline } | |
.align-top { vertical-align: top } | |
.align-middle { vertical-align: middle } | |
.align-bottom { vertical-align: bottom } | |
/* Basscss Margin */ | |
.m0 { margin: 0 } | |
.mt0 { margin-top: 0 } | |
.mr0 { margin-right: 0 } | |
.mb0 { margin-bottom: 0 } | |
.ml0 { margin-left: 0 } | |
.mx0 { margin-left: 0; margin-right: 0 } | |
.my0 { margin-top: 0; margin-bottom: 0 } | |
.m1 { margin: var(--space-1) } | |
.mt1 { margin-top: var(--space-1) } | |
.mr1 { margin-right: var(--space-1) } | |
.mb1 { margin-bottom: var(--space-1) } | |
.ml1 { margin-left: var(--space-1) } | |
.mx1 { margin-left: var(--space-1); margin-right: var(--space-1) } | |
.my1 { margin-top: var(--space-1); margin-bottom: var(--space-1) } | |
.m2 { margin: var(--space-2) } | |
.mt2 { margin-top: var(--space-2) } | |
.mr2 { margin-right: var(--space-2) } | |
.mb2 { margin-bottom: var(--space-2) } | |
.ml2 { margin-left: var(--space-2) } | |
.mx2 { margin-left: var(--space-2); margin-right: var(--space-2) } | |
.my2 { margin-top: var(--space-2); margin-bottom: var(--space-2) } | |
.m3 { margin: var(--space-3) } | |
.mt3 { margin-top: var(--space-3) } | |
.mr3 { margin-right: var(--space-3) } | |
.mb3 { margin-bottom: var(--space-3) } | |
.ml3 { margin-left: var(--space-3) } | |
.mx3 { margin-left: var(--space-3); margin-right: var(--space-3) } | |
.my3 { margin-top: var(--space-3); margin-bottom: var(--space-3) } | |
.m4 { margin: var(--space-4) } | |
.mt4 { margin-top: var(--space-4) } | |
.mr4 { margin-right: var(--space-4) } | |
.mb4 { margin-bottom: var(--space-4) } | |
.ml4 { margin-left: var(--space-4) } | |
.mx4 { margin-left: var(--space-4); margin-right: var(--space-4) } | |
.my4 { margin-top: var(--space-4); margin-bottom: var(--space-4) } | |
.mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); } | |
.mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); } | |
.mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); } | |
.mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); } | |
.ml-auto { margin-left: auto } | |
.mr-auto { margin-right: auto } | |
.mx-auto { margin-left: auto; margin-right: auto; } | |
:root { | |
--space-1: .5rem; | |
--space-2: 1rem; | |
--space-3: 2rem; | |
--space-4: 4rem; | |
} | |
/* Basscss Padding */ | |
.p0 { padding: 0 } | |
.pt0 { padding-top: 0 } | |
.pr0 { padding-right: 0 } | |
.pb0 { padding-bottom: 0 } | |
.pl0 { padding-left: 0 } | |
.px0 { padding-left: 0; padding-right: 0 } | |
.py0 { padding-top: 0; padding-bottom: 0 } | |
.p1 { padding: var(--space-1) } | |
.pt1 { padding-top: var(--space-1) } | |
.pr1 { padding-right: var(--space-1) } | |
.pb1 { padding-bottom: var(--space-1) } | |
.pl1 { padding-left: var(--space-1) } | |
.py1 { padding-top: var(--space-1); padding-bottom: var(--space-1) } | |
.px1 { padding-left: var(--space-1); padding-right: var(--space-1) } | |
.p2 { padding: var(--space-2) } | |
.pt2 { padding-top: var(--space-2) } | |
.pr2 { padding-right: var(--space-2) } | |
.pb2 { padding-bottom: var(--space-2) } | |
.pl2 { padding-left: var(--space-2) } | |
.py2 { padding-top: var(--space-2); padding-bottom: var(--space-2) } | |
.px2 { padding-left: var(--space-2); padding-right: var(--space-2) } | |
.p3 { padding: var(--space-3) } | |
.pt3 { padding-top: var(--space-3) } | |
.pr3 { padding-right: var(--space-3) } | |
.pb3 { padding-bottom: var(--space-3) } | |
.pl3 { padding-left: var(--space-3) } | |
.py3 { padding-top: var(--space-3); padding-bottom: var(--space-3) } | |
.px3 { padding-left: var(--space-3); padding-right: var(--space-3) } | |
.p4 { padding: var(--space-4) } | |
.pt4 { padding-top: var(--space-4) } | |
.pr4 { padding-right: var(--space-4) } | |
.pb4 { padding-bottom: var(--space-4) } | |
.pl4 { padding-left: var(--space-4) } | |
.py4 { padding-top: var(--space-4); padding-bottom: var(--space-4) } | |
.px4 { padding-left: var(--space-4); padding-right: var(--space-4) } | |
:root { | |
--space-1: .5rem; | |
--space-2: 1rem; | |
--space-3: 2rem; | |
--space-4: 4rem; | |
} | |
/* Basscss Grid */ | |
.col { | |
float: left; | |
box-sizing: border-box; | |
} | |
.col-right { | |
float: right; | |
box-sizing: border-box; | |
} | |
.col-1 { width: calc(1/12 * 100%); } | |
.col-2 { width: calc(2/12 * 100%); } | |
.col-3 { width: calc(3/12 * 100%); } | |
.col-4 { width: calc(4/12 * 100%); } | |
.col-5 { width: calc(5/12 * 100%); } | |
.col-6 { width: calc(6/12 * 100%); } | |
.col-7 { width: calc(7/12 * 100%); } | |
.col-8 { width: calc(8/12 * 100%); } | |
.col-9 { width: calc(9/12 * 100%); } | |
.col-10 { width: calc(10/12 * 100%); } | |
.col-11 { width: calc(11/12 * 100%); } | |
.col-12 { width: 100%; } | |
@media (--breakpoint-lg) { | |
.lg-col { | |
float: left; | |
box-sizing: border-box; | |
} | |
.lg-col-right { | |
float: right; | |
box-sizing: border-box; | |
} | |
.lg-col-1 { width: calc(1/12 * 100%); } | |
.lg-col-2 { width: calc(2/12 * 100%); } | |
.lg-col-3 { width: calc(3/12 * 100%); } | |
.lg-col-4 { width: calc(4/12 * 100%); } | |
.lg-col-5 { width: calc(5/12 * 100%); } | |
.lg-col-6 { width: calc(6/12 * 100%); } | |
.lg-col-7 { width: calc(7/12 * 100%); } | |
.lg-col-8 { width: calc(8/12 * 100%); } | |
.lg-col-9 { width: calc(9/12 * 100%); } | |
.lg-col-10 { width: calc(10/12 * 100%); } | |
.lg-col-11 { width: calc(11/12 * 100%); } | |
.lg-col-12 { width: 100%; } | |
} | |
@media (--breakpoint-sm) { | |
.sm-col { | |
float: left; | |
box-sizing: border-box; | |
} | |
.sm-col-right { | |
float: right; | |
box-sizing: border-box; | |
} | |
.sm-col-1 { width: calc(1/12 * 100%); } | |
.sm-col-2 { width: calc(2/12 * 100%); } | |
.sm-col-3 { width: calc(3/12 * 100%); } | |
.sm-col-4 { width: calc(4/12 * 100%); } | |
.sm-col-5 { width: calc(5/12 * 100%); } | |
.sm-col-6 { width: calc(6/12 * 100%); } | |
.sm-col-7 { width: calc(7/12 * 100%); } | |
.sm-col-8 { width: calc(8/12 * 100%); } | |
.sm-col-9 { width: calc(9/12 * 100%); } | |
.sm-col-10 { width: calc(10/12 * 100%); } | |
.sm-col-11 { width: calc(11/12 * 100%); } | |
.sm-col-12 { width: 100%; } | |
} | |
@media (--breakpoint-md) { | |
.md-col { | |
float: left; | |
box-sizing: border-box; | |
} | |
.md-col-right { | |
float: right; | |
box-sizing: border-box; | |
} | |
.md-col-1 { width: calc(1/12 * 100%); } | |
.md-col-2 { width: calc(2/12 * 100%); } | |
.md-col-3 { width: calc(3/12 * 100%); } | |
.md-col-4 { width: calc(4/12 * 100%); } | |
.md-col-5 { width: calc(5/12 * 100%); } | |
.md-col-6 { width: calc(6/12 * 100%); } | |
.md-col-7 { width: calc(7/12 * 100%); } | |
.md-col-8 { width: calc(8/12 * 100%); } | |
.md-col-9 { width: calc(9/12 * 100%); } | |
.md-col-10 { width: calc(10/12 * 100%); } | |
.md-col-11 { width: calc(11/12 * 100%); } | |
.md-col-12 { width: 100%; } | |
} | |
@media (--breakpoint-lg) { | |
.lg-col { | |
float: left; | |
box-sizing: border-box; | |
} | |
.lg-col-right { | |
float: right; | |
box-sizing: border-box; | |
} | |
.lg-col-1 { width: calc(1/12 * 100%); } | |
.lg-col-2 { width: calc(2/12 * 100%); } | |
.lg-col-3 { width: calc(3/12 * 100%); } | |
.lg-col-4 { width: calc(4/12 * 100%); } | |
.lg-col-5 { width: calc(5/12 * 100%); } | |
.lg-col-6 { width: calc(6/12 * 100%); } | |
.lg-col-7 { width: calc(7/12 * 100%); } | |
.lg-col-8 { width: calc(8/12 * 100%); } | |
.lg-col-9 { width: calc(9/12 * 100%); } | |
.lg-col-10 { width: calc(10/12 * 100%); } | |
.lg-col-11 { width: calc(11/12 * 100%); } | |
.lg-col-12 { width: 100%; } | |
} | |
@custom-media --breakpoint-sm (min-width: 40em); | |
@custom-media --breakpoint-md (min-width: 52em); | |
@custom-media --breakpoint-lg (min-width: 64em); | |
/* Basscss Flexbox */ | |
.flex { display: flex } | |
@media (--breakpoint-sm) { | |
.sm-flex { display: flex } | |
} | |
@media (--breakpoint-md) { | |
.md-flex { display: flex } | |
} | |
@media (--breakpoint-lg) { | |
.lg-flex { display: flex } | |
} | |
.flex-column { flex-direction: column } | |
.flex-wrap { flex-wrap: wrap } | |
.items-start { align-items: flex-start } | |
.items-end { align-items: flex-end } | |
.items-center { align-items: center } | |
.items-baseline { align-items: baseline } | |
.items-stretch { align-items: stretch } | |
.self-start { align-self: flex-start } | |
.self-end { align-self: flex-end } | |
.self-center { align-self: center } | |
.self-baseline { align-self: baseline } | |
.self-stretch { align-self: stretch } | |
.justify-start { justify-content: flex-start } | |
.justify-end { justify-content: flex-end } | |
.justify-center { justify-content: center } | |
.justify-between { justify-content: space-between } | |
.justify-around { justify-content: space-around } | |
.content-start { align-content: flex-start } | |
.content-end { align-content: flex-end } | |
.content-center { align-content: center } | |
.content-between { align-content: space-between } | |
.content-around { align-content: space-around } | |
.content-stretch { align-content: stretch } | |
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ | |
.flex-auto { | |
flex: 1 1 auto; | |
min-width: 0; /* 1 */ | |
min-height: 0; /* 1 */ | |
} | |
.flex-none { flex: none } | |
.order-0 { order: 0 } | |
.order-1 { order: 1 } | |
.order-2 { order: 2 } | |
.order-3 { order: 3 } | |
.order-last { order: 99999 } | |
@custom-media --breakpoint-sm (min-width: 40em); | |
@custom-media --breakpoint-md (min-width: 52em); | |
@custom-media --breakpoint-lg (min-width: 64em); | |
/* Basscss Position */ | |
.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: var(--z1) } | |
.z2 { z-index: var(--z2) } | |
.z3 { z-index: var(--z3) } | |
.z4 { z-index: var(--z4) } | |
:root { | |
--z1: 1; | |
--z2: 2; | |
--z3: 3; | |
--z4: 4; | |
} | |
/* Basscss Border */ | |
.border { | |
border-style: solid; | |
border-width: var(--border-width); | |
} | |
.border-top { | |
border-top-style: solid; | |
border-top-width: var(--border-width); | |
} | |
.border-right { | |
border-right-style: solid; | |
border-right-width: var(--border-width); | |
} | |
.border-bottom { | |
border-bottom-style: solid; | |
border-bottom-width: var(--border-width); | |
} | |
.border-left { | |
border-left-style: solid; | |
border-left-width: var(--border-width); | |
} | |
.border-none { border: 0 } | |
.rounded { border-radius: var(--border-radius) } | |
.circle { border-radius: 50% } | |
.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 } | |
.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 } | |
.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) } | |
.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) } | |
.not-rounded { border-radius: 0 } | |
:root { | |
--border-width: 1px; | |
--border-radius: 3px; | |
} | |
/* Basscss Hide */ | |
.hide { | |
position: absolute !important; | |
height: 1px; | |
width: 1px; | |
overflow: hidden; | |
clip: rect(1px, 1px, 1px, 1px); | |
} | |
@media (--breakpoint-xs) { | |
.xs-hide { display: none !important } | |
} | |
@media (--breakpoint-sm-md) { | |
.sm-hide { display: none !important } | |
} | |
@media (--breakpoint-md-lg) { | |
.md-hide { display: none !important } | |
} | |
@media (--breakpoint-lg) { | |
.lg-hide { display: none !important } | |
} | |
.display-none { display: none !important } | |
@custom-media --breakpoint-xs (max-width: 40em); | |
@custom-media --breakpoint-sm-md (min-width: 40em) and (max-width: 52em); | |
@custom-media --breakpoint-md-lg (min-width: 52em) and (max-width: 64em); | |
@custom-media --breakpoint-lg (min-width: 64em); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment