A tint, never a colour
A surface is a two-stop gradient of translucent white — or of the colour it stands for — so light appears to fall across it. A solid fill would stop the light dead, so there are none.
Version 2.0 · no build step
Interfaces made of glass, not of rectangles.
LiquidIce is one stylesheet and one optional script. Every surface in it is a tint you can see through, laid over a blur of whatever is behind it, edged with a single pixel of gradient. There is no flat colour anywhere in the framework, and nothing is fully opaque.
24 KB of CSS, gzipped
0 dependencies
Apache-2.0 or MIT
Two lines, and you are done
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>No package manager, no compiler, no configuration file. Copy two files onto the server and the whole framework is available.
Three ideas, applied without exception
The whole aesthetic comes from three rules that every single component obeys. Once you know them, you know the framework.
An edge of one pixel
Borders are gradients, brighter where light would catch and almost gone where it would not. They are painted into a masked pseudo-element, because that is the only way to keep a gradient, a radius and a live blur at the same time.
Blur, and then saturate
Every pane blurs what is behind it and pushes the saturation back up. Frosted glass without that second step turns grey, and grey is what makes most attempts at this look cheap.
Everything you would reach for
Buttons, forms, navigation, overlays, feedback, data — the full set, styled by one stylesheet. Below is the real thing, not a picture of it.
Buttons
Forms
A field is a pane pressed into the surface rather than laid on it.
Feedback
Saved. The rim carries the meaning; the pane only hints at it.
Careful. This one has no dismiss button.
Overlays
A dim backdrop is itself blurred, so an overlay does not sit on a photograph of the page — it sits on the page.
Tabs, accordion and table
Tabs, accordions, collapses, carousels, toasts, popovers and scrollspy
are all driven by data-li-* attributes. There is nothing to
initialise: markup added after the page has loaded is wired up on its own.
| Component | Class | Needs JS |
|---|---|---|
| Card | .li-card | no |
| Alert | .li-alert | no |
| Modal | .li-modal-overlay | yes |
| Tabs | .li-nav-tabs | yes |
Because a solid fill stops light. Once one element is opaque it
stops belonging to the same material as everything around it,
and the whole illusion goes with it.
High-contrast mode deliberately breaks every rule above: solid black,
solid white, two-pixel borders, no blur. Someone who needs edges needs
real edges. Reading mode, dyslexia and ADHD typefaces, and five steps of
text scaling are built in as well.
Accessibility is not a plugin
Text scaling, letter spacing, line height, greyscale, high contrast, a
dyslexia-friendly typeface, a low-distraction ADHD mode and a reading mode
ship in the stylesheet. Each is one class on <html>, and the
script remembers the choice.
Take it and build something
Dual-licensed under Apache-2.0 or MIT, whichever suits you. Use it commercially, fork it, rename it — the licence asks for attribution and nothing else.