DOM Flair

The goal of this project is to solve any or most html layout issues in intuitive ways via the attribute flair without having to think much about CSS. For example <div flair="col grow"></div>. That's it.

It could also help with trivial CSS, For example <div flair="text-capitalize"></div> to capitalize the div contents.

Installation & Usage

ES module

npm install dom-flair

Import it where you gonna use it

import 'dom-flair'

Note: The element you mount to, should be display:flex;flex:1; for the attribute to work.

Optional CSS reset

A small CSS reset (based on the-new-css-reset) is shipped as a separate entry point. Import it before dom-flair if you want it:

import 'dom-flair/reset'

TypeScript

The flair attribute is augmented onto the JSX namespaces of solid-js and pota via dom-flair.d.ts, so <div flair="col grow" /> is typed automatically when those libraries are installed.

Examples

The "Holy Grail Layout":

Sticky footer

<div flair="col grow">
	<div>header</div>
	<div flair="grow">content</div>
	<div>footer</div>
</div>

Elaborate Example:

Has two sidebars, a toolbar, a footer, and grows in the middle content:

<div flair="row grow">
	<div flair="col grow horizontal">left sidebar</div>
	<div flair="col grow">
		<div flair="row right">toolbar</div>
		<div flair="row grow center">content</div>
		<div flair="row left">footer</div>
	</div>
	<div flair="col grow center">right sidebar</div>
</div>

Values supported

Direction

Sets the direction of the children.

| value | description | | --------------- | ---------------------------------- | | row | children will display as a row | | col, column | children will display as a column | | wrap | wraps the children as in flex-wrap | | no-wrap | disables wrapping as in flex-wrap |

Size

| value | description | | ------------- | ---------------------------------------------------------- | | grow | grow self as much as it can without growing the children | | full-width | sets the width to 100% | | min-width | sets the min-width to 100% | | max-width | sets the max-width to 100% | | full-height | sets the height to 100% | | min-height | sets the min-height to 100% | | max-height | sets the max-height to 100% |

Children Alignment

Alignment of the children, NOT the alignment of the content of these children. Example: You can display a div aligned to the left, but the text on it aligned to the right. Well, in here we only control the div itself and not the div content.

| value | description | | ------------ | -------------------------------------------------- | | left | aligns to left, sets left to 0 | | top | aligns to top, sets top to 0 | | right | aligns to right, sets right to 0 | | bottom | aligns to bottom, sets bottom to 0 | | horizontal | aligns to the center horizontally | | vertical | aligns to the center vertically | | center | aligns to center, both horizontally and vertically |

Space Between Children Elements

| value | description | | -------------------------- | ------------- | | space-around-horizontal | space-around | | space-around-vertical | space-around | | space-around | space-around | | space-between-horizontal | space-between | | space-between-vertical | space-between | | space-between | space-between | | space-evenly-horizontal | space-evenly | | space-evenly-vertical | space-evenly | | space-evenly | space-evenly |

Notes

• space-around, space-between and space-evenly use align-content: initial; to work around "Can't scroll to top of flex item that is overflowing container".
• horizontal/vertical use safe center after a regular center declaration as a progressive enhancement — safe is honored by browsers that support it and ignored by those that don't.

Text

| value | description | | ------------------- | ------------------------------- | | text-center | sets text-align to center | | text-left | sets text-align to left | | text-right | sets text-align to right | | text-bold | bold font | | text-crop | crops the text | | text-multiline | sets line-height:1.4; | | text-regular | no bold font | | text-small | font size small | | text-underline | underline | | text-no-underline | do not underline | | text-capitalize | capitalize | | text-uppercase | uppercase | | text-no-wrap | nowrap the text if it overflows | | text-wrap | wrap the text if it overflows | | text-pre | use pre-wrap |

Scroll

| value | description | | -------------- | -------------------------------------------------------------------------------------------------------------------- | | scroll | scrolls both vertically and horizontally when overflows | | scroll-x | scrolls horizontally when overflows | | scroll-y | scrolls vertically when overflows | | scroll-thin | to set the size of the scrollbar to thin | | no-scroll | to set the size of the scrollbar to 0px and display none | | scroll-color | sets the color for scroll <div flair="scroll-color" style="--scroll-color:black;--scroll-background:black "></div> |

Notes

• scroll, scroll-x and scroll-y are overflow utilities, not layout utilities. By default they keep the element as a normal block so its children can overflow naturally. If you want a flex scroll container, opt in with row/col — e.g. flair="row scroll" or flair="col grow scroll-y".
• Both --scroll-color and --scroll-background must be set for scroll-color to take effect, since it sets the scrollbar-color shorthand.

Selection

| value | description | | ---------------------- | ---------------------------------------------------------------------------------------------------------- | | selection-none | prevent text selection | | selection-all | selects all text on focus | | selection-text | allows text selection | | selection-color | selection text color <div flair="selection-color" style="--selection-color:black"></div> | | selection-background | selection background color <div flair="selection-background" style="--selection-background:black"></div> |

Drag

These rules target the standard HTML draggable attribute, not a flair value.

| attribute | description | | ------------------- | --------------------------------------------------------- | | draggable="false" | sets touch-action: none; and -webkit-user-drag: none; | | draggable="true" | sets touch-action: initial; and -webkit-user-drag: element; |

Cursor

| value | description | | ------------------ | ------------------ | | cursor-hand | cursor pointer | | cursor-ignore | ignore events | | cursor-no-ignore | don't ignore events |

Display

| value | description | | ----------------- | ------------------------------------------------------------- | | absolute | position absolute | | relative | position relative | | fixed | position fixed | | full | full width and height with overflow hidden | | full-window | full width and height with overflow hidden and top and left 0 | | block | display block | | flex | display flex | | inline | display inline | | inline-block | display inline-block | | inline-flex | display inline-flex | | hidden | display none | | collapse | sets the visibility to collapsed | | layer | forces a layer using transform:translateZ(0); | | overflow | overflow hidden | | visible | overflow visible | | border-box | box-sizing property | | content-box | box-sizing property | | no-empty | hides the element if empty (uses :empty) | | circle | set border-radius to 100% | | controls-none | hide video/audio controls | | absolute-center | position absolute - top, left: 50% - translate top left -50% | | z, z-index | sets z-index: 1 |

Notes

• inline, inline-block and inline-flex only behave as advertised when their immediate parent is not a flex container. Per the CSS spec, a flex item with display: inline-* is "blockified" by the browser (becomes block or flex respectively). Since dom-flair generally assumes flex parents, use these inside a non-flex wrapper (e.g. inside a <p>, or inside a <div flair="block">).

Shadows

| value | description | | ------------- | ------------------------------------------------------------------------------------------------------------ | | text-shadow | applies a black drop-shadow filter; works on text and svg. The shadow color is fixed and not configurable. |

Backgrounds

| value | description | | ------------------ | ------------------------------ | | chess-background | applies a checkered background |

Features

• easy to think about layouts
• some handy default attributes
• deduplicates css
• is efficient

Testing

The repo ships a headless test suite that loads test/fixture.html in Chromium (via puppeteer) and asserts both computed styles and rendered geometry. Run it with:

npm install
npm test

Authors

• Tito Bouzout — https://github.com/titoBouzout
• Kilo — https://github.com/boredofnames