Plain CSS for skeuomorphic interfaces in the style of Mac OS X Aqua and iOS before version 7: metal, glass, leather, wood, felt, linen, denim, paper (plain, lined and grid), paper bag, cardboard, cork, cardstock, blackboard, chalkboard and plastic. No JavaScript required, no build step.
Fam is meant to be short and sweet, and is short for Familiar. It also stands for Fam Adds Materials. Use it as a full UI framework, or just add a texture or material behind a minimalist, flat UI of your own. See Two ways to use it.
Skeuomorphism exists to make an interface feel familiar. A recessed field invites typing, a raised button invites a press and a switch looks like a switch. Fam builds those cues from real photographs of materials, processed into seamless tiles and credited in CREDITS.md, not from gradients that imitate them.
Materials tile to make textured interfaces responsive. A tile repeats at its natural size and is never stretched, so any box in any shape gets the material. There are no images per breakpoint, and a phone loads the same files as a desktop.
Textures are compact tiles to load fast. Each is between 12 KB and 85 KB, and a material you do not use is never downloaded.
Why use it
Beyond the look:
- Light. The notes example (
examples/notes.html) loads 250 KB of images and 107 KB of CSS (17.2 KB gzipped), the same at 375px and 1440px wide. There is no JavaScript.
- Responsive without extra work. Tiles repeat to fill any box. Photo frames are nine-sliced and the leather bar's stitched edge repeats along its length, so both fit any width.
- Accessible, and tested. Contrast is measured on the rendered pixels against WCAG AA, every control has a keyboard focus ring, and forced colors, disabled states and missing backdrop blur are handled. See Accessibility.
- Easy to adopt. One stylesheet,
fam- classes and --fam- custom properties. Because it is plain CSS, it sits alongside whatever framework you use.
- Quick to recolor. One variable tints felt (
--fam-felt-tint), linen (--fam-linen-tint), denim (--fam-denim-tint) or cardstock (--fam-cardstock-tint).
Two ways to use it
- As a UI framework. Use the buttons, switches, tabs, fields, lists, navigation and glass. Every control is built from the materials, so a whole interface can be Fam.
- As texture for a flat UI. Keep your own minimalist components and put a material behind them: cork, wood, felt, leather or any other. You add one class, and only the tile you use is downloaded.
<div class="fam-cork" style="padding:32px">
<!-- your own flat components -->
<div class="card">...</div>
</div>
Showcase
A tour of the materials in five pages: https://electrikmilk.github.io/fam/
- Home: the two ways to use Fam (as a framework, or as texture behind a flat UI) and a switcher that shows one pairing at a time, with the classes it uses: wood and felt, leather and paper, metal and plastic, the plastic panel, legal pad and leather, photo frames and cork, and glass.
- Materials: every texture, the felt, linen, denim and cardstock tints, the gloss, rounding, shadow and reflection effects, plus navigation bars, photo frames with cork, pins and tape, and engraved text.
- Controls: documentation for each kind of control, with its classes and every variant, including its disabled look: buttons (plastic, metal, brushed metal, wood, leather, glossy and glass, and button groups), radio buttons, tabs, knobs and dials, switches and toggle LEDs, LEDs, progress tubes, fields (glass, search pill and recessed), and lists and tables.
- Glass: clear, mixed and frosted glass, the ambient glow and refraction, and a glass lens that follows your cursor with knobs to tune it.
- Examples: the pages in
examples/.
The showcase's own text is set in Lato, loaded from Google Fonts. The kit itself loads no fonts.
To open it locally, build the kit and open showcase/index.html in a browser:
npm run build
npm run site assembles the folder that GitHub Pages publishes (_site/), and .github/workflows/pages.yml publishes it on every push to main.
Use it
Link the bundle and wrap your UI in .fam (it only sets the font and its size):
<link rel="stylesheet" href="node_modules/fam-ui/dist/fam-ui.css">
<div class="fam">...</div>
With a bundler you can also write @import "fam-ui"; in CSS or import "fam-ui"; in JavaScript; both resolve to the bundle.
One optional extra needs JavaScript: import "fam-ui/refraction"; makes glass bend along its own corner radius (see Glass). Leave it out and everything else works the same.
The textures are separate files in assets/ and are only fetched when a class that uses them is on the page. If you copy the stylesheet somewhere else, copy assets/ too and keep it next to the folder that holds the stylesheet, because the CSS refers to ../assets/.
The same CSS is also split into layers in css/: tokens, materials, effects, components, templates. Load them in that order.
Class names start with fam- and custom properties with --fam-.
Materials
Put a material class on any box:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
