Basscss / Docs

Kitchen Sink

Demo page for elements and styles.

Button Blue
Button Gray
Button Outline
Button Disabled
Button Disabled
Button Disabled

.col-11
.col-1
.col-10
.col-2
.col-9
.col-3
.col-8
.col-4
.col-7
.col-5
.col-6
.col-6
.sm-col-11
.sm-col-1
.sm-col-10
.sm-col-2
.sm-col-9
.sm-col-3
.sm-col-8
.sm-col-4
.sm-col-7
.sm-col-5
.sm-col-6
.sm-col-6
.md-col-11
.md-col-1
.md-col-10
.md-col-2
.md-col-9
.md-col-3
.md-col-8
.md-col-4
.md-col-7
.md-col-5
.md-col-6
.md-col-6
.lg-col-11
.lg-col-1
.lg-col-10
.lg-col-2
.lg-col-9
.lg-col-3
.lg-col-8
.lg-col-4
.lg-col-7
.lg-col-5
.lg-col-6
.lg-col-6

.sm-show
.sm-show
.md-show
.md-show
.lg-show
.lg-show
.sm-hide
.sm-hide
.md-hide
.md-hide
.lg-hide
.lg-hide
.bg-dark-gray
.bg-mid-gray
.bg-light-gray
.bg-lighter-gray
.bg-white
.bg-blue
.bg-red
.bg-yellow
.bg-green
.bg-darken-1
.bg-darken-2
.bg-darken-3
.bg-darken-4
.border
.border-top
.border-right
.border-bottom
.border-left
Link Button

.dark-gray .mid-gray .light-gray .lighter-gray .white .blue .red .yellow .green

Image
Image

Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

.sm-col.sm-col-6.md-col-5.lg-col-4
.sm-col.sm-col-6.md-col-7.lg-col-8
Centered Column
.col.col-6
.col.col-6
.px2
.px2
Unnested
Nested
Nested
.col-right.col-6
.col.col-6

Hamburger 1

Hamburger 2

Hamburger 3

Hamburger 4

Hamburger 5
Hamburger 6
.inline       { display: inline }
.block        { display: block }
.inline-block { display: inline-block }

.overflow-hidden { overflow: hidden }

.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% }
.m0  { margin:        0 }
.mt0 { margin-top:    0 }
.mr0 { margin-right:  0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left:   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) }

.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) }

.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) }

.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) }

.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); }

.mx-auto { margin-left: auto; margin-right: auto; }
.p1  { padding:       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) }
.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) }
.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) }
.py4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
.px4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }
.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;
}

Responsive Line Break
To Control Wrapping

Visible from --breakpoint-sm and up.

Hidden from --breakpoint-sm and up.

.sm-show, .md-show, .lg-show {
  display: none !important
}
@media (--breakpoint-sm) {
  .sm-show { display: block !important }
}
@media (--breakpoint-md) {
  .md-show { display: block !important }
}
@media (--breakpoint-lg) {
  .lg-show { display: block !important }
}
.hide { display: none !important }
@media (--breakpoint-sm) {
  .sm-hide { display: none !important }
}
@media (--breakpoint-md) {
  .md-hide { display: none !important }
}
@media (--breakpoint-lg) {
  .lg-hide { display: none !important }
}
Artist Album Release Date
Huey Lewis and the News Sports 1983
Phil Collins No Jacket Required 1985
Peter Gabriel So 1986

.table-cell

For vertically centered content

.table-cell

.table-cell

For vertically centered content

.table-cell
.table-cell
Image

Flag Body

The full-width utility makes the table object behave like the flag object.

.table-cell.col-7

For vertically centered content

.table-cell.col-5

.sm-table-cell

Only kicks in above the small breakpoint

.sm-table-cell

.lg-table-cell

Only kicks in above the large breakpoint

.lg-table-cell
Artist Album Release Date
Huey Lewis and the News Sports 1983
Phil Collins No Jacket Required 1985
Peter Gabriel So 1986

Pastrami 1

Pastrami 2

Pastrami 3

Pastrami 4

Pastrami 5

Pastrami 6

Bold

Regular

Italic

Caps

Left align

Center

Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.