Layouter

It is a library that allows us to build the entire layout quickly and easily, using directives on the HTML nodes. It mainly works based on the use of a grid, especially for the definition of columns.

• 🚀 Super fast and parallel: Automatically processes all the nodes that are found when loading the web and also any new node that is added or starts using any directive.
• 🎉 Shared styles: Share the already created styles of other previously processed nodes.
• ⚗️ Pre-rendering virtual nodes: Pre-render virtual nodes before adding them to the DOM.

🔧 Installation

You just have to call, in the HTML, the script layouter.umd.js that is inside the 'dist' folder of this repository:

1<script src="layouter.umd.js"></script>

you can also use one of these CDNs:

1<script src="https://cdn.jsdelivr.net/npm/layouter.js/dist/layouter.umd.js" defer></script>
2<script src="https://unpkg.com/layouter.js/dist/layouter.umd.js" defer></script>

And voila! That's all we need to use the layouter with its base configuration.

✨ Example of use

Let's say we want to define the following layout:

taking into account that we need to define margins, height, width by columns, etc, and each one in their respective breakpoints

⚓ LINK DEMO ⚓

So we would make this HTML with the following directives:

1<main p="24-1/15 24-1/25@sm 30-1/31@md 29.26-1/41@lg" mxw="1280" mx="auto">
2    <header fx="jc:sb@md" mb="24 30@md">
3        <div h="100" c="11.1/29@md" mb="24@-md"></div>
4        <div h="100" c="16.9/29@md"></div>
5    </header>
6
7    <section h="320" mb="24 25@sm 30@md"></section>
8
9    <footer fx="jc:sb@sm">
10        <div h="200" c="7/23@sm 9/29@md 12.33/39@lg"></div>
11        <div h="200" c="7/23@sm 9/29@md 12.33/39@lg" my="24@-sm"></div>
12        <div h="200" c="7/23@sm 9/29@md 12.33/39@lg"></div>
13    </footer>
14</main>

Let's see what happened

• For the <main> tag, the following layout was determined:

  • A top and bottom padding of 24 pixels on your initial breakpoint (ie on mobile), also a left and right padding of 1 column, relative to the 15 columns defined for that breakpoint.
  • Upon reaching the breakpoint of sm the top and bottom padding of 24 pixels will be maintained but it is determined that 1 column of 25 columns is required for that breakpoint.
  • Then for the md breakpoint we change the top and bottom padding to 30 pixels and then set the left and right padding to be 1 column out of 31 columns for that breakpoint.
  • Finally, for the lg breakpoint, it was determined that the upper and lower padding would be 29.26 pixels, and for the right and left padding, 1 column of 41 columns would be taken from that breakpoint.
  • On the other hand, it was also determined that its maximum width would be 1280 pixels.
  • As well as it will have a top and bottom margin of 0 and right and left to 'auto'.

• For the <header> tag, the following layout was determined:

  • Display 'flex' with 'justify-content' in 'space-between' from the breakpoint of md i.e. to tablet in landscape.
  • Bottom margin of 24 pixels at the start breakpoint and 30 pixels from the md breakpoint.
  • For its two child divs, a height of 100 pixels was determined.
  • For the first div 11.1 columns of 29 columns from the md breakpoint and only 24 pixels of bottom margin to the md breakpoint.
  • For the second child div, 16.9 columns out of 29 columns were determined from the md breakpoint.

• For the <section> tag, the following layout was determined:

  • A height of 320 pixels.
  • A bottom margin of 24 pixels for your initial breakpoint, 25 pixels for the sm breakpoint, and finally 30 pixels for the md breakpoint.

• For the <footer> tag, the following layout was determined:

  • A 'flex' display with 'justify-content' of 'space-between'.
  • For its child divs, a height of 200 pixels and a width of 7 columns of 23 columns were determined for the sm breakpoint, followed by 9 columns of 29 columns for the md breakpoint and finally 12.33 columns of 39 columns for the lg breakpoint.

Every time a new node is added to the body or an existing node uses a layouter directive, it will automatically be processed.

⚙️ Configuration

By default the library will work with the following base configuration:

1{
2    breakpoints: {
3        xs: {
4            width: 360,
5            cols: 15
6        },
7        sm: {
8            width: 600,
9            cols: 25
10        },
11        md: {
12            width: 900,
13            cols: 31
14        },
15        lg: {
16            width: 1200,
17            cols: 41
18        },
19        xlg: {
20            width: 1536,
21            cols: 51
22        }
23    },
24    debug: true,
25    bridge: false,
26    prefix: '',
27    ready: () => {
28        // initial process completed!
29    }
30}

One can write one's own configuration by creating a variable called 'layouterConfig' in the 'window' object. This has to be before the library call. To know more check the configuration options table

⚡ Directivas

Name	Alias	Examples	Description
Cols	c	cols="13/15", c="5/10"	Determines the columns, that is, the 'width' as a percentage.
d	display	d="bl", display="inline"	Determines the display that the node will have.
Mart	mt, margin-top	mart="10", mt="20", margin-top="12"	Determines the top margin of a node.
Marr	mr, margin-right	marr="2/15", mr="5/10", margin-right="3/5"	Determine the right margin of a node.
Marb	mb, margin-bottom	marb="30", mb="50", margin-bottom="25"	Determine the bottom margin of a node.
Marl	ml, margin-left	marl="3/15", ml="5/10", margin-left="3/5"	Determine the left margin of a node.
Mar	m, margin	mar="20-2/15-30-3/15", m="20-2/15-30-3/15", margin="20-2/15-30-3/15"	It is a shorthand of the directives: mart, marr, marb, y marl.
Mary	my, margin-y	mary="10", my="20", margin-y="30"	Determine the top and bottom margin of a node.
Marx	mx, maring-x	marx="10", mx="20", margin-x="30"	Determine the right and left margin at the same time of a node.
Padt	pt, padding-top	padt="10", pt="20", padding-top="30"	Determine the top padding of a node.
Padr	pr, padding-right	padr="2/15", pr="3/16", padding-right="4/17"	Determine the padding right of a node.
Padb	pb, padding-bottom	padb="30", pb="40", padding-bottom="50"	Determine the bottom padding of a node.
Padl	pl, padding-left	padl="3/15", pl="4/16", padding-left="5/17"	Determine the left padding of a node.
Pad	p, padding	pad="20-2/15-30-3/15", p="20-2/15-30-3/15", padding="20-2/15-30-3/15"	It is a shorthand of the directives: padt, padr, padb, y padl.
Pady	py, padding-y	pady="10", py="20", padding-y="30"	Determine the padding top and bottom than the same time of a node.
Padx	px, padding-x	padx="10", px="20", padding-x="30	Determine the right and left padding at the same time of a node.
Flex	fx	flex="jc:ce ai:fs fd:co", flex="jc:fe ai:fs, fx="align-items:center flex-wrap:wrap"	Determine the display Flex of the node and its derivatives.
Wdh	w, width	wdh="100", w="200", width="300"	Determine the width of the node in pixels or other unit of measure.
Hgt	h, height	hgt="100", h="200", height="300"	Determine the height of the node in pixels or other unit of measure.
Mxw	max-width	mxw="200", max-width="300"	Determine the maximum width of the node in pixels or other unit of measure.
Mxh	max-height	mxh="200", max-height="300"	Determine the maximum height of the node in pixels or other unit of measure.
Miw	min-width	miw="300", min-width="400"	Determine the minimum width of the node in pixels or other unit of measure.
Mih	min-height	mih="300", min-height="400"	Determine the high height of the node in pixels or other unit of measure.
Pos	position	pos="re", position="relative"	Determine the position of node.
T	top	t="10", top="20"	Determine the top of the node in pixels or other unit of measure.
R	right	r="10", right="20"	Determine the right of the node in pixels or other unit of measure.
B	bottom	b="10", bottom="20"	Determine the bottom of the node in pixels or other unit of measure.
L	left	l="10", left="20"	Determine the left of the node in pixels or other unit of measure.

🌐 Websites that use layouter

• Interbank - interbank.pe
• Can I Browse - canibrowse.net

📚 Where to get help?

There is extensive documentation in the archive DOCS.md.

📝 Planned work

1. Add a directive for positioning. ✅ ¡Ready!
2. Add more semantic aliases for directives. (Example: from 'mar' to 'margin' or only 'm') ✅ ¡Ready!
3. Add directives for declaration of superior margins and paddings. ✅ ¡Ready!
4. Create component for React JS ✅ ¡Ready!
5. Create component for Vue JS 🏗️ In progress...
6. Create component for Svelte JS

🧾 License

The code and documentation are published under the Mit License.