MelangeCSS Reference

Current Version: 1.0.0-RC5

Display

Handles basic dispaly properties other than Flexbox. Flexbox is part of the Flexbox grouping.

Properties

Appearance

Setting appearance to 'none' is useful to create accessible but visually pleasing form elements.

appearance-none
Appearance None
 
.appearance-none {
  appearance: none;
}
appearance-auto
Appearance Auto
 
.appearance-auto {
  appearance: auto;
}
Display
db
Display Block
 
.db {
  display: block;
}
db
db
db
di
Display Inline
 
.di {
  display: inline;
}
di
di
di
dib
Display Inline Block
 
.dib {
  display: inline-block;
}
dib
dib
dib
dn
Display None
 
.dn {
  display: none;
}
dn
dn
dn
dfr
Display Flow Root / Clearfix
 
.dfr {
  display: flow-root;
}
With display: flow-root, the black box is safe.
 
Without display: flow-root, the black box contains only pain.
 
Screen Readers

For helping with markup needed for screen readers that you may not want shown to users using visual browsers

sr-only
Screen Readers Hide in browser UI
 
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
undo-sr-only
Screen Readers Undo sr-only, e.g. at a different breakpoint
 
.undo-sr-only {
  position: static;
  padding: 0;
  margin: 0;
  clip: auto;
  white-space: normal;
  width: auto;
  height: auto;
  overflow: visible;
}
Table Display
dt
Table Display Table
 
.dt {
  display: table;
}
dtc
Table Display Cell
 
.dtc {
  display: table-cell;
}
dtrow
Table Display Row
 
.dtrow {
  display: table-row;
}
dtrow-group
Table Display Row Group
 
.dtrow-group {
  display: table-row-group;
}
dtcolumn
Table Display Column
 
.dtcolumn {
  display: table-column;
}
dtcolumn-group
Table Display Column Group
 
.dtcolumn-group {
  display: table-column-group;
}
collapse
Table Display Border Collapse
 
.collapse {
  border-collapse: collapse;
  border-spacing: 0;
}