Fat Fuzzy UI
Introduction
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 components are built using Svelte and SvelteKit, and the structure of the library as well as the way the components are designed are based on the ideas put forth in Algorithmic Design and CUBE CSS.
The library as well as its documentation are still a work in progress and under active development. Thank you for your patience! ❤️
tokens
Tokens are the Design Tokens of the UI library.
They provide the base values used to build Blocks, Layouts, and Compositions.
tokens
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.
Fieldset
InputCheck
InputRadio
InputRange
InputFile
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.
layouts
Burrito
Form input 1
Form input 2
Form input 3
Reveal
Form input 1
Form input 2
Form input 3
RevealAuto
Form input 1
Form input 2
Form input 3
Stack
Card 1
Card 2
Card 3
Switcher
Card 1
Card 2
Card 3
Sidebar
Card 1
Card 2
Card 3
This is some text that shows you how text content will adapt inside a chosen Layout. Layouts are components that are used to organize how content is displayed on the screen, and designed to work in harmony with the browser's built-in layout algorithms.
recipes
Recipes are components that provide solutions to common UI usage patterns, and are created using Blocks, Layouts, and other Recipes.