Fat Fuzzy UI is a design guide and component library and that aims to maximize use HTML and CSS’s native capabilities to produce harmonious and robust designs.
The underlying intention of all this is to build interfaces that can adapt to all sorts of browser environments and display conditions so that users may happily access the content and functionality of the app (a website being a specific kind of app).
The structure of the library as well as the way the components are designed draws heavily from the following sources:
This library and the rest of the work on this website were conceived as a research project and are not specifically intended for distribution, but if you are curious as to how it’s built, the code is available under an MIT license here:
tokens
These are the Design Tokens of the UI library.
They provide the base design values used to build Blocks, Layouts, and Recipes.
tokens
Color
Base colors
Theme colors
primary
accent
highlight
Semantic colors
info
success
warning
error
Typography
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
blocks
Blocks are the smallest self contained components that provide a piece of information, action, or navigation option to the user of the app.
blocks
Button
Expand
Switch
Toggle
Feedback
Too swift arrives as tardy as too slow.
InputCheck
InputRadio
InputRange
InputFile
Magic
layouts
In CUBE CSS Layouts are compositions. This means that Layouts are components used to structure and organize the content and interface elements it contains.
recipes
Recipes are components that provide solutions to common UI usage patterns, and are created using Blocks, Layouts, and other Recipes.