A list of all styles included in Basscss
Selectors | Declarations |
---|---|
body, button | margin: 0; |
button, input, select, textarea | font-family: inherit; font-size: 100%; |
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary | display: block; |
img | max-width: 100%; |
svg | max-height: 100%; |
body | font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.5; font-size: 100%; |
h1, h2, h3, h4, h5, h6 | font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: bold; line-height: 1.25; margin-top: 1em; margin-bottom: .5em; |
p, dl, ol, ul | font-size: 1rem; margin-top: 0; margin-bottom: 1rem; |
ol, ul | padding-left: 2rem; |
pre, code, samp | font-family: 'Source Code Pro', Consolas, monospace; font-size: inherit; |
pre | margin-top: 0; margin-bottom: 1rem; overflow-x: scroll; |
hr | margin-top: 2rem; margin-bottom: 2rem; |
blockquote | margin-top: 2rem; margin-bottom: 2rem; margin-left: 0; padding-left: 1rem; padding-right: 1rem; |
blockquote, blockquote p | font-size: 1.25rem; font-style: italic; |
h1, .h1 | font-size: 2rem; |
h2, .h2 | font-size: 1.5rem; |
h3, .h3 | font-size: 1.25rem; |
h4, .h4 | font-size: 1rem; |
h5, .h5 | font-size: .875rem; |
h6, .h6 | font-size: .75rem; |
.list-reset | list-style: none; padding-left: 0; |
input, select, textarea, fieldset | margin-top: 0; margin-bottom: .5rem; |
input[type=text], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week] | line-height: 1.75em; -moz-box-sizing: border-box; box-sizing: border-box; height: 2.25em; -webkit-appearance: none; padding: .25em 1rem; |
select | line-height: 2em; padding: .25em 1rem; -moz-box-sizing: border-box; box-sizing: border-box; |
select:not([multiple]) | height: 2.25em; |
textarea | -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.75em; padding: .25em 1rem; |
.fieldset-reset | padding: 0; margin-left: 0; margin-right: 0; border: 0; |
.fieldset-reset legend | padding: 0; |
button, input[type=button], input[type=submit], input[type=reset], .button | font-weight: bold; text-decoration: none; cursor: pointer; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 2.25em; margin: 0; padding: 0 1rem; height: auto; width: auto; min-height: 2.25em; border: 0; -webkit-appearance: none; |
.button:hover | text-decoration: none; |
table | border-collapse: collapse; border-spacing: 0; max-width: 100%; width: 100%; |
th | text-align: left; font-weight: bold; |
th, td | padding: .25em 1rem; line-height: inherit; |
th | vertical-align: bottom; |
td | vertical-align: top; |
.inline | display: inline; |
.block | display: block; |
.inline-block | display: inline-block; |
.overflow-hidden | overflow: hidden; |
.overflow-scroll | overflow: scroll; |
.clearfix:before, .clearfix:after | content: " "; display: table; |
.clearfix:after | clear: both; |
.left | float: left; |
.right | float: right; |
.fit | max-width: 100%; |
.half-width | width: 50%; |
.full-width | width: 100%; |
.bold | font-weight: bold; |
.regular | font-weight: normal; |
.italic | font-style: italic; |
.caps | text-transform: uppercase; letter-spacing: .2em; |
.left-align | text-align: left; |
.center | text-align: center; |
.right-align | text-align: right; |
.justify | text-align: justify; |
.nowrap | white-space: nowrap; |
.m0 | margin: 0; |
.mt0 | margin-top: 0; |
.mr0 | margin-right: 0; |
.mb0 | margin-bottom: 0; |
.ml0 | margin-left: 0; |
.m1 | margin: .5rem; |
.mt1 | margin-top: .5rem; |
.mr1 | margin-right: .5rem; |
.mb1 | margin-bottom: .5rem; |
.ml1 | margin-left: .5rem; |
.m2 | margin: 1rem; |
.mt2 | margin-top: 1rem; |
.mr2 | margin-right: 1rem; |
.mb2 | margin-bottom: 1rem; |
.ml2 | margin-left: 1rem; |
.m3 | margin: 2rem; |
.mt3 | margin-top: 2rem; |
.mr3 | margin-right: 2rem; |
.mb3 | margin-bottom: 2rem; |
.ml3 | margin-left: 2rem; |
.m4 | margin: 4rem; |
.mt4 | margin-top: 4rem; |
.mr4 | margin-right: 4rem; |
.mb4 | margin-bottom: 4rem; |
.ml4 | margin-left: 4rem; |
.mxn1 | margin-left: -.5rem; margin-right: -.5rem; |
.mxn2 | margin-left: -1rem; margin-right: -1rem; |
.mxn3 | margin-left: -2rem; margin-right: -2rem; |
.mxn4 | margin-left: -4rem; margin-right: -4rem; |
.mx-auto | margin-left: auto; margin-right: auto; |
.p1 | padding: .5rem; |
.py1 | padding-top: .5rem; padding-bottom: .5rem; |
.px1 | padding-left: .5rem; padding-right: .5rem; |
.p2 | padding: 1rem; |
.py2 | padding-top: 1rem; padding-bottom: 1rem; |
.px2 | padding-left: 1rem; padding-right: 1rem; |
.p3 | padding: 2rem; |
.py3 | padding-top: 2rem; padding-bottom: 2rem; |
.px3 | padding-left: 2rem; padding-right: 2rem; |
.p4 | padding: 4rem; |
.py4 | padding-top: 4rem; padding-bottom: 4rem; |
.px4 | padding-left: 4rem; padding-right: 4rem; |
.sm-show, .md-show, .lg-show | display: none !important; |
.sm-show | (min-width: 40em) display: block !important; |
.md-show | (min-width: 52em) display: block !important; |
.lg-show | (min-width: 64em) display: block !important; |
.hide | display: none !important; |
.sm-hide | (min-width: 40em) display: none !important; |
.md-hide | (min-width: 52em) display: none !important; |
.lg-hide | (min-width: 64em) display: none !important; |
.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; |
.absolute-center | top: 0; right: 0; bottom: 0; left: 0; margin: auto; display: table; |
.container | max-width: 64em; margin-left: auto; margin-right: auto; |
.col | float: left; -moz-box-sizing: border-box; box-sizing: border-box; |
.col-right | float: right; -moz-box-sizing: border-box; box-sizing: border-box; |
.col-1 | width: 8.333333333333332%; |
.col-2 | width: 16.666666666666664%; |
.col-3 | width: 25%; |
.col-4 | width: 33.33333333333333%; |
.col-5 | width: 41.66666666666667%; |
.col-6 | width: 50%; |
.col-7 | width: 58.333333333333336%; |
.col-8 | width: 66.66666666666666%; |
.col-9 | width: 75%; |
.col-10 | width: 83.33333333333334%; |
.col-11 | width: 91.66666666666666%; |
.col-12 | width: 100%; |
.sm-col | (min-width: 40em) float: left; -moz-box-sizing: border-box; box-sizing: border-box; |
.sm-col-right | (min-width: 40em) float: right; -moz-box-sizing: border-box; box-sizing: border-box; |
.sm-col-1 | (min-width: 40em) width: 8.333333333333332%; |
.sm-col-2 | (min-width: 40em) width: 16.666666666666664%; |
.sm-col-3 | (min-width: 40em) width: 25%; |
.sm-col-4 | (min-width: 40em) width: 33.33333333333333%; |
.sm-col-5 | (min-width: 40em) width: 41.66666666666667%; |
.sm-col-6 | (min-width: 40em) width: 50%; |
.sm-col-7 | (min-width: 40em) width: 58.333333333333336%; |
.sm-col-8 | (min-width: 40em) width: 66.66666666666666%; |
.sm-col-9 | (min-width: 40em) width: 75%; |
.sm-col-10 | (min-width: 40em) width: 83.33333333333334%; |
.sm-col-11 | (min-width: 40em) width: 91.66666666666666%; |
.sm-col-12 | (min-width: 40em) width: 100%; |
.md-col | (min-width: 52em) float: left; -moz-box-sizing: border-box; box-sizing: border-box; |
.md-col-right | (min-width: 52em) float: right; -moz-box-sizing: border-box; box-sizing: border-box; |
.md-col-1 | (min-width: 52em) width: 8.333333333333332%; |
.md-col-2 | (min-width: 52em) width: 16.666666666666664%; |
.md-col-3 | (min-width: 52em) width: 25%; |
.md-col-4 | (min-width: 52em) width: 33.33333333333333%; |
.md-col-5 | (min-width: 52em) width: 41.66666666666667%; |
.md-col-6 | (min-width: 52em) width: 50%; |
.md-col-7 | (min-width: 52em) width: 58.333333333333336%; |
.md-col-8 | (min-width: 52em) width: 66.66666666666666%; |
.md-col-9 | (min-width: 52em) width: 75%; |
.md-col-10 | (min-width: 52em) width: 83.33333333333334%; |
.md-col-11 | (min-width: 52em) width: 91.66666666666666%; |
.md-col-12 | (min-width: 52em) width: 100%; |
.lg-col | (min-width: 64em) float: left; -moz-box-sizing: border-box; box-sizing: border-box; |
.lg-col-right | (min-width: 64em) float: right; -moz-box-sizing: border-box; box-sizing: border-box; |
.lg-col-1 | (min-width: 64em) width: 8.333333333333332%; |
.lg-col-2 | (min-width: 64em) width: 16.666666666666664%; |
.lg-col-3 | (min-width: 64em) width: 25%; |
.lg-col-4 | (min-width: 64em) width: 33.33333333333333%; |
.lg-col-5 | (min-width: 64em) width: 41.66666666666667%; |
.lg-col-6 | (min-width: 64em) width: 50%; |
.lg-col-7 | (min-width: 64em) width: 58.333333333333336%; |
.lg-col-8 | (min-width: 64em) width: 66.66666666666666%; |
.lg-col-9 | (min-width: 64em) width: 75%; |
.lg-col-10 | (min-width: 64em) width: 83.33333333333334%; |
.lg-col-11 | (min-width: 64em) width: 91.66666666666666%; |
.lg-col-12 | (min-width: 64em) width: 100%; |
.table | display: table; width: 100%; |
.table-cell | display: table-cell; vertical-align: middle; |
.table-fixed | table-layout: fixed; |
.sm-table | (min-width: 40em) display: table; width: 100%; |
.sm-table-cell | (min-width: 40em) display: table-cell; vertical-align: middle; |
.md-table | (min-width: 52em) display: table; width: 100%; |
.md-table-cell | (min-width: 52em) display: table-cell; vertical-align: middle; |
.lg-table | (min-width: 64em) display: table; width: 100%; |
.lg-table-cell | (min-width: 64em) display: table-cell; vertical-align: middle; |
body | color: #333; background-color: white; |
a | color: #0076df; text-decoration: none; |
a:hover | text-decoration: underline; |
pre, code | background-color: #eee; border-radius: 3px; |
hr | border: 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc; |
.dark-gray | color: #333; |
.white | color: white; |
.blue | color: #0076df; |
.mid-gray | color: #777; |
.light-gray | color: #ccc; |
.lighter-gray | color: #eee; |
.red | color: #f95020; |
.green | color: #00d930; |
.yellow | color: #ffdc00; |
.bg-dark-gray | background-color: #333; |
.bg-white | background-color: white; |
.bg-blue | background-color: #0076df; |
.bg-mid-gray | background-color: #777; |
.bg-light-gray | background-color: #ccc; |
.bg-lighter-gray | background-color: #eee; |
.bg-red | background-color: #f95020; |
.bg-green | background-color: #00d930; |
.bg-yellow | background-color: #ffdc00; |
.bg-darken-1 | background-color: rgba(0, 0, 0, .0625); |
.bg-darken-2 | background-color: rgba(0, 0, 0, .125); |
.bg-darken-3 | background-color: rgba(0, 0, 0, .25); |
.bg-darken-4 | background-color: rgba(0, 0, 0, .5); |
.border | border-style: solid; border-width: 1px; border-color: #ccc; |
.border-top | border-top-style: solid; border-top-width: 1px; border-top-color: #ccc; |
.border-right | border-right-style: solid; border-right-width: 1px; border-right-color: #ccc; |
.border-bottom | border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc; |
.border-left | border-left-style: solid; border-left-width: 1px; border-left-color: #ccc; |
.rounded | border-radius: 3px; |
.circle | border-radius: 50%; |
.field-light | background-color: white; -webkit-transition: box-shadow .2s ease; transition: box-shadow .2s ease; border-style: solid; border-width: 1px; border-color: #ccc; border-radius: 3px; |
.field-light:focus | outline: none; border-color: #0076df; box-shadow: 0 0 2px rgba(0, 118, 223, .5); |
.field-light:disabled | color: #777; background-color: rgba(0, 0, 0, .125); |
.field-light:read-only:not(select) | background-color: rgba(0, 0, 0, .125); |
.field-light:invalid | border-color: #f95020; |
.field-light.has-success | border-color: #00d930; |
.field-light.has-warning | border-color: #ffdc00; |
.field-light.has-error | border-color: #f95020; |
.radio-light, .checkbox-light | -webkit-transition: box-shadow: .2s ease; transition: box-shadow: .2s ease; |
.radio-light | border-radius: 50%; |
.radio-light:focus, .checkbox-light:focus | outline: none; box-shadow: 0 0 2px rgba(0, 118, 223, .5); |
.table-light th, .table-light td | border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc; |
.button-blue | color: white; background-color: #0076df; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color; |
.button-blue:hover | opacity: .875; |
.button-blue:active | box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25); |
.button-blue:focus | outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 1px 4px rgba(0, 118, 223, .5); |
.button-blue:disabled, .button-blue.disabled | opacity: .5; |
.button-blue-outline | color: #0076df; background-color: transparent; border-radius: 3px; box-shadow: inset 0 0 0 2px #0076df; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color; |
.button-blue-outline:hover | color: white; background-color: #0076df; |
.button-blue-outline:active | box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25); |
.button-blue-outline:focus | outline: none; box-shadow: inset 0 0 0 2px #0076df, 0 0 0 2px rgba(255, 255, 255, .5), 0 0 1px 4px rgba(0, 118, 223, .5); |
.button-blue-outline:disabled, .button-blue-outline.disabled | color: #0076df; background-color: transparent; opacity: .5; |
.button-gray | color: white; background-color: #777; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color; |
.button-gray:hover | opacity: .875; |
.button-gray:active | box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25); |
.button-gray:focus | outline: none; box-shadow: 0 0 0 2px white, 0 0 1px 4px rgba(0, 118, 223, .5); |
.button-gray:disabled, .button-gray.disabled | opacity: .5; |
.button-red | color: white; background-color: #f95020; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color; |
.button-red:hover | opacity: .875; |
.button-red:active | box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25); |
.button-red:focus | outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 1px 4px rgba(249, 80, 32, .5); |
.button-red:disabled, .button-red.disabled | opacity: .5; |