MelangeCSS Reference

Current Version: 1.0.0-RC4

Typography

Text rendering can be tricky, however the use of a fixed font scale and a limited number of other tranformations for letter spacing and leading can provide myriad combinations to meet most needs without having to endlessly tweak precise values. The result of the fixed set up typographic features is general consistency and harmony regardless of the styles chosen.

Properties

Aliases

These violate the naming conventions, but are convienient as aliases for more commonly-used needs.

b
Aliases Bold
 
.b {
  font-weight: bold;
}
The spice must flow!
i
Aliases Italic
 
.i {
  font-style: italic;
}
The spice must flow!
sc
Aliases Small Caps
 
.sc {
  font-variant: small-caps;
}
The spice must flow!
u
Aliases Underline
 
.u {
  text-decoration: underline;
}
The spice must flow!
p
Aliases Content paragraph with measure and lh-copy
 
.p {
  max-width: var(--mg-tw);
  line-height: var(--mg-lh-copy);
}
“God Emperor of Dune” is often considered the best of the series, however the first book—“Dune”—is the safer bet if you intended to read only one.
Font Families
ff*
ff-sans 
.ff-sans {
  font-family: var(--mg-ff-sans);
}
The spice must flow
ff-serif 
.ff-serif {
  font-family: var(--mg-ff-serif);
}
The spice must flow
ff-mono 
.ff-mono {
  font-family: var(--mg-ff-mono);
}
The spice must flow
ff-cursive 
.ff-cursive {
  font-family: var(--mg-ff-cursive);
}
The spice must flow
ff-fantasy 
.ff-fantasy {
  font-family: var(--mg-ff-fantasy);
}
The spice must flow
Font Scale
f*
Modular Scale
f-1 
.f-1 {
  font-size: var(--mg-fs-1);
}
The spice must flow!
f-2 
.f-2 {
  font-size: var(--mg-fs-2);
}
The spice must flow!
f-3 
.f-3 {
  font-size: var(--mg-fs-3);
}
The spice must flow!
f-4 
.f-4 {
  font-size: var(--mg-fs-4);
}
The spice must flow!
f-5 
.f-5 {
  font-size: var(--mg-fs-5);
}
The spice must flow!
f-6 
.f-6 {
  font-size: var(--mg-fs-6);
}
The spice must flow!
f-7 
.f-7 {
  font-size: var(--mg-fs-7);
}
The spice must flow!
f-8 
.f-8 {
  font-size: var(--mg-fs-8);
}
The spice must flow!
f-9 
.f-9 {
  font-size: var(--mg-fs-9);
}
The spice must flow!
Font Style
fs-normal 
.fs-normal {
  font-style: normal;
}
The spice must flow!
fs-italic
Font Style Italic
 
.fs-italic {
  font-style: italic;
}
The spice must flow!
Font Variant
fv-sc
Font Variant Small Caps
 
.fv-sc {
  font-variant: small-caps;
}
The spice must flow!
fv-normal
Font Variant Normal
 
.fv-normal {
  font-variant: normal;
}
The spice must flow!
Font Weights
fw*
fw-normal 
.fw-normal {
  font-weight: normal;
}
The spice must flow!
fw-bold 
.fw-bold {
  font-weight: bold;
}
The spice must flow!
fw-1 
.fw-1 {
  font-weight: 100;
}
The spice must flow!
fw-2 
.fw-2 {
  font-weight: 200;
}
The spice must flow!
fw-3 
.fw-3 {
  font-weight: 300;
}
The spice must flow!
fw-4 
.fw-4 {
  font-weight: 400;
}
The spice must flow!
fw-5 
.fw-5 {
  font-weight: 500;
}
The spice must flow!
fw-6 
.fw-6 {
  font-weight: 600;
}
The spice must flow!
fw-7 
.fw-7 {
  font-weight: 700;
}
The spice must flow!
fw-8 
.fw-8 {
  font-weight: 800;
}
The spice must flow!
fw-9 
.fw-9 {
  font-weight: 900;
}
The spice must flow!
Indent
indent*
indent-0 
.indent-0 {
  text-indent: 0;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent-1 
.indent-1 {
  text-indent: var(--mg-ident-1);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent-2 
.indent-2 {
  text-indent: var(--mg-ident-2);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent-3 
.indent-3 {
  text-indent: var(--mg-ident-3);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent--1 
.indent--1 {
  text-indent: var(--mg-ident--1);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent--2 
.indent--2 {
  text-indent: var(--mg-ident--2);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent--3 
.indent--3 {
  text-indent: var(--mg-ident--3);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
Leading/Line Height
lh*
lh-solid 
.lh-solid {
  line-height: var(--mg-lh-solid);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
lh-title 
.lh-title {
  line-height: var(--mg-lh-title);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
lh-copy 
.lh-copy {
  line-height: var(--mg-lh-copy);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
Measure

Measure is a convienience for setting max widths appropriate for reading text, and works regardless of font size. It uses ch units to achieve this.

measure*
measure 
.measure {
  max-width: var(--mg-tw);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
measure-wide 
.measure-wide {
  max-width: var(--mg-tw-wide);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
measure-narrow 
.measure-narrow {
  max-width: var(--mg-tw-narrow);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
Text Align
tr
Text Align Right
 
.tr {
  text-align: right;
}
The spice must flow!
tc
Text Align Center
 
.tc {
  text-align: center;
}
The spice must flow!
tl
Text Align Left
 
.tl {
  text-align: left;
}
The spice must flow!
Text Decoration
tdn
Text Decoration None
 
.tdn {
  text-decoration: none;
}
The spice must flow!
hover-tdn
Text Decoration None
 
.hover-tdn:hover {
  text-decoration: none;
}
The spice must flow!
tdu
Text Decoration Underline
 
.tdu {
  text-decoration: underline;
}
The spice must flow!
hover-tdu
Text Decoration Underline
 
.hover-tdu:hover {
  text-decoration: underline;
}
The spice must flow!
tds
Text Decoration Strike
 
.tds {
  text-decoration: line-through;
}
The spice must flow!
hover-tds
Text Decoration Strike
 
.hover-tds:hover {
  text-decoration: line-through;
}
The spice must flow!
tdo
Text Decoration Overline
 
.tdo {
  text-decoration: overline;
}
The spice must flow!
hover-tdo
Text Decoration Overline
 
.hover-tdo:hover {
  text-decoration: overline;
}
The spice must flow!
Text Tranform
ttn
Text Tranform None
 
.ttn {
  text-transform: none;
}
The spice must flow!
ttu
Text Tranform Uppercase
 
.ttu {
  text-transform: uppercase;
}
The spice must flow!
ttl
Text Tranform Lowercase
 
.ttl {
  text-transform: lowercase;
}
The spice must flow!
ttc
Text Tranform Capitalize
 
.ttc {
  text-transform: capitalize;
}
The spice must flow!
Tracking / Letter Spacing
tracked*
tracked 
.tracked {
  letter-spacing: var(--mg-ls);
}
The spice must flow!
tracked-tight 
.tracked-tight {
  letter-spacing: var(--mg-ls-tight);
}
The spice must flow!
tracked-mega 
.tracked-mega {
  letter-spacing: var(--mg-ls-mega);
}
The spice must flow!
tracked-none 
.tracked-none {
  letter-spacing: var(--mg-ls-none);
}
The spice must flow!
Vertical Align

While vertical alignemnt can be specified in artbirary lengbths and percentages, baseline, top, middle, and bottom are sufficient for most use-cases.

va-baseline
Vertical Align Baseline
 
.va-baseline {
  vertical-align: baseline;
}
The spice must flow!
va-middle
Vertical Align Middle
 
.va-middle {
  vertical-align: middle;
}
The spice must flow!
va-top
Vertical Align Top
 
.va-top {
  vertical-align: top;
}
The spice must flow!
va-bottom
Vertical Align Bottom
 
.va-bottom {
  vertical-align: bottom;
}
The spice must flow!
White Space
ws-normal
White Space Normal
 
.ws-normal {
  white-space: normal;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
ws-nowrap
White Space No Wrap
 
.ws-nowrap {
  white-space: nowrap;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
ws-pre
White Space Pre
 
.ws-pre {
  white-space: pre;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.