All documentationHow to use
BooshDESIGN documentation
How to use
BooshDESIGN
Draw the page on a canvas that is a real browser, and get real HTML and CSS out, because that is what you drew.
Getting started
Install it, find your way around, and do the first useful thing.
Guides
How to do each job, one page at a time.
- Positioning elementsFlow, free placement and pinning — how an element decides where it sits.
- Sizing elementsHug, Fill and Fixed, and when it is right to type a number instead.
- Laying out a containerFlow direction, alignment, distribution, gap and padding.
- Element layersThe two extra boxes every element has, and what they are for.
- Using colourPalettes, assignments, gradients and patterns — all of it from your own tokens.
- Working with typeThe type scale, and the times it is right to size something by hand.
- FontsBrowsing Google Fonts, collecting them into the project, and using one.
- Adding imagesPlacing a picture, using one as a background, and adjusting it.
- Hover, focus and activeStyling how something responds when a person points at it or tabs to it.
- EffectsCut out, frosted glass and fading edges — designer intentions with real CSS behind them.
- Drawing graphicsThe pen, the pencil, and turning a drawing into an asset you can place.
Reference
The details worth looking up rather than remembering.
Looking for what it does rather than how to use it?See BooshDESIGN.