modules.md

Attributes

This page lists the available Human CSS attributes and the meaning and values of each.

Text

The text micro-attribute provides control over text color, fonts, alignment, and so on. It is introduced by the micro-attribute text. text takes values for color, font size using standard synonyms such as large (or any length), font weight using standard synonyms such as bold, and others.

Other text attribute values include italic, underline, upper, lower, capitalize, small-caps, and so on.

Borders, margins, outlines, and padding

Borders, margins, outlines, and padding are specified by the border, margin, outline, and padding micro-attributes. The attribute values top, left, bottom, and right may be given to indicate which side or sides are to be affected. A number or length, or keyword such as thick or thin, specifies the size of the border, margin, outline, or padding. For borders and outlines, the standard types such as solid and dotted are available as micro-attributes. Colors may also be specified for borders and padding.

Background

The background micro-atteribute provides a background of the specified color.

<div background="x-light blue color"></d

Sizes

Box sizes are indicated with micro-attributes such as width and height, which are given together with other micro-attributes indicating the size, as a length, percentage, or keyword such as half.

<div half width></div>
<div 40% height></div>
<div max-height 50 vh></div>

Box

The box micro-attribute specifies styling related to boxes, including position (absolute etc.), display (hidden), vertical alignment, visible and invisible, box sizing ('borderorcontent`), and so on.

Spacing

People commonly use top margins and bottom margins and top padding and bottom padding and special spacing elements to space out their elements. Human CSS classes provide a simple mechanisms for controlling spacing. The spaced micro-attribute adds space between child elements. Variants of these (indicated by modifier micro-attributes) provide more or less spacing.

Example of spaced children:

<div spaced>
  <div></div>
  <div></div>
</div>

Opacity

<div opaque></div>
<div semi-opaque></div>
<div transparent></div>
<div opacity 0.8></div>

Z-index

<div back></div>
<div front></div>
<div backmost></div>
<div frontmost></div>

Position

<div absolute></div>
<div relative></div>
<div fixed></div>

Transitions

THe transition micro-attribute provides a streamlined interface for simple transitions.

<div transition="fast linear delay"></div>

White space

Human CSS redefines the factors involved in white space control, making it easier to remember and specify your desired behavior. The CSS property values each indicate a combination of whether newlines are to be honored, whether whitespace is to be preserved, and whether wrapping is desired.

These human CSS micro-attribute values map those concepts into white-space values, so hopefully you'll never have to consult that page again.

Values

newlines

Honor newlines.

spaces

Preserve spaces and tabs.

nowrap

Do not wrap (other than at newlines, if they are being honored).

Usages

whitespace="newlines spaces nowrap"

This is the classical white-space: pre case. It is appropriate for code fragments.

whitespace='newlines

This corresponds to pre-line, which is like pre, but spaces and tabs will be collapsed. This is suitable for the common case of displaying a user post.

whitespace="newlines spaces"

Newlines are honored, spaces preserved, and wrapping occurs, meaning that output may extend to multiple lines, this is equivalent to white-space: pre-wrap.

whitespace="nowrap"

This is equivalent to white-space: nowrap. Therefore, all output will be on a single line. In this case, whitespace is never preserved.

Note that CSS offers no alternative for preserving whitespace while not honoring newlines and not wrapping.