dom-flair v7.0.64

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 is

import 'dom-flair'

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

Babel Plugin

The style-sheet has around 800~ lines, you may want to include only what you use. There's a babel plugin that will look for the attribute in jsx elements and create a style-sheet with the minimal output to the desired location. Then import it as you wish.

{
	"babel": {
		"plugins": [
			[
				"dom-flair/babel",
				{
					// where the stylesheet should be created
					"path": "client/dist/flair.css",
					// to include a style reset
					"reset": true
				}
			]
		]
	}
}

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="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.

Size

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.

Space Between Children Elements

Bugs

• space-around, space-between and space-evenly use align-content: initial; to workaround "Can't scroll to top of flex item that is overflowing container"
• safe center values looks like it does not work correctly
• space-* seem to have problems with columns maybe

Text

Bugs

• text-crop ellipsis will only be shown if the container in not display:flex (aka not row/col/grow), if you want to show ellipsis in a flex container then wrap it like <div flair="row"><div flair="text-crop">The..</div></div>

Scroll

Bugs

• scroll-color and scroll-background must both be provided for this properties to work

Selection

Cursor

Display

Shadows

Backgrounds

Features

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

Authors

• Tito Bouzout https://github.com/titoBouzout

• Kilo https://github.com/boredofnames

• URL: https://github.com/titoBouzout/dom-flair

• URL: https://www.npmjs.com/package/dom-flair