Translucent Accordions
Animating details-summary revisited
Fluid-responsive demos
- Typical layout demo
- CodePen demo
- Flexbox demo
- As used on Tesco's Food Love Stories
- Codepen: Fluid-responsive property calculator
Fluid typography references
- Responsive fonts
- Precise control over responsive typography
- Flexible typography with CSS locks
- Viewport sized typography
- Viewport Unit Based Typography
- Fluid Responsive Typography With CSS Poly Fluid Sizing
- Simplified Fluid Typography
- Fluid Typography
- Truly Fluid Typography With VH And VW Units
- Responsive Type and More With Only CSS
- Flexible Type
- Fluid Type
- Viewport Sized Typography
- Responsive Display Text
- Icon based on: Studio Calculator Icon
- Copy to clipboard: Clipboard.js
Update history
Update 2021:
- Replaced key detection with KeyboardEvent API to resolve
event.which
deprecation issues - Negative values enabled on the range inputs
- Cut & Paste enabled on input fields
- Multi-keyboard types accomodated: Qwerty, Dvorak, Azerty, etc
- Numeric keypad enabled
- Added a comment referencing the tools' url
- A few Accessibility improvements.
Update 2020:
- Variable property name
- CSS clamp option
- CSS min/max option
- Safari resize fix option
- Longhand calculation option
- Settings preserved with localStorage
- Improved HTML form semantics
- Prevention of non-numeric inputs
- Grid and Flexbox layout
- Limited to 4 decimal places.