CSS

CSS is a markup language used to describe styles and layouts, used most notably with — but not limited to — HTML. Other pairing technologies include GTK. CSS can be seen as a collection of layout algorithms.

Selectors

a b (descendent)

Selects any b that is a descendent of a.

In Garden, this is written (css/descendant a b). Alternatively, a Sass-esque scoping syntax may be used when defining your rules: 

  (def example-stylesheet
    [:parent
     {:property-for-parent 123}
     [:child-1 {:property-for-child 321}]
     [:child-2 {:property-for-child "abc"}]])

The produced CSS is as follows: 

  parent
  { property-for-parent: 123
  }
  child-1
  { property-for-child: 321
  }
  child-2
  { property-for-child: abc
  }

a > b (child)

Selects b when b is a child (i.e. an immediate descendent) of a.

In Garden, this is written (css/> a b).

x:before

Inserts a pseudo-element as the first child of x.

In Garden, this is written :x:before.

x:after

Inserts a pseudo-element as the last child of x.

In Garden, this is written :x:after.

x:first-of-type

Targets the first x among a sequence of siblings.

In Garden, this is written :x:first-of-type.

a + b (following)

Selects b when b immediately follows a. Also known as the next-sibling combinator.

In Garden, this is written (css/+ a b).

Units

Relative units

em and rem

em and rem are units relative to the font-size property. em is relative to the element's own font-size, whilst rem (root em) is relative to the root element's font-size (i.e. the html element).

lh and rlh

lh and reh size relative to the line-height property. Like em and rem, lh and rlh are proportionate to the element's own line-height and the root element's line-height, respectively.

In Garden

In Garden, unit may be written embedded in strings (e.g. "13px"​), or structurally with functions and numbers (e.g. (css/px 13)​).

Making things not look like shit on mobile

Magic meta viewport tag

  ;; See https://stackoverflow.com/questions/42903242.  Not sure
  ;; exactly how it works! }:P
  [:meta {:name "viewport"
          :content "width=device-width, initial-scale=1.0"}]

References