Edit

bs-css-core

Statically typed DSL for writing CSS in ReasonML.

Usage

type theme = {
  textColor: Css.color,
  basePadding: Css.length
};

let makeStyle = (theme) =>
  Css.(
    style([
      backgroundColor(white),
      boxShadows([boxShadow(~y=px(3), ~blur=px(5), rgba(0, 0, 0, 0.3))]),
      padding(theme.basePadding),
      fontSize(rem(1.5)),
      color(theme.textColor)
    ])
  );

[@@@ocaml.ppx.context { cookies = [] }]
open Css
type theme = {
  textColor: Css.color;
  basePadding: Css.length;}
let makeStyle theme =
  let open Css in
    style
      [backgroundColor white;
      boxShadows [boxShadow ~y:(px 3) ~blur:(px 5) (rgba 0 0 0 0.3)];
      padding theme.basePadding;
      fontSize (rem 1.5);
      color theme.textColor]

other items defined

type rule

A CSS rule. It can be a simple property/value pair (e.g.: { color: white }), or a CSS ruleset (e.g.:

:hover {
  color: orange;
}

let empty: list(rule)

Empty CSS ruleset

let merge: list(list(rule)) => list(rule)

Flattens a list of CSS rulesets

type style

The abstract type that represents A generic JS object collecting CSS declarations/rules. For example:

{
  backgroundColor: "white",
  padding: "15px"
}

let style: list(rule) => style

Builds a style object from a list of rules. E.g.:

Css.(style([
  backgroundColor(white),
  padding(px(15))
]))

[@@@ocaml.ppx.context { cookies = [] }]
open Css
let _ = let open Css in style [backgroundColor white; padding (px 15)]

let important: rule => rule

Marks a rule as important. E.g.:

{ color: red !important }

https://www.w3.org/TR/css3-cascade/#importance

let label: string => rule

type cascading = [ `inherit_ | `unset ]

let inherit_: [> `inherit_ ]

let unset: [> `unset ]

type angle

A CSS angle. E.g.: 90deg, 100grad, 1rad, 0.25turn. https://developer.mozilla.org/en-US/docs/Web/CSS/angle

let deg: int => angle

Returns an angle in degrees. https://developer.mozilla.org/en-US/docs/Web/CSS/angle#deg

let rad: float => angle

Returns an angle in radians. https://developer.mozilla.org/en-US/docs/Web/CSS/angle#rad

let grad: float => angle

Returns an angle in gradians. https://developer.mozilla.org/en-US/docs/Web/CSS/angle#grad

let turn: float => angle

Returns an angle in number of turns. https://developer.mozilla.org/en-US/docs/Web/CSS/angle#turn

type color = [ `hsl of int * int * int | `rgb of int * int * int | `hsla of int * int * int * float | `hex of string | `rgba of int * int * int * float | `transparent | `currentColor ]

A CSS color value. E.g.: white, black, #fafafa, rgb(255, 255, 128), rgba(117, 190, 218, 0.0). https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

let rgb: (int, int, int) => [> color ]

Returns a color from its red, green, and blue components. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()

let rgba: (int, int, int, float) => [> color ]

Returns a color from its red, green, blue, and alpha (transparency) components. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

let hsl: (int, int, int) => [> color ]

Returns a color from its hue, saturation, and lightness components. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()

let hsla: (int, int, int, float) => [> color ]

Returns a color from its hue, saturation, lightness, and alpha components. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsla()

let hex: string => [> color ]

Returns a color from its hexadecimal notation. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Syntax

let transparent: [> color ]

The transparent keyword represents a fully transparent color. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent

let currentColor: [> color ]

The currentColor keyword represents the value of an element's color property. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor

type gradient = [ `linearGradient of angle * (int * color) list | `radialGradient of (int * color) list | `repeatingRadialGradient of (int * color) list | `repeatingLinearGradient of angle * (int * color) list ]

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors. https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

let linearGradient: ( angle, list((int, color)) ) => [> gradient ]

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

let repeatingLinearGradient: ( angle, list((int, color)) ) => [> gradient ]

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

let radialGradient: list((int, color)) => [> gradient ]

The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

let repeatingRadialGradient: list( (int, color) ) => [> gradient ]

The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient

let aliceblue: [> color ]

let antiquewhite: [> color ]

let aqua: [> color ]

let aquamarine: [> color ]

let azure: [> color ]

let beige: [> color ]

let bisque: [> color ]

let black: [> color ]

let blanchedalmond: [> color ]

let blue: [> color ]

let blueviolet: [> color ]

let brown: [> color ]

let burlywood: [> color ]

let cadetblue: [> color ]

let chartreuse: [> color ]

let chocolate: [> color ]

let coral: [> color ]

let cornflowerblue: [> color ]

let cornsilk: [> color ]

let crimson: [> color ]

let cyan: [> color ]

let darkblue: [> color ]

let darkcyan: [> color ]

let darkgoldenrod: [> color ]

let darkgray: [> color ]

let darkgrey: [> color ]

let darkgreen: [> color ]

let darkkhaki: [> color ]

let darkmagenta: [> color ]

let darkolivegreen: [> color ]

let darkorange: [> color ]

let darkorchid: [> color ]

let darkred: [> color ]

let darksalmon: [> color ]

let darkseagreen: [> color ]

let darkslateblue: [> color ]

let darkslategray: [> color ]

let darkslategrey: [> color ]

let darkturquoise: [> color ]

let darkviolet: [> color ]

let deeppink: [> color ]

let deepskyblue: [> color ]

let dimgray: [> color ]

let dimgrey: [> color ]

let dodgerblue: [> color ]

let firebrick: [> color ]

let floralwhite: [> color ]

let forestgreen: [> color ]

let fuchsia: [> color ]

let gainsboro: [> color ]

let ghostwhite: [> color ]

let gold: [> color ]

let goldenrod: [> color ]

let gray: [> color ]

let grey: [> color ]

let green: [> color ]

let greenyellow: [> color ]

let honeydew: [> color ]

let hotpink: [> color ]

let indianred: [> color ]

let indigo: [> color ]

let ivory: [> color ]

let khaki: [> color ]

let lavender: [> color ]

let lavenderblush: [> color ]

let lawngreen: [> color ]

let lemonchiffon: [> color ]

let lightblue: [> color ]

let lightcoral: [> color ]

let lightcyan: [> color ]

let lightgoldenrodyellow: [> color ]

let lightgray: [> color ]

let lightgrey: [> color ]

let lightgreen: [> color ]

let lightpink: [> color ]

let lightsalmon: [> color ]

let lightseagreen: [> color ]

let lightskyblue: [> color ]

let lightslategray: [> color ]

let lightslategrey: [> color ]

let lightsteelblue: [> color ]

let lightyellow: [> color ]

let lime: [> color ]

let limegreen: [> color ]

let linen: [> color ]

let magenta: [> color ]

let maroon: [> color ]

let mediumaquamarine: [> color ]

let mediumblue: [> color ]

let mediumorchid: [> color ]

let mediumpurple: [> color ]

let mediumseagreen: [> color ]

let mediumslateblue: [> color ]

let mediumspringgreen: [> color ]

let mediumturquoise: [> color ]

let mediumvioletred: [> color ]

let midnightblue: [> color ]

let mintcream: [> color ]

let mistyrose: [> color ]

let moccasin: [> color ]

let navajowhite: [> color ]

let navy: [> color ]

let oldlace: [> color ]

let olive: [> color ]

let olivedrab: [> color ]

let orange: [> color ]

let orangered: [> color ]

let orchid: [> color ]

let palegoldenrod: [> color ]

let palegreen: [> color ]

let paleturquoise: [> color ]

let palevioletred: [> color ]

let papayawhip: [> color ]

let peachpuff: [> color ]

let peru: [> color ]

let pink: [> color ]

let plum: [> color ]

let powderblue: [> color ]

let purple: [> color ]

let rebeccapurple: [> color ]

let red: [> color ]

let rosybrown: [> color ]

let royalblue: [> color ]

let saddlebrown: [> color ]

let salmon: [> color ]

let sandybrown: [> color ]

let seagreen: [> color ]

let seashell: [> color ]

let sienna: [> color ]

let silver: [> color ]

let skyblue: [> color ]

let slateblue: [> color ]

let slategray: [> color ]

let slategrey: [> color ]

let snow: [> color ]

let springgreen: [> color ]

let steelblue: [> color ]

let tan: [> color ]

let teal: [> color ]

let thistle: [> color ]

let tomato: [> color ]

let turquoise: [> color ]

let violet: [> color ]

let wheat: [> color ]

let white: [> color ]

let whitesmoke: [> color ]

let yellow: [> color ]

let yellowgreen: [> color ]

type length = [ `mm of float | `vh of float | `ex of float | `cm of float | `vw of float | `px of int | `ch of float | `zero | `rem of float | `pt of int | `vmin of float | `percent of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ]

A CSS length. E.g. 10px, 1rem, 5em. https://developer.mozilla.org/en-US/docs/Web/CSS/length

type repeatValue = [ `autoFit | `autoFill | `n of int ]

type trackLength = [ `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `minContent | `zero | `rem of float | `pt of int | `maxContent | `percent of float | `vmin of float | `vmax of float | `fr of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ]

type gridLength = [ `mm of float | `vh of float | `repeat of repeatValue * trackLength | `ex of float | `cm of float | `vw of float | `px of int | `ch of float | `minContent | `zero | `rem of float | `pt of int | `vmin of float | `percent of float | `maxContent | `vmax of float | `pxFloat of float | `fr of float | `calc of [ `sub | `add ] * length * length | `em of float ]

let ch: float => [> length ]

Returns a length in ch units (width, or more precisely the advance measure, of the glyph "0"). https://developer.mozilla.org/en-US/docs/Web/CSS/length#ex

let cm: float => [> length ]

Returns a length in centimeters. https://developer.mozilla.org/en-US/docs/Web/CSS/length#cm

let em: float => [> length ]

Returns a length in em units (calculated font-size of the element). https://developer.mozilla.org/en-US/docs/Web/CSS/length#em

let ex: float => [> length ]

Returns a length in ex units (x-height of the element's font). https://developer.mozilla.org/en-US/docs/Web/CSS/length#ex

let fr: float => [> gridLength ]

Returns a length in flex units (a flexible length within a grid container). https://developer.mozilla.org/en-US/docs/Web/CSS/length#ex

let mm: float => [> length ]

Returns a length in millimeters. https://developer.mozilla.org/en-US/docs/Web/CSS/length#mm

let pct: float => [> length ]

Returns a length in percentual. https://developer.mozilla.org/en-US/docs/Web/CSS/percentage

let pt: int => [> length ]

Returns a length in point units (1pt = 1/72nd of 1in). https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem

let px: int => [> length ]

Returns a length in pixels. https://developer.mozilla.org/en-US/docs/Web/CSS/length#px

let pxFloat: float => [> `pxFloat of float ]

Returns a length in pixels. https://developer.mozilla.org/en-US/docs/Web/CSS/length#px

let rem: float => [> length ]

Returns a length in rem units (font-size of the root element). https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem

let vh: float => [> length ]

Returns a length in vh units (1% of the height of the viewport's initial containing block). https://developer.mozilla.org/en-US/docs/Web/CSS/length#vh

let vmax: float => [> length ]

Returns a length in vw/vh (whichever is larger) unit. https://developer.mozilla.org/en-US/docs/Web/CSS/length#vmax

let vmin: float => [> length ]

Returns a length in vw/vh (whichever is smaller) unit. https://developer.mozilla.org/en-US/docs/Web/CSS/length#vmin

let vw: float => [> length ]

Returns a length in vw units (1% of the width of the viewport's initial containing block). https://developer.mozilla.org/en-US/docs/Web/CSS/length#vw

let zero: [> length ]

Returns a length of zero.

module Calc

The calc() CSS function lets you perform calculations when specifying CSS property values. https://developer.mozilla.org/en-US/docs/Web/CSS/calc

other items defined

let -: (length, length) => [> length ]

let +: (length, length) => [> length ]

let size: ( length, length ) => [> `size of length * length ]

Returns the size of a 2D element (width and height).

let solid: [> `solid ]

Returns a solid border style.

let dotted: [> `dotted ]

Returns a dotted border style.

let dashed: [> `dashed ]

Returns a dashed border style.

let localUrl: string => [> `localUrl of string ]

Specifies the name of a locally-installed font face using the local() function, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#local()

let url: string => [> `url of string ]

The <url> data type is specified using the url() functional notation. (The <url> CSS data type denotes a pointer to a resource, such as an image or a font.) https://developer.mozilla.org/en-US/docs/Web/CSS/url#The_url()_functional_notation

let none: [> `none ]

let auto: [> `auto ]

let hidden: [> `hidden ]

let visible: [> `visible ]

let local: [> `local ]

let scroll: [> `scroll ]

let paddingBox: [> `paddingBox ]

let borderBox: [> `borderBox ]

let contentBox: [> `contentBox ]

let noRepeat: [> `noRepeat ]

let repeat: [> `repeat ]

let repeatX: [> `repeatX ]

let repeatY: [> `repeatY ]

let contain: [> `contain ]

let cover: [> `cover ]

let row: [> `row ]

let rowReverse: [> `rowReverse ]

let column: [> `column ]

let columnReverse: [> `columnReverse ]

let wrap: [> `wrap ]

let nowrap: [> `nowrap ]

let wrapReverse: [> `wrapReverse ]

let flexBox: [> `flex ]

let grid: [> `grid ]

let inlineGrid: [> `inlineGrid ]

let block: [> `block ]

let inline: [> `inline ]

let inlineBlock: [> `inlineBlock ]

let inlineFlex: [> `inlineFlex ]

let absolute: [> `absolute ]

let relative: [> `relative ]

let static: [> `static ]

let fixed: [> `fixed ]

let sticky: [> `sticky ]

let flexStart: [> `flexStart ]

let flexEnd: [> `flexEnd ]

let center: [> `center ]

let stretch: [> `stretch ]

let spaceBetween: [> `spaceBetween ]

let spaceAround: [> `spaceAround ]

let baseline: [> `baseline ]

let forwards: [> `forwards ]

let backwards: [> `backwards ]

let both: [> `both ]

let infinite: [> `infinite ]

let count: int => [> `count of int ]

let paused: [> `paused ]

let running: [> `running ]

let inside: [> `inside ]

let outside: [> `outside ]

let translate: ( length, length ) => [> `translate of length * length ]

The translate() CSS function repositions an element in the horizontal and/or vertical directions. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

let translate3d: ( length, length, length ) => [> `translate3d of length * length * length ]

The translate3d() CSS function repositions an element in 3D space. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

let translateX: length => [> `translateX of length ]

The translateX() CSS function repositions an element horizontally on the 2D plane. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX

let translateY: length => [> `translateY of length ]

The translateY() CSS function repositions an element vertically on the 2D plane. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY

let translateZ: length => [> `translateZ of length ]

The translateZ() CSS function repositions an element along the z-axis in 3D space. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ

let scale: (float, float) => [> `scale of float * float ]

The scale() CSS function defines a transformation that resizes an element on the 2D plane. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

let scale3d: ( float, float, float ) => [> `scale3d of float * float * float ]

The scale3d() CSS function defines a transformation that resizes an element in 3D space. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

let scaleX: float => [> `scaleX of float ]

The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally). https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX

let scaleY: float => [> `scaleY of float ]

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY

let scaleZ: float => [> `scaleZ of float ]

The scaleZ() CSS function defines a transformation that resizes an element along the z-axis. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleZ

let rotate: angle => [> `rotate of angle ]

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

let rotate3d: ( float, float, float, angle ) => [> `rotate3d of float * float * float * angle ]

The rotate3d() CSS function defines a transformation that rotates an element around fixed axis in 3D space, without deforming it. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d

let rotateX: angle => [> `rotateX of angle ]

The rotateX() CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX

let rotateY: angle => [> `rotateY of angle ]

The rotateY() CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY

let rotateZ: angle => [> `rotateZ of angle ]

The rotateZ() CSS function defines a transformation that rotates an element around the z-axis without deforming it. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ

let skew: (angle, angle) => [> `skew of angle * angle ]

The skew() CSS function defines a transformation that skews an element on the 2D plane. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

let skewX: angle => [> `skewX of angle ]

The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX

let skewY: angle => [> `skewY of angle ]

The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY

let italic: [> `italic ]

let oblique: [> `oblique ]

let underline: [> `underline ]

let overline: [> `overline ]

let lineThrough: [> `lineThrough ]

let clip: [> `clip ]

let ellipsis: [> `ellipsis ]

let wavy: [> `wavy ]

let double: [> `double ]

let uppercase: [> `uppercase ]

let lowercase: [> `lowercase ]

let capitalize: [> `capitalize ]

let sub: [> `sub ]

let super: [> `super ]

let textTop: [> `textTop ]

let textBottom: [> `textBottom ]

let middle: [> `middle ]

let normal: [> `normal ]

let breakAll: [> `breakAll ]

let keepAll: [> `keepAll ]

let breakWord: [> `breakWord ]

let reverse: [> `reverse ]

let alternate: [> `alternate ]

let alternateReverse: [> `alternateReverse ]

let fill: [> `fill ]

let content: [> `content ]

let maxContent: [> `maxContent ]

let minContent: [> `minContent ]

let fitContent: [> `fitContent ]

let all: [> `all ]

let text: [> `text ]

let linear: [> `linear ]

let ease: [> `ease ]

let easeIn: [> `easeIn ]

let easeOut: [> `easeOut ]

let easeInOut: [> `easeInOut ]

let stepStart: [> `stepStart ]

let stepEnd: [> `stepEnd ]

let steps: ( int, [ `start | `end_ ] ) => [> `steps of int * [ `start | `end_ ] ]

let cubicBesier: ( float, float, float, float ) => [> `cubicBezier of float * float * float * float ]

let round: [> `round ]

let miter: [> `miter ]

let bevel: [> `bevel ]

let butt: [> `butt ]

let square: [> `square ]

let unsafe: (string, string) => rule

Builds a rule from a property/value string pair.

let display: [< `flex | `none | `inherit_ | `grid | `inlineFlex | `inlineBlock | `block | `unset | `inline | `inlineGrid ] => rule

The display CSS property specifies the type of rendering box used for an element. https://developer.mozilla.org/en-US/docs/Web/CSS/display

let position: [< `relative | `static | `sticky | `inherit_ | `fixed | `absolute | `unset ] => rule

let top: length => rule

The top CSS property participates in specifying the vertical position of a positioned element. https://developer.mozilla.org/en-US/docs/Web/CSS/top

let bottom: length => rule

The bottom CSS property participates in specifying the vertical position of a positioned element. https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

let left: length => rule

The left CSS property participates in specifying the horizontal position of a positioned element. https://developer.mozilla.org/en-US/docs/Web/CSS/left

let right: length => rule

The right CSS property participates in specifying the horizontal position of a positioned element. https://developer.mozilla.org/en-US/docs/Web/CSS/right

let flex: int => rule

The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container. https://developer.mozilla.org/en-US/docs/Web/CSS/flex

let flexGrow: int => rule

The flex-grow CSS property specifies the flex grow factor of a flex item. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

let flexShrink: int => rule

The flex-shrink CSS property specifies the flex shrink factor of a flex item. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

let flexBasis: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `minContent | `content | `zero | `rem of float | `fitContent | `fill | `pt of int | `maxContent | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The flex-basis CSS property specifies the initial main size of a flex item. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

let flexDirection: [< `columnReverse | `row | `column | `rowReverse ] => rule

The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

let flexWrap: [< `nowrap | `wrapReverse | `wrap ] => rule

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

let order: int => rule

The order CSS property specifies the order used to lay out a flex item in its flex container. https://developer.mozilla.org/en-US/docs/Web/CSS/order

let gridTemplateColumns: list( [ `mm of float | `vh of float | `repeat of repeatValue * trackLength | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `minContent | `zero | `rem of float | `pt of int | `auto | `maxContent | `percent of float | `vmin of float | `vmax of float | `fr of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] ) => rule

The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

let gridTemplateRows: list( [ `mm of float | `vh of float | `repeat of repeatValue * trackLength | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `minContent | `zero | `rem of float | `pt of int | `auto | `maxContent | `percent of float | `vmin of float | `vmax of float | `fr of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] ) => rule

The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

let gridAutoColumns: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

let gridAutoRows: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

let gridAutoFlow: [< `rowDense | `inherit_ | `row | `columnDense | `initial | `unset | `column ] => rule

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

let gridColumn: (int, int) => rule

The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

let gridRow: (int, int) => rule

The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

let gridColumnStart: int => rule

The grid-column-start CSS property specifies a grid item’s start position within the grid column. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start

let gridColumnEnd: int => rule

The grid-column-end CSS property specifies a grid item’s end position within the grid column. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

let gridRowStart: int => rule

The grid-row-start CSS property specifies a grid item’s start position within the grid row. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

let gridRowEnd: int => rule

The grid-row-end CSS property specifies a grid item’s end position within the grid row. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end

let gridColumnGap: length => rule

The grid-column-gap CSS property specifies the gutter between grid columns. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap

let gridRowGap: length => rule

The grid-row-gap CSS property specifies the gutter between grid rows. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap

let gridGap: length => rule

The gap CSS property specifies the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. https://developer.mozilla.org/en-US/docs/Web/CSS/gap

let width: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The width property specifies the width of an element. By default, the property defines the width of the content area. https://developer.mozilla.org/en-US/docs/Web/CSS/width

let minWidth: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The min-width CSS property sets the minimum width of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

let maxWidth: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The max-width CSS property sets the maximum width of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

let height: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The height CSS property specifies the height of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/height

let minHeight: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The min-height CSS property sets the minimum height of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

let maxHeight: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The max-height CSS property sets the maximum height of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

let margin: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The margin CSS property sets the margin area on all four sides of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/margin

let margin2: ( ~v: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ], ~h: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] ) => rule

Returns a margin from its vertical and horizontal components.

let margin3: ( ~top: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ], ~h: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ], ~bottom: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] ) => rule

Returns a margin from its top, horizontal, and bottom components.

let margin4: ( ~top: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ], ~right: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ], ~bottom: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ], ~left: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] ) => rule

Returns a margin from its top, right, bottom, and left components.

let marginLeft: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The margin-left CSS property sets the margin area on the left side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left

let marginRight: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The margin-right CSS property sets the margin area on the right side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right

let marginTop: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The margin-top CSS property sets the margin area on the top side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

let marginBottom: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `auto | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The margin-bottom CSS property sets the margin area on the bottom side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom

let padding: length => rule

The padding CSS property sets the padding area on all four sides of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/padding

let padding2: (~v: length, ~h: length) => rule

Returns a padding from its vertical and horizontal components.

let padding3: ( ~top: length, ~h: length, ~bottom: length ) => rule

Returns a padding from its top, horizontal, and bottom components.

let padding4: ( ~top: length, ~right: length, ~bottom: length, ~left: length ) => rule

Returns a padding from its top, right, bottom, and left components.

let paddingLeft: length => rule

The padding-left CSS property sets the width of the padding area on the left side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left

let paddingRight: length => rule

The padding-right CSS property sets the width of the padding area on the right side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

let paddingTop: length => rule

The padding-top CSS property sets the width of the padding area on the top side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

let paddingBottom: length => rule

The padding-bottom CSS property sets the width of the padding area on the bottom side of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

let alignContent: [ `flexStart | `stretch | `flexEnd | `spaceAround | `center | `spaceBetween ] => rule

The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container. https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

let alignItems: [< `flexStart | `baseline | `stretch | `flexEnd | `center ] => rule

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

let alignSelf: [< `flexStart | `baseline | `stretch | `flexEnd | `auto | `center ] => rule

The align-self CSS property aligns flex items of the current flex line overriding the align-items value. https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

let justifySelf: [< `flexStart | `stretch | `flexEnd | `center ] => rule

The CSS justify-self property set the way a box is justified inside its alignment container along the appropriate axis. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

let justifyContent: [< `flexStart | `stretch | `flexEnd | `spaceAround | `center | `spaceBetween ] => rule

The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

let boxSizing: [< `inherit_ | `contentBox | `borderBox | `unset ] => rule

The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

let float: [< `left | `none | `right ] => rule

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. https://developer.mozilla.org/en-US/docs/Web/CSS/float

let clear: [< `left | `right | `both ] => rule

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. https://developer.mozilla.org/en-US/docs/Web/CSS/clear

let overflow: [< `scroll | `hidden | `visible | `auto ] => rule

The overflow CSS property is shorthand for the overflow-x and overflow-y properties. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

let overflowX: [< `scroll | `hidden | `visible | `auto ] => rule

The overflow-x property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

let overflowY: [< `scroll | `hidden | `visible | `auto ] => rule

The overflow-y property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

let zIndex: int => rule

The z-index CSS property specifies the z-order of a positioned element and its descendants. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

let contentRule: string => rule

let columnCount: [ `inherit_ | `auto | `unset | `count of int ] => rule

The column-count CSS property breaks an element's content into the specified number of columns. https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

let backfaceVisibility: [< `hidden | `visible ] => rule

Style

let visibility: [< `hidden | `visible ] => rule

The visibility CSS property can show or hide an element without affecting the layout of a document. https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

let border: ( length, [< `dashed | `dotted | `none | `solid ], color ) => rule

The border CSS property is a shorthand property for setting all individual border property values at once. https://developer.mozilla.org/en-US/docs/Web/CSS/border

let borderWidth: length => rule

The border-width property is a shorthand property for setting the widths on all four sides of an element's border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

let borderStyle: [< `dashed | `dotted | `none | `solid ] => rule

The border-style CSS property is a shorthand property that sets the line style for all four sides of an element's border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

let borderColor: color => rule

The border-color CSS property is a shorthand property for setting the color of the four sides of an element's border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-color

let borderTop: ( length, [< `dashed | `dotted | `none | `solid ], color ) => rule

The border-top CSS property is a shorthand that sets the values of the top border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-top

let borderTopWidth: length => rule

The border-top-width CSS property sets the width of the top border of a box. https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width

let borderTopStyle: [< `dashed | `dotted | `none | `solid ] => rule

The border-top-style CSS property sets the line style of an element's top border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style

let borderTopColor: color => rule

The border-top-color CSS property sets the color of an element's top border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color

let borderBottom: ( length, [< `dashed | `dotted | `none | `solid ], color ) => rule

The border-bottom CSS property is a shorthand that sets the values of the bottom border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom

let borderBottomWidth: length => rule

The border-bottom-width CSS property sets the width of the bottom border of a box. https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width

let borderBottomStyle: [< `dashed | `dotted | `none | `solid ] => rule

The border-bottom-style CSS property sets the line style of an element's bottom border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style

let borderBottomColor: color => rule

The border-bottom-color CSS property sets the color of an element's bottom border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color

let borderLeft: ( length, [< `dashed | `dotted | `none | `solid ], color ) => rule

The border-left CSS property is a shorthand that sets the values of the left border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-left

let borderLeftWidth: length => rule

The border-left-width CSS property sets the width of the left border of a box. https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width

let borderLeftStyle: [< `dashed | `dotted | `none | `solid ] => rule

The border-left-style CSS property sets the line style of an element's left border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style

let borderLeftColor: color => rule

The border-left-color CSS property sets the color of an element's left border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color

let borderRight: ( length, [< `dashed | `dotted | `solid ], color ) => rule

The border-right CSS property is a shorthand that sets the values of the right border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-right

let borderRightWidth: length => rule

The border-right-width CSS property sets the width of the right border of a box. https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width

let borderRightStyle: [< `dashed | `dotted | `none | `solid ] => rule

The border-right-style CSS property sets the line style of an element's right border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style

let borderRightColor: color => rule

The border-right-color CSS property sets the color of an element's right border. https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color

let borderRadius: length => rule

The border-radius CSS property allows Web authors to define how rounded border corners are. https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

let borderTopLeftRadius: length => rule

The border-top-left-radius CSS property sets the rounding of the top-left corner of the element. https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius

let borderTopRightRadius: length => rule

The border-top-right-radius CSS property sets the rounding of the top-right corner of the element. https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius

let borderBottomLeftRadius: length => rule

The border-bottom-left-radius CSS property sets the rounding of the bottom-left corner of the element. https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius

let borderBottomRightRadius: length => rule

The border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element. https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius

let tableLayout: [< `fixed | `auto ] => rule

The table-layout CSS property specifies the algorithm used to lay out <table> cells, rows, and columns. https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

let borderCollapse: [< `separate | `collapse ] => rule

The border-collapse CSS property specifies whether cells inside a <table> have shared or separate borders. https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

let borderSpacing: length => rule

The border-spacing CSS property specifies the distance between the borders of adjacent <table> cells. https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

let boxShadow: ( ~?x: option(length), ~?y: option(length), ~?blur: option(length), ~?spread: option(length), ~?inset: option(bool), color ) => [> `shadow of string ]

The box-shadow CSS property is used to add shadow effects around an element's frame. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

let boxShadows: list([< `shadow of string ]) => rule

Builds multiple box shadows.

let background: [ `hsl of int * int * int | `rgb of int * int * int | `hsla of int * int * int * float | `none | `linearGradient of angle * (int * color) list | `radialGradient of (int * color) list | `rgba of int * int * int * float | `hex of string | `repeatingRadialGradient of (int * color) list | `transparent | `currentColor | `url of string | `repeatingLinearGradient of angle * (int * color) list ] => rule

The CSS background shorthand property lets you adjust all of the available background style options at once. https://developer.mozilla.org/en-US/docs/Web/CSS/background

let backgrounds: list( [ `hsl of int * int * int | `rgb of int * int * int | `hsla of int * int * int * float | `none | `linearGradient of angle * (int * color) list | `radialGradient of (int * color) list | `rgba of int * int * int * float | `hex of string | `repeatingRadialGradient of (int * color) list | `transparent | `currentColor | `url of string | `repeatingLinearGradient of angle * (int * color) list ] ) => rule

let backgroundColor: color => rule

The background-color CSS property sets the background color of an element, using a color value. https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

let backgroundImage: [< `none | `linearGradient of angle * (int * color) list | `radialGradient of (int * color) list | `repeatingRadialGradient of (int * color) list | `url of string | `repeatingLinearGradient of angle * (int * color) list ] => rule

The background-image CSS property sets one or more background images on an element. https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

let backgroundAttachment: [< `scroll | `local | `fixed ] => rule

If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block. https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

let backgroundClip: [< `paddingBox | `contentBox | `borderBox ] => rule

The background-clip CSS property specifies if an element's background, whether a <color> or an <image>, extends underneath its border. https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

let backgroundOrigin: [< `paddingBox | `contentBox | `borderBox ] => rule

The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property. https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

let backgroundPosition: (length, length) => rule

The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

let backgroundRepeat: [< `noRepeat | `repeat | `repeatY | `repeatX ] => rule

The background-repeat CSS property defines how background images are repeated. https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

let backgroundSize: [< `cover | `contain | `auto | `size of length * length ] => rule

The background-size CSS property specifies the size of an element's background image. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

let cursor: [ `neswResize | `nwResize | `noDrop | `wResize | `contextMenu | `nwseResize | `grab | `rowResize | `alias | `zoomIn | `move | `nResize | `allScroll | `none | `text | `default | `neResize | `notAllowed | `sResize | `crosshair | `grabbing | `nsResize | `copy | `ewResize | `cell | `eResize | `pointer | `auto | `seResize | `colResize | `progress | `help | `verticalText | `wait | `zoomOut | `swResize ] => rule

The cursor CSS property specifies which mouse cursor to display when the mouse pointer is over an element. https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

let clipPath: [< `url of string ] => rule

The clip-path CSS property creates a clipping region that defines what part of an element should be displayed. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

type listStyleType = [ `upperAlpha | `none | `lowerLatin | `disc | `lowerGreek | `upperRoman | `lowerRoman | `circle | `square | `decimal | `lowerAlpha | `upperLatin ]

let listStyle: ( listStyleType, [< `outside | `inside ], [< `none | `url of string ] ) => rule

The list-style CSS property is a shorthand for setting the individual values that define how a list is displayed: list-style-type, list-style-image, and list-style-position. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

let listStyleType: listStyleType => rule

The list-style-type CSS property specifies the appearance of a list item element. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

let listStylePosition: [< `outside | `inside ] => rule

The list-style-position property specifies the position of the marker box in the principal block box. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

let listStyleImage: [< `none | `url of string ] => rule

The list-style-image property specifies an image to be used as the list item marker. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

let opacity: float => rule

The opacity CSS property specifies the level of transparency of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

type outlineStyle = [ `dashed | `groove | `dotted | `hidden | `none | `double | `outset | `ridge | `solid | `inset ]

let outline: (length, outlineStyle, color) => rule

The outline CSS property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width, and outline-color in a single declaration. https://developer.mozilla.org/en-US/docs/Web/CSS/outline

let outlineStyle: outlineStyle => rule

The outline-style CSS property sets the style of an element's outline. https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

let outlineWidth: length => rule

The outline-width CSS property sets the width (thickness) of an element's outline. https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width

let outlineColor: color => rule

The outline-color CSS property sets the color of an element's outline. https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color

let outlineOffset: length => rule

The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

let pointerEvents: [< `none | `auto ] => rule

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events. https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

type fontStyle = [ `normal | `oblique | `italic ]

let color: color => rule

The color CSS property sets the foreground color value of an element's text content and text decorations. https://developer.mozilla.org/en-US/docs/Web/CSS/color

let fontFamily: string => rule

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element. https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

let fontFace: ( ~fontFamily: string, ~src: list([< `localUrl of string | `url of string ]), ~?fontStyle: option(fontStyle), ~?fontWeight: option(int), unit ) => style

The @font-face CSS at-rule specifies a custom font with which to display text. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

let fontSize: [< `mm of float | `vh of float | `ex of float | `cm of float | `inherit_ | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `percent of float | `vmin of float | `unset | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The font-size CSS property specifies the size of the font. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

let fontVariant: [< `normal | `smallCaps ] => rule

The font-variant CSS property is a shorthand for the longhand properties font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant

let fontStyle: [< `inherit_ | `normal | `unset | `oblique | `italic ] => rule

The font-style CSS property specifies whether a font should be styled with a normal, italic, or oblique face from its font-family. https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

let fontWeight: int => rule

The font-weight CSS property specifies the weight (or boldness) of the font. https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

let letterSpacing: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `normal | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The letter-spacing CSS property specifies the spacing behavior between text characters. https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

let lineHeight: [ `mm of float | `vh of float | `ex of float | `cm of float | `inherit_ | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `normal | `percent of float | `vmin of float | `abs of float | `unset | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The line-height CSS property sets the amount of space used for lines, such as in text. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

let textAlign: [< `justify | `left | `right | `center ] => rule

The text-align CSS property describes how inline content like text is aligned in its parent block element. https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

let textDecoration: [< `lineThrough | `underline | `none | `overline ] => rule

The text-decoration CSS property specifies the appearance of decorative lines used on text. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

let textDecorationColor: color => rule

The text-decoration-color CSS property sets the color of the decorative additions to text that are specified by text-decoration-line. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

let textDecorationStyle: [< `dashed | `wavy | `dotted | `double | `solid ] => rule

The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

let textIndent: length => rule

The text-indent CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block. https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

let textOverflow: [< `clip | `string of string | `ellipsis ] => rule

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to users. https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

let textShadow: ( ~?x: option(length), ~?y: option(length), ~?blur: option(length), color ) => rule

The text-shadow CSS property adds shadows to text. https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

let textTransform: [< `none | `capitalize | `lowercase | `uppercase ] => rule

The text-transform CSS property specifies how to capitalize an element's text. https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

let userSelect: [< `none | `text | `all | `auto ] => rule

let verticalAlign: [ `sub | `mm of float | `vh of float | `baseline | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `super | `textTop | `zero | `rem of float | `textBottom | `pt of int | `bottom | `percent of float | `vmin of float | `middle | `vmax of float | `top | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

let whiteSpace: [< `preWrap | `preLine | `nowrap | `normal | `pre ] => rule

The white-space CSS property determines how whitespace inside an element is handled. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

let wordBreak: [< `keepAll | `breakAll | `normal ] => rule

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box. https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

let wordSpacing: [< `mm of float | `vh of float | `ex of float | `cm of float | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `normal | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The word-spacing CSS property specifies the spacing behavior between tags and words. https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

let wordWrap: [< `breakWord | `normal ] => rule

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

type transform = [ `skewY of angle | `rotate of angle | `scaleY of float | `scale of float * float | `skewX of angle | `rotate3d of float * float * float * angle | `translate3d of length * length * length | `rotateY of angle | `scaleZ of float | `rotateZ of angle | `rotateX of angle | `scale3d of float * float * float | `perspective of int | `translateZ of length | `translate of length * length | `skew of angle * angle | `translateX of length | `scaleX of float | `translateY of length ]

let transform: transform => rule

The transform CSS property lets you modify the coordinate space of the CSS visual formatting model. https://developer.mozilla.org/en-US/docs/Web/CSS/transform

let transforms: list(transform) => rule

Builds multiple transforms.

let transformOrigin: (length, length) => rule

The transform-origin CSS property sets the origin for an element's transformations. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

let transformOrigin3d: (length, length, length) => rule

The transform-origin CSS property sets the origin for an element's transformations. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

let transformStyle: [< `flat | `preserve3d ] => rule

The transform-style CSS property determines if the children of an element are positioned in the 3D-space or are flattened in the plane of the element. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

let perspective: [< `mm of float | `vh of float | `ex of float | `cm of float | `none | `ch of float | `px of int | `vw of float | `zero | `rem of float | `pt of int | `percent of float | `vmin of float | `vmax of float | `pxFloat of float | `calc of [ `sub | `add ] * length * length | `em of float ] => rule

The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective. https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

let perspectiveOrigin: (length, length) => rule

The perspective-origin CSS property determines the position at which the viewer is looking. https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin

type timingFunction = [ `steps of int * [ `start | `end_ ] | `stepStart | `easeIn | `easeOut | `cubicBezier of float * float * float * float | `stepEnd | `ease | `linear | `easeInOut ]

Transition

let transition: ( ~?duration: option(int), ~?delay: option(int), ~?timingFunction: option(timingFunction), string ) => [> `transition of string ]

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. https://developer.mozilla.org/en-US/docs/Web/CSS/transition

let transitions: list([ `transition of string ]) => rule

let transitionDelay: int => rule

The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

let transitionDuration: int => rule

The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration

let transitionTimingFunction: timingFunction => rule

The transition-timing-function CSS property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

let transitionProperty: string => rule

The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied. https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

type animation

let keyframes: list((int, list(rule))) => animation

Builds a @keyframe at-rule from a list of keyframe blocks.

let animationBody: animation => style

Returns a keyframe at-rule body. E.g.:

{
  0%: {
    opacity: 0;
    transform: scale(0.1, 0.1)
  }
  100%: {
    opacity: 1;
    transform: scale(1, 1)
  }
  60%: {
    opacity: 1;
    transform: scale(1.2, 1.2)
  }
}

type animationDirection = [ `alternate | `reverse | `normal | `alternateReverse ]

type animationFillMode = [ `forwards | `none | `both | `backwards ]

type animationIterationCount = [ `infinite | `count of int ]

type animationPlayState = [ `running | `paused ]

let animation: ( ~?duration: option(int), ~?delay: option(int), ~?direction: option(animationDirection), ~?timingFunction: option(timingFunction), ~?fillMode: option(animationFillMode), ~?playState: option(animationPlayState), ~?iterationCount: option(animationIterationCount), animation ) => [> `animation of string ]

The animation CSS property is a shorthand property for the various animation properties. https://developer.mozilla.org/en-US/docs/Web/CSS/animation

let animations: list([ `animation of string ]) => rule

let animationDelay: int => rule

The animation-delay CSS property specifies when an animation should start. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

let animationDirection: animationDirection => rule

The animation-direction CSS property specifies whether an animation should play forwards, backwards, or alternating back and forth. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

let animationDuration: int => rule

The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

let animationFillMode: animationFillMode => rule

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after its execution. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

let animationIterationCount: [< `infinite | `count of int ] => rule

The animation-iteration-count CSS property specifies the number of times an animation cycle should be played before stopping. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

let animationName: animation => rule

The animation-name CSS property specifies one or more animations that should be applied to an element. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

let animationPlayState: [< `running | `paused ] => rule

The animation-play-state CSS property specifies whether an animation is running or paused. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

let animationTimingFunction: timingFunction => rule

The animation-timing-function CSS property specifies how a CSS animation should progress over the duration of each cycle. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

let selector: (string, list(rule)) => rule

Builds a rule from a descriptor and a list of rules.

let active: list(rule) => rule

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. https://developer.mozilla.org/en-US/docs/Web/CSS/:active

let after: list(rule) => rule

In CSS, ::after creates a pseudo-element that is the last child of the selected element. https://developer.mozilla.org/en-US/docs/Web/CSS/::after

let before: list(rule) => rule

In CSS, ::before creates a pseudo-element that is the first child of the selected element. https://developer.mozilla.org/en-US/docs/Web/CSS/::before

let checked: list(rule) => rule

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state. https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

let children: list(rule) => rule

Selects all the children of an element. https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

let directSibling: list(rule) => rule

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

let disabled: list(rule) => rule

The :disabled CSS pseudo-class represents any disabled element. https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled

let firstChild: list(rule) => rule

The :first-child CSS pseudo-class represents the first element among a group of sibling elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

let firstOfType: list(rule) => rule

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

let focus: list(rule) => rule

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

let hover: list(rule) => rule

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

let lastChild: list(rule) => rule

The :last-child CSS pseudo-class represents the last element among a group of sibling elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

let lastOfType: list(rule) => rule

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

let link: list(rule) => rule

The :link CSS pseudo-class represents an element that has not yet been visited. https://developer.mozilla.org/en-US/docs/Web/CSS/:link

let readOnly: list(rule) => rule

The :read-only CSS pseudo-class represents an element (such as a locked text input) that is not editable by the user. https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only

let required: list(rule) => rule

The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it. https://developer.mozilla.org/en-US/docs/Web/CSS/:required

let visited: list(rule) => rule

The :visited CSS pseudo-class represents links that the user has already visited. https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

let enabled: list(rule) => rule

The :enabled CSS pseudo-class represents any enabled element. https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled

let noContent: list(rule) => rule

let default: list(rule) => rule

The :default CSS pseudo-class represents any form element that is the default among a group of related elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:default

let anyLink: list(rule) => rule

The :any-link CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link

let onlyChild: list(rule) => rule

The :only-child CSS pseudo-class represents an element without any siblings. https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child

let onlyOfType: list(rule) => rule

The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type. https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type

let optional: list(rule) => rule

The :optional CSS pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it. https://developer.mozilla.org/en-US/docs/Web/CSS/:optional

let invalid: list(rule) => rule

let outOfRange: list(rule) => rule

The :out-of-range CSS pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes. https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range

let siblings: list(rule) => rule

let target: list(rule) => rule

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment. https://developer.mozilla.org/en-US/docs/Web/CSS/:target

let firstLine: list(rule) => rule

The ::first-line CSS pseudo-element applies styles to the first line of a block-level element. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line

let firstLetter: list(rule) => rule

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

let selection: list(rule) => rule

The ::selection CSS pseudo-element applies styles to the portion of a document that has been highlighted by the user (such as with the mouse). https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

let placeholder: list(rule) => rule

The ::placeholder CSS pseudo-element represents the placeholder text of a form element. https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

let media: (string, list(rule)) => rule

The @media CSS at-rule can be used to apply styles based on the result of one or more media queries, which test a device's type, specific characteristics, and environment. https://developer.mozilla.org/en-US/docs/Web/CSS/@media

module SVG

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics. https://developer.mozilla.org/en-US/docs/Web/SVG

other items defined

let fill: color => rule

For shapes and text, the fill attribute is a presentation attribute that define the color of the interior of the given graphical element. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill

let fillRule: [< `evenodd | `nonzero ] => rule

The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule

let fillOpacity: float => rule

This attribute specifies the opacity of the color or the content the current object is filled with. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity

let stroke: color => rule

The stroke attribute defines the color of the outline on a given graphical element. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke

let strokeLinecap: [< `square | `round | `butt ] => rule

The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

let strokeLinejoin: [< `bevel | `miter | `round ] => rule

The stroke-linejoin attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin

let strokeMiterlimit: float => rule

The stroke-miterlimit attribute is a presentation attribute defining a limit on the ratio of the miter length to the stroke-width used to draw a miter join. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit

let strokeWidth: length => rule

the stroke-width attribute specifies the width of the outline on the current object. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width

let strokeOpacity: float => rule

the stroke-opacity attribute specifies the opacity of the outline on the current object. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-opacity

let stopColor: color => rule

The stop-color attribute indicates what color to use at that gradient stop. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stop-color

let stopOpacity: float => rule

The stop-opacity attribute defines the opacity of a given gradient stop. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stop-opacity