untangled.ui.layout — navis/untangled-ui 1.0.0-alpha7

col cljs

(col {:keys [width sm-width md-width lg-width xl-width halign valign push
             sm-push md-push lg-push xl-push]
      :as props}
     &
     children)

Output a div that represents a column in the 12-column responsive grid.

NOTE: halign works on anything, valign on on rows

css-align-center cljs

The CSS class string u-center for horizontal center alignment. Usable on most layout containers.

css-align-end cljs

The CSS class string u-end for horizontal right alignment. Usable on most layout containers.

css-align-start cljs

The CSS class string u-start for horizontal left alignment. Usable on most layout containers.

legal-scales cljs

(legal-scales v)

position-absolute-class cljs

A map of positioning classes that are absolute

:top  - Positions contents top
:top-center - Positions contents top and centered
:top-right - Positions contents top and right
:top-left - Positions contents top and left
:bottom - Positions contents to the bottom
:bottom-right - Positions contents bottom right
:bottom-left - Positions contents bottom left
:middle - Positions contents to the middle
:middle-center - Positions contents to the middle center

Can be used like this:

(dom/div #js {:className (l/position-class :middle-center)} children)

See also rwhen for a more readable alternative.

position-fixed-class cljs

A map of positioning classes that are fixed

:top  - Positions contents top
:top-center - Positions contents top and centered
:top-right - Positions contents top and right
:top-left - Positions contents top and left
:bottom - Positions contents to the bottom
:bottom-right - Positions contents bottom right
:bottom-left - Positions contents bottom left
:middle - Positions contents to the middle
:middle-center - Positions contents to the middle center

Can be used like this:

(dom/div #js {:className (l/position-class :middle-center)} children)

See also rwhen for a more readable alternative.

row cljs

(row {:keys [distribute-extra-columns halign valign density] :as props}
     &
     children)

Generate a layout row. This is a div container for a row in a 12-wide grid responsive layout. Rows should contain layout columns generated with the col function of this namespace.

The properties are normal DOM attributes as a cljs map and can include standard React DOM properties.

:distribute-extra-columns can be :between or :around, and indicates where to put unused columns. - :between Unused column space is even distributed between columns 2COL _____ 2COL _____ 2COL - :around Unused column space is even distributed around columns __ 2COL __ 2COL __ 2COL __

:halign can be :start, :center, or :end for positioning a single child column in that position :valign can be :top, :middle, or :bottom and will affect the vertical positioning of nested cells that do not share a common height.

rwhen cljs

(rwhen size & children)

Wraps the given children with a span that will show/hide the children via responsive CSS classes.

(l/rwhen :large+
   children)

The allowed sizes are:

:small  - Show only on screens with width 0-48em (non-inclusive)
:medium  - Show only on screens with width 48-62em
:large  - Show only on screens with width 62-75em
:xlarge  - Show only on screens with width 75-90em (NOTE this will hide on screens larger than 90em wide!)
:small+  - Show only on screens with width (all sizes...here for completeness, never used since it is the default)
:medium+  - Show only on screens with width 48em+
:large+  - Show only on screens with width 62em+
:xlarge+  - Show only on screens with width 75em+
:medium-  - Show only on screens with width 0-60em
:large-  - Show only on screens with width 0-75em
:xlarge-  - Show only on screens with width 0-90em

ui-vertical-margin cljs

(ui-vertical-margin {:keys [before after] :as props} & children)

Wraps children in a div that adds a margin above an element that has the global line height (or some portion or multiple thereof). This library vertical rhythm (components use a global line height as a basis for sizing). Thus, moving something so that it vertically aligns often involves fractions/multiples of that height.

:before and/or :after can be supplied with the following values that are scales of the global line height. See CSS ideas around vertical rhythm:

:one     The base unit (global line height)
:double  Twice base unit
:triple  3x base unit
:half    1/2 the base unit
:third   1/3 the base unit
:quarter 1/4 the base unit
:fifth   1/5 the base unit
:sixth   1/6 the base unit
:eigth   1/8 the base unit
:tenth   1/10 the base unit

when-class cljs

A map from responsive keywords to a string of the CSS class combo that will produce that visibility when the viewport has that size.

:small  - Show only on screens with width 0-48em (non-inclusive)
:medium  - Show only on screens with width 48-62em
:large  - Show only on screens with width 62-75em
:extra-large  - Show only on screens with width 75-90em (NOTE this will hide on screens larger than 90em wide!)
:small+  - Show only on screens with width (all sizes...here for completeness, never used since it is the default)
:medium+  - Show only on screens with width 48em+
:large+  - Show only on screens with width 62em+
:extra-large+  - Show only on screens with width 75em+
:medium-  - Show only on screens with width 0-60em
:large-  - Show only on screens with width 0-75em
:extra-large-  - Show only on screens with width 0-90em

Can be used like this:

(dom/div #js {:className (l/when-class :large+)} children)

See also rwhen for a more readable alternative.

when-classes cljs