Backgrounds

Source file

src/css/backgrounds.css

View on GitHub

https://github.com/pmbrown/ming-css/blob/main/src/css/backgrounds.css

Included with:

• ming.css
• ming.min.css
• ming.mono.css
• ming.mono.min.css

Light & dark (anchor)

The fixed light & dark utilities are demonstrated throughout the site and work with any styles, components or utilities that include color-scheme friendly color values.

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

Variable colors (anchor)

The '.bg' utility is a variable classes for creating background and foreground colors in real-time:

<div class="bg py-2" style="--bg:RoyalBlue;--fg:#fff;">RoyalBlue</div>
<div class="bg py-2" style="--bg:DarkGreen;--fg:#fff;">DarkGreen</div>
<div class="bg py-2" style="--bg:Firebrick;--fg:#fff;">Firebrick</div>

The '.fg' utility works the same but only includes the foreground color:

Brand

<p class="fg h5" style="--fg:light-dark(blue, gold)">Brand</p>

Wildcards (anchor)

The [class*=bg-] and [class*=fg-] wildcards are for creating color utilities in custom CSS:

.fg-brand {
  --fg: light-dark(blue, gold);
}
.bg-royalblue {
  --fg: #fff;
  --bg: royalblue;
}
.bg-darkgreen {
  --fg: fff;
  --bg: darkgreen;
}
.bg-firebrick {
  --fg: fff;
  --bg: firebrick;
}

Mono colors (anchor)

Mono color utilities leverage the wildcard classes with fixed white and black values:

<div class="bg-white py-2">.bg-white</div>
<div class="bg-black py-2">.bg-black</div>
<div class="fg-white bg-crimson py-2" style="--bg:Crimson;">.fg-white</div>
<div class="fg-black bg-bisque py-2" style="--bg:Bisque;">.fg-black</div>

Primary colors (anchor)

The backgrounds color classes use the primary colors variables and leverage the [class*=bg-] wildcard to apply the colors, the source file is included separately.

Source file

src/css/colors/color-backgrounds.css

View on GitHub

https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-backgrounds.css

Included with:

• ming.css
• ming.min.css

The fixed colors leverage the [class*=bg-] wildcard using the primary color variables.

Palette (anchor)