Materials

One class for every texture

Each material is a single class on any box. Felt, linen, denim and cardstock take a tint. Below the textures are the effects (gloss, rounding, shadows and reflections), the navigation bars, photo frames and engraved text made from them, each with its markup and a button that copies it.

Textures: one class each

fam-felt
fam-linen
--fam-linen-tint
fam-denim
--fam-denim-tint
fam-wood
fam-wood-paneled
fam-metal-brushed
fam-metal
fam-leather
fam-leather-pebbled
fam-leather-pebbled--brown
fam-paper
fam-paper-bag
fam-lined-paper
fam-grid-paper
fam-blackboard
fam-chalkboard
fam-cork
fam-cardboard
fam-cardstock
--fam-cardstock-tint
fam-legal-pad
fam-leather-frame
fam-leather-frame--brown

Tinted materials in any color

--fam-tint on fam-felt

green
blue
burgundy
purple
gold

--fam-linen-tint on fam-linen

green
blue
burgundy
purple
gold

--fam-denim-tint on fam-denim

green
blue
burgundy
purple
gold

--fam-cardstock-tint on fam-cardstock

green
blue
burgundy
purple
gold

build your own fam-felt fam-linen fam-denim fam-wood fam-wood-paneled fam-metal-brushed fam-metal fam-leather fam-leather-pebbled fam-paper fam-paper-bag fam-lined-paper fam-grid-paper fam-blackboard fam-chalkboard fam-cork fam-cardboard fam-cardstock fam-legal-pad fam-leather-frame

Effects

Gloss, rounding, shadows and reflections are classes you add to any box, whatever its texture.

Gloss

fam-gloss-none
fam-gloss-soft
fam-gloss-strong

Rounding

round-sm
round-md
round-lg
round-pill

Shadows

shadow-sm
shadow-md
shadow-lg
shadow-inset

Cast shadows

cast-sm
cast-md
cast-lg

Grounded shadows

grounded-sm
grounded-md
grounded-lg

Reflections

A lone tree on a green hill under a cloudy sky A snow leopard with snow on its fur, looking toward the camera A spiral galaxy glowing blue and white among stars Streaks of purple and pink light across a dark starry sky A snow-covered mountain beside a sunlit rock face A clownfish peering out from green sea anemone tentacles

Reflections on a shelf

A lone tree on a green hill under a cloudy sky A snow leopard with snow on its fur, looking toward the camera A spiral galaxy glowing blue and white among stars Streaks of purple and pink light across a dark starry sky A snow-covered mountain beside a sunlit rock face A clownfish peering out from green sea anemone tentacles

combine effects fam-pill fam-gloss-soft fam-round-md fam-shadow-md

reflections fam-reflect fam-shelf Put fam-reflect on a control, a photo or a frame for a glossy floor reflection that fades out below it, and fam-shelf on the box they stand in for a shiny floor. The reflection takes no layout space, so leave padding under it. Firefox does not support it and shows none.

cast and grounded shadows fam-cast-md fam-grounded-md Put either on an inline-block or block wrapper with the same radius when the element has shading of its own or clips its overflow, such as a button or the pill.

Navigation bars

Wood, paneled wood, paper, cardstock, metal, brushed metal and stitched tan, black and brown leather bars share one set of items.

HTML
<nav class="fam-nav fam-wood" aria-label="Wood navigation">
  <span class="fam-nav-brand">fam</span>
  <span class="fam-nav-item" aria-current="page">Home</span>
  <span class="fam-nav-item">Library</span>
  <span class="fam-nav-item">About</span>
</nav>
<!-- Swap fam-wood for fam-wood-paneled, fam-paper, fam-cardstock, fam-metal-brushed, fam-metal, fam-leather-bar, fam-leather-bar fam-leather-bar--black or fam-leather-bar fam-leather-bar--brown -->

Photo frames and cork

Four ways to frame a portrait photo, six for a landscape or square one, and a corkboard inside a wood frame.

A lone tree on a green hill under a cloudy sky
A snow leopard with snow on its fur, looking toward the camera
A spiral galaxy glowing blue and white among stars
Streaks of purple and pink light across a dark starry sky
A snow-covered mountain beside a sunlit rock face
A clownfish peering out from green sea anemone tentacles
HTML
<figure class="fam-print-frame fam-paper"><img src="photo.jpg" alt="A lone tree on a hill"></figure>
<figure class="fam-print-frame fam-cardstock"><img src="photo.jpg" alt=""></figure>
<figure class="fam-wood-frame"><img src="photo.jpg" alt=""></figure>
<figure class="fam-wood-frame fam-wood-frame--glossy"><img src="photo.jpg" alt=""></figure>
<div class="fam-wood-frame"><div class="fam-cork" style="height: 150px"></div></div>

Engraved text

Text pressed into metal and brushed metal, leather, dark leather, wood and paneled wood.

SETTINGS
OPTIONS
Notebook
Journal
Ledger
Diary
LIBRARY
PLANKS
HTML
<div class="fam-metal-brushed" style="display: grid; place-items: center; height: 110px"><span class="fam-engraved-metal">SETTINGS</span></div>
<div class="fam-metal" style="display: grid; place-items: center; height: 110px"><span class="fam-engraved-metal">OPTIONS</span></div>
<div class="fam-leather" style="display: grid; place-items: center; height: 110px"><span class="fam-engraved-leather">Notebook</span></div>
<div class="fam-leather-pebbled" style="display: grid; place-items: center; height: 110px"><span class="fam-engraved-leather">Journal</span></div>
<div class="fam-leather-pebbled fam-leather-pebbled--black" style="display: grid; place-items: center; height: 110px"><span class="fam-engraved-leather-dark">Ledger</span></div>
<div class="fam-leather-pebbled fam-leather-pebbled--brown" style="display: grid; place-items: center; height: 110px"><span class="fam-engraved-leather-dark">Diary</span></div>
<div class="fam-wood" style="display: grid; place-items: center; height: 110px"><span class="fam-engraved-wood">LIBRARY</span></div>
<div class="fam-wood-paneled" style="display: grid; place-items: center; height: 110px; background-position: 0 -39px"><span class="fam-engraved-wood-paneled">PLANKS</span></div>