22 lines of CSS == awesome rapid prototyping
hvbox.css makes it easy to use flexbox directly in HTML.
tl;dr example
An input like:
<div id=app hbox=stretch>
<div id=sidebar flex=0>...</div>
<div id=content vbox=stretch>
<div id=toolbar flex=0>...</div>
<div id=editor>...</div>
<div id=status flex=0>...</div>
</div>
</div>
…produces an output like:
┌───────┬────────────────────────────┐
│ │ │
│ ├────────────────────────────┤
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
│ ├────────────────────────────┤
│ │ │
└───────┴────────────────────────────┘
Simply give an element an hbox
attribute for horizontal, or vbox
for vertical.
The presence of the attribute is enough to trigger flexbox on the element and its children.
You can control justify-content
and align-items
by giving the attribute a value, which is
either one or two words, separated by a hyphen. (and since unquoted hyphens are valid in HTML, you don't even have to put the value in quotes 🥳)
If there is only one word, the property applies to both justify-content
and align-items
. If two words, the first goes to justify-content
and the last to align-items
.
The properties are:
start
→start
end
→end
center
→center
stretch
→stretch
around
→space-around
evenly
→space-evenly
between
→space-between
baseline
→baseline
(only applies toalign-items
)
To control children behavior, include a flex
attribute on the child, with a value between 0-5. This simply sets the flex
CSS property on the child. For instance, <div flex=0></div>
applies flex: 0
to the div.
With these few things, you can create very complex layouts with very little typing. Great for prototyping.
Simply copy-paste the contents of hbox.css
into the top of your css file. Since it's such a small amount of code, here it is for convenience:
[vbox], [hbox] {display: flex;}
[vbox] {flex-direction: column;}
[hbox] {flex-direction: row;}
[vbox^="start" i], [hbox^="start" i] { justify-content: start; }
[vbox^="end" i], [hbox^="end" i] { justify-content: end; }
[vbox^="center" i], [hbox^="center" i] { justify-content: center; }
[vbox^="around" i], [hbox^="around" i] { justify-content: space-around; }
[vbox^="even" i], [hbox^="even" i] { justify-content: space-evenly; }
[vbox^="between" i], [hbox^="between" i] { justify-content: space-between; }
[vbox^="stretch" i], [hbox^="stretch" i] { justify-content: stretch; }
[vbox$="start" i], [hbox$="start" i] { align-items: start; }
[vbox$="end" i], [hbox$="end" i] { align-items: end; }
[vbox$="center" i], [hbox$="center" i] { align-items: center; }
[vbox$="around" i], [hbox$="around" i] { align-items: space-around; }
[vbox$="even" i], [hbox$="even" i] { align-items: space-evenly; }
[vbox$="between" i], [hbox$="between" i] { align-items: space-between; }
[vbox$="stretch" i], [hbox$="stretch" i] { align-items: stretch; }
[vbox$="baseline" i], [hbox$="baseline" i] { align-items: baseline; }
[vbox] > *, [hbox] > * { flex: initial; }
[vbox^="stretch"] > *, [hbox^="stretch"] > * { flex: auto; }
[flex="0"]{flex:0;} [flex="1"]{flex:1;} [flex="2"]{flex:2;}
[flex="3"]{flex:3;} [flex="2"]{flex:4;} [flex="5"]{flex:5;}
You may also be interested in the additional contents of hbox-reset.css
which adds a few things that make layout easier. Again for convenience:
*, *:before, *:after {margin:0; padding:0; box-sizing:border-box; position:relative;}
html, body {width:100%; height:100%;}
I've been using these in all my recent prototypes and quick-and-dirty utilities.
Enjoy! 🥂