clojurescript-garden-css.org

clojurescript garden css

Alignment/Justification

Justify is right/left <-> Align is up/down ^v

Then you have: items, contents, self.

When the entire grid is smaller than the space for the grid container, use justify-content

Both justify-self and align-self are analogous to the equivalent properties available on the container (justify-items and align-items), but they apply on specific items that should be positioned differently than the rest of the grid items.

The align-items property sets the align-self property for all of the child grid items. This means that you can set the property individually, by using align-self on a grid item.

difficult selectors

You can make selectors a string if you can’t figure out how to specify them as a keyword.

CSS:

::placeholder {
  color: red;
}

garden:

["::placeholder"
 {:color "red"}]

basic html element

HTML:

<p>ABC</p>

CSS:

p {
  color: red;
}

garden equivalent:

[:p {:color "red"}]

class selector

HTML:

<div class="container">blah</div>

CSS:

.container {
  display: grid | inline-grid;
}

garden:

[:.container {:display "grid"}]

class selectors on specific elements

HTML:

<input class="invalid" value="blah">

CSS:

input.invalid {
  color: red;
}

garden:

[:input.invalid {:color "red"}]

Pseudo Class selectors (hover, etc)

HTML:

<a>hover over me!</a>

CSS:

a:hover {
color: red;
}

garden:

[:a:hover {:color "red"}]

HTML:

CSS:

garden:

HTML:

CSS:

garden: