Step 002

Bars

The first element to introduce are the bar and its variant pillbar. There are different display modes for elements to achieve a colored rectangle, and add a label. The last page already showed the simplest form, a specially designed inline span. Here follow the pillbar variant, and other subforms that together can be used to create complex bars in between with regular inline text.

These are all the text sizes again, paired with inline "pill" bars of identical height. The height of each particular size bar is made to correspond to the height of the font-face. These where tedious but simple to do.

Spans:

TinySP-TN

XX-SmallSP-2XSM

X-SmallSP-XSM

SmallSP-SM

RegularSP-MED

LargeSP-LRG

X-LargeSP-XLRG

XX-LargeSP-2XLRG

XXX-LargeSP-3XLRG

XXXX-LargeSP-4XLRG

XXXXX-LargeSP-5XLRG

To make bars not dependent on character size, the blockbar subclass uses the inline-box display mode. Like the inline mode, inline-box is a bit quirky. Inline-box has the oddity that it does not vertical-align correctly when empty. It is easy to reproduce but there must be something triggered by content, similary to span. A span does not display at all without a content, the inline-box just v-aligns differently (or not at all). Bot quirks are remedied by adding some invisible content by CSS. Still, some alignment issues here. Probably need to look at bounding box a bit.

Spans and bars:

PB-TNPB-TNTN:

PB-2XSMPB-2XSM2XSM:

PB-XSMPB-XSMXSM:

PB-SMPB-SMSM:

PB-MEDPB-MEDMED:

PB-LRGPB-LRGLRG:

PB-XLRGPB-XLRGXLRG:

PB-2XLRGPB-2XLRG2XLRG:

PB-3XLRGPB-3XLRG3XLRG:

PB-4XLRGPB-4XLRG4XLRG:

PB-5XLRGPB-5XLRG5XLRG:

Time to use flexbox.

PB-TNPB-TNTN

PB-2XSMPB-2XSM2XSM

PB-XSMPB-XSMXSM

PB-SMPB-SMSM

PB-MEDPB-MEDMED

PB-LRGPB-LRGLRG

PB-XLRGPB-XLRGXLRG

PB-2XLRGPB-2XLRG2XLRG

PB-3XLRGPB-3XLRG3XLRG

PB-4XLRGPB-4XLRG4XLRG

PB-5XLRGPB-5XLRG5XLRG

Pillbar examplesPillbar with no title

Ea eu do labore veniam excepteur non irure sunt aliqua. Nulla laborum ex voluptate sint excepteur est excepteur. Cupidatat excepteur aliqua esse labore aliqua enim exercitation cupidatat.

Adipisicing incididunt esse in ut esse quis. Mollit velit in occaecat proident eiusmod occaecat eu minim amet esse id irure eiusmod ea. Cupidatat ea elit amet sit pariatur culpa nostrud est consequat tempor ex laboris enim quis. Cupidatat do officia et adipisicing pariatur duis ipsum nostrud irure. Ea do nulla anim cillum ad sint do non consectetur reprehenderit excepteur. Et magna est nostrud consectetur cupidatat tempor deserunt qui tempor culpa labore aliquip tempor. Anim dolore mollit laborum est proident velit est magna ea nisi sint do mollit. Eu ipsum non anim ad mollit adipisicing et laboris eu voluptate laborum sint cupidatat velit aute. Reprehenderit excepteur quis ullamco incididunt deserunt nulla aliqua sint quis.

Nostrud excepteur nisi cupidatat minim commodo qui amet exercitation aute duis voluptate cillum tempor ut. Excepteur nostrud eu et consequat veniam occaecat amet officia culpa labore ea sit culpa adipisicing. Laboris nulla incididunt nostrud reprehenderit in cillum officia excepteur dolore et reprehenderit. Voluptate ea laboris voluptate ea anim do tempor do. Eu labore voluptate ad irure cillum ut enim amet nostrud incididunt veniam.

Cupidatat cupidatat in exercitation in officia pariatur tempor sint qui mollit in. Tempor non excepteur occaecat veniam incididunt irure in occaecat consectetur est. Dolor sit non Lorem proident laborum sunt nisi sit adipisicing aliquip cillum laborum. Proident adipisicing in nostrud mollit adipisicing commodo magna reprehenderit et ullamco eiusmod pariatur. Cupidatat tempor ad occaecat occaecat sunt et. Laborum aute nostrud nulla magna ex amet nostrud nulla nisi magna voluptate consequat voluptate deserunt veniam. Duis nisi qui ex ullamco deserunt ea est. Ipsum do proident quis commodo do mollit dolore aliqua ad. Irure adipisicing ut veniam ut aute deserunt incididunt nostrud deserunt. Ipsum non incididunt deserunt sunt veniam ea fugiat consectetur. Commodo proident mollit cillum dolore cillum consectetur occaecat incididunt occaecat laborum proident incididunt ex.

Officia cupidatat ex fugiat do occaecat ut cillum aute commodo. Esse culpa laborum do voluptate ad aliqua culpa cillum adipisicing ipsum irure elit. Cupidatat incididunt ut nostrud voluptate ullamco consequat magna qui cillum elit tempor. Est nulla Lorem deserunt duis in quis proident. Eiusmod mollit esse qui ad nisi officia irure et velit do excepteur ullamco consequat ea. Excepteur sit adipisicing amet mollit ea culpa amet cillum quis excepteur fugiat nostrud Lorem. Nostrud exercitation elit adipisicing aute exercitation amet nulla anim minim deserunt ea. Id nostrud eu cupidatat irure fugiat deserunt elit enim mollit nulla deserunt elit nostrud tempor esse.

The End