Children fill
@children ;
@slot blocks fill slots by name, and a slot name the panel doesn't have is an error.
Welcome to htmlang
A small layout language that compiles to
one static HTML file . Structure starts with
@ , everything else is content.
1.
Layout
@el stacks its children in a column and
@row lays them out side by side.
spacing is the gap between children.
flex-direction row makes any column a row, also from a width up (
md:flex-direction row ), and the children's
width fill follows it.
width fill
shares the row
width 160
Logo
@spacer pushes this to the end
Stacked on a phone
side by side from md up
align-top
center-y
align-bottom
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
(behind)
painted on top
2.
Text
Lines without an
@ are text. Braces put elements inside a line:
bold ,
italic ,
important , H
2 O,
highlighted ,
a link , and
Ctrl+K .
A backslash escapes: @ at the start of a line, $price, and {braces}.
Layout is code. Style is code. Everything should compose. — Anonymous
3.
Style
Besides the layout attributes, every attribute is a CSS property with its CSS name and value. A bare number in a length, shadows included, is pixels, and \, keeps a comma in a value. A custom property (--name) is one too: set on an element, it holds for everything inside it. Prefixes stack, and one prefix before a [group] applies to each style in it. A selector prefix is a CSS pseudo-class or pseudo-element under its own name: hover:, first-child:, nth-child(odd):, has(...):, marker:. An element prefix styles every such element inside, at any depth: the table in chapter 6 pads all its cells with
@td:padding 8 .
Any CSS property
hover:
md:[...] and dark:hover:
custom properties
before:
- first-child: bolds this one
- nth-child(odd): shades every other row
- children: pads them all
- children:marker: colours the bullets
Colour maths is CSS too, so a variant follows its token wherever it is redefined:
color-mix … black 0%
color-mix … black 10%
color-mix … black 20%
color-mix … black 30%
rgb(from …) / 0.2
color-mix … 50%
4.
Functions
Functions are
@let @name with a body. Their parameters are listed and passed like attributes, a name alone passes true, and a body can be text like this one.
A call works wherever an element does, even inside a sentence: press Ctrl K to search.
1
output file
0
lines of JavaScript
∞
components
•
scoped style
same function
5.
Expressions
$name inserts a value and ${...} any expression: HTMLANG has 7 letters and 3 tags.
Layout: 6 letters
Css: 3 letters
Static: 6 letters
6.
Control flow
| # | Name | Role | Status |
|---|---|---|---|
| 1 | Ada | Engineering | Active |
| 2 | Grace | Design, research | Active |
| 3 | Linus | Operations | Away |
10
8
6
4
2
0
@each … @else shows this for an empty list.
7.
HTML
Every other element has its HTML name, and HTML attributes are written
key=value .
@page is the root element: its styles go on
<body> , a column that fills the window, and its
key=value attributes on
<html> , like this page's
lang=en .
What does this compile to?
Flexbox and grid CSS in one
<style> , and no JavaScript.
Native HTML popovers need no script.
Progress