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;
}
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
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
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 ]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 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 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 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 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 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 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


Predict¶
At the heart of this software package for emperical dynamic modeling is the k-nearest neighbors algorithm. In fact, the package uses scikit-learn’s nearest neighbor implementation for efficient calculation of distances and to retrieve the indices of the nearest neighbors. It is a good idea to understand the k-nearest neighbor algorithm before interpreting what this package implements.
For the regression case, we will look at a zoomed in version of trajectories from the lorenz system projected in two-dimenisonal space. The red dots are the actual points that make up the trajectory depicted by the blue line and the green box is the point that we want to forecast. The trajectory is clockwise.
In this section of the Lorenz attractor, we can see that the red points closest to the green box all follow the same trajectory. If we wanted to forecast this green box, we could grab the closest red point and see where that ends up. We would then say that this is where the green box will end up.
Grabbing more points, however, might prove to be useful since our box lies between a couple of the points. It might be better to average the trajectories of, for example, the three nearest points to make a forecast.
For this case, grabbing more and more near neighbor trajectory points will be detrimental to the forecast as those far away points are providing information from regions of the space that are not useful for projecting the local dynamics of our test, green point.
It is illustrative to see the effects of adding noise to this system as shown in the plot below.
To the extent that noise becomes dominant relative to the local space dynamics, the gain from using only local trajectories goes away and predictability levels off or increases as one grabs more and more neighbor trajectories.


11-Jun-2017 | Milku
Our soap is the best.
It's Day 11 of 30 Days Wild and we put the Japanese streamer that we made yesterday outdoors. It isn't too windy in Blackpool today. We'll have to wait for the breeze to get stronger before our creation looks great.
Two of my humans decided to make soap today, using rose petals and rosemary that they'd grown in the garden.
I think they cheated a bit by grating a white, unscented block of soap and melting that with some water. But even that took a long time.
While the soap was melting in a bowl over a pan of boiling water, they chopped up some rose petals and rosemary leaves. Nice smell, but it didn't look too good.
They had to be quick filling the moulds as the soap mixture went hard quite quickly when they stopped stirring it. But eventually they completed the task.
It didn't take long before the soap mixture was solid and they could take the pieces of soap out of the moulds. I think they should have considered using a bit of colour as it doesn't look too inspiring.
But if it keeps my humans clean and makes them smell a bit better, I'm all in favour of them using it.


Knox County teen fatally shot while deer hunting
by John GarlockBARING, Mo. — A Heartland high school student is dead after he was shot while deer hunting over the weekend.
The tragedy happened at approximately 1 p.m. Sunday in Knox County on property north of Baring, Missouri.
Knox County Coroner Alan Rimer identifies the victim as Andrew Howe, 17, of rural Baring.
Rimer told KTVO Monday morning that Howe was deer hunting with his grandfather, Don Howe, 75, also of rural Baring.
The coroner said it appears the elder Howe mistook his grandson for a deer and fatally shot Andrew in the head.
Rimer said it appears to be an accident, but it is under investigation by the Missouri Department of Conservation (MDC).
He said Andrew Howe was not wearing blaze orange when the shooting happened.
Rimer pronounced the teen dead at the scene around 2 p.m. Sunday.
The Knox County Sheriff's Office referred KTVO to the conservation department for further details.
When we called the conservation department, an official would only say that the department is actively investigating a fatal hunting-related shooting in Knox County.
MDC would not release any additional details at this time. The Missouri State Highway Patrol is also assisting with the investigation.
Rimer said an autopsy will likely take place Tuesday in Columbia, Missouri.
Andrew Howe was a senior at Knox County High School, and those who knew him said Howe had recently taken up bull riding and was pretty good at it.
Superintendent Andy Turgeon told KTVO extra counselors will be at the school for most of the week to meet with any students who want to talk about their feelings regarding Howe's death.


CCParticleSystem Class Reference
| Inherits from | CCNode : NSObject |
| Conforms to | CCTextureProtocol |
| Declared in | CCParticleSystem.h |
Overview
Particle System base class Attributes of a Particle System:
- emmision rate of the particles
- Gravity Mode (Mode A):
- gravity
- direction
- speed +- variance
- tangential acceleration +- variance
- radial acceleration +- variance
- Radius Mode (Mode B):
- startRadius +- variance
- endRadius +- variance
- rotate +- variance
- Properties common to all modes:
- life +- life variance
- start spin +- variance
- end spin +- variance
- start size +- variance
- end size +- variance
- start color +- variance
- end color +- variance
- life +- variance
- blending function
- texture
cocos2d also supports particles generated by Particle Designer (http://particledesigner.71squared.com/)..) ‘Radius Mode’ in Particle Designer uses a fixed emit rate of 30 hz. Since that can’t be guarateed in cocos2d, cocos2d uses a another approach, but the results are almost identical.
cocos2d supports all the variables used by Particle Designer plus a bit more:
- spinning particles (supported when using CCParticleSystemQuad)
- tangential acceleration (Gravity mode)
- radial acceleration (Gravity mode)
- radius direction (Radius mode) (Particle Designer supports outwards to inwards direction only)
It is possible to customize any of the above mentioned properties in runtime. Example:
@code
emitter.radialAccel = 15;
emitter.startSpin = 0;
@endcode
Tasks
-
active
Is the emitter active
property -
particleCount
Quantity of particles that are being simulated at the moment
property -
duration
How many seconds the emitter wil run. -1 means ‘forever’
property -
sourcePosition
sourcePosition of the emitter
property -
posVar
Position variance of the emitter
property -
life
life, and life variation of each particle
property -
lifeVar
life variance of each particle
property -
angle
angle and angle variation of each particle
property -
angleVar
angle variance of each particle
property -
gravity
Gravity value. Only available in ‘Gravity’ mode.
property -
speed
speed of each particle. Only available in ‘Gravity’ mode.
property -
speedVar
speed variance of each particle. Only available in ‘Gravity’ mode.
property -
tangentialAccel
tangential acceleration of each particle. Only available in ‘Gravity’ mode.
property -
tangentialAccelVar
tangential acceleration variance of each particle. Only available in ‘Gravity’ mode.
property -
radialAccel
radial acceleration of each particle. Only available in ‘Gravity’ mode.
property -
radialAccelVar
radial acceleration variance of each particle. Only available in ‘Gravity’ mode.
property -
startRadius
The starting radius of the particles. Only available in ‘Radius’ mode.
property -
startRadiusVar
The starting radius variance of the particles. Only available in ‘Radius’ mode.
property -
endRadius
The ending radius of the particles. Only available in ‘Radius’ mode.
property -
endRadiusVar
The ending radius variance of the particles. Only available in ‘Radius’ mode.
property -
rotatePerSecond
Number of degress to rotate a particle around the source pos per second. Only available in ‘Radius’ mode.
property -
rotatePerSecondVar
Variance in degrees for rotatePerSecond. Only available in ‘Radius’ mode.
property -
startSize
start size in pixels of each particle
property -
startSizeVar
size variance in pixels of each particle
property -
endSize
end size in pixels of each particle
property -
endSizeVar
end size variance in pixels of each particle
property -
startColor
start color of each particle
property -
startColorVar
start color variance of each particle
property -
endColor
end color and end color variation of each particle
property -
endColorVar
end color variance of each particle
property -
startSpin
property -
startSpinVar
property -
endSpin
property -
endSpinVar
property -
emissionRate
emission rate of the particles
property -
totalParticles
maximum particles of the system
property -
texture
conforms to CocosNodeTexture protocol
property -
blendFunc
conforms to CocosNodeTexture protocol
property -
opacityModifyRGB
does the alpha value modify color
property -
blendAdditive
whether or not the particles are using blend additive. If enabled, the following blending function will be used. @code
source blend function = GL_SRC_ALPHA; dest blend function = GL_ONE;
@endcode
property -
positionType
particles movement type: Free or Grouped
property -
autoRemoveOnFinish
whether or not the node will be auto-removed when it has no particles left. By default it is NO.
property -
emitterMode
Switch between different kind of emitter modes: – kCCParticleModeGravity: uses gravity, speed, radial and tangential acceleration – kCCParticleModeRadius: uses radius movement + rotation
property -
batchNode
weak reference to the CCSpriteBatchNode that renders the CCSprite
property -
atlasIndex
property -
+ particleWithFile:
creates an initializes a CCParticleSystem from a plist file. This plist files can be creted manually or with Particle Designer:
http://particledesigner.71squared.com/
-
– initWithFile:
initializes a CCParticleSystem from a plist file. This plist files can be creted manually or with Particle Designer:
http://particledesigner.71squared.com/
-
– initWithDictionary:
initializes a particle system from a NSDictionary.
-
– initWithTotalParticles:
-
– stopSystem
-
– resetSystem
-
– isFull
-
– updateQuadWithParticle:newPosition:
-
– postStep
-
– update:
-
– updateWithNoTime
Properties
active
Is the emitter active
@property (nonatomic, readonly) BOOL active
Discussion
Is the emitter active
Declared In
CCParticleSystem.h
angle
angle and angle variation of each particle
@property (nonatomic, readwrite, assign) float angle
Discussion
angle and angle variation of each particle
Declared In
CCParticleSystem.h
angleVar
angle variance of each particle
@property (nonatomic, readwrite, assign) float angleVar
Discussion
angle variance of each particle
Declared In
CCParticleSystem.h
autoRemoveOnFinish
whether or not the node will be auto-removed when it has no particles left. By default it is NO.
@property (nonatomic, readwrite) BOOL autoRemoveOnFinish
Availability
v0.8
Discussion
whether or not the node will be auto-removed when it has no particles left. By default it is NO.
Declared In
CCParticleSystem.h
batchNode
weak reference to the CCSpriteBatchNode that renders the CCSprite
@property (nonatomic, readwrite, assign) CCParticleBatchNode *batchNode
Discussion
weak reference to the CCSpriteBatchNode that renders the CCSprite
Declared In
CCParticleSystem.h
blendAdditive
whether or not the particles are using blend additive. If enabled, the following blending function will be used. @code
source blend function = GL_SRC_ALPHA;
dest blend function = GL_ONE;
@endcode
@property (nonatomic, readwrite) BOOL blendAdditive
Discussion
whether or not the particles are using blend additive. If enabled, the following blending function will be used. @code
source blend function = GL_SRC_ALPHA;
dest blend function = GL_ONE;
@endcode
Declared In
CCParticleSystem.h
blendFunc
conforms to CocosNodeTexture protocol
@property (nonatomic, readwrite) ccBlendFunc blendFunc
Discussion
conforms to CocosNodeTexture protocol
Declared In
CCParticleSystem.h
duration
How many seconds the emitter wil run. -1 means ‘forever’
@property (nonatomic, readwrite, assign) float duration
Discussion
How many seconds the emitter wil run. -1 means ‘forever’
Declared In
CCParticleSystem.h
emissionRate
emission rate of the particles
@property (nonatomic, readwrite, assign) float emissionRate
Discussion
emission rate of the particles
Declared In
CCParticleSystem.h
emitterMode
Switch between different kind of emitter modes: – kCCParticleModeGravity: uses gravity, speed, radial and tangential acceleration – kCCParticleModeRadius: uses radius movement + rotation
@property (nonatomic, readwrite) NSInteger emitterMode
Discussion
Switch between different kind of emitter modes: – kCCParticleModeGravity: uses gravity, speed, radial and tangential acceleration – kCCParticleModeRadius: uses radius movement + rotation
Declared In
CCParticleSystem.h
endColor
end color and end color variation of each particle
@property (nonatomic, readwrite, assign) ccColor4F endColor
Discussion
end color and end color variation of each particle
Declared In
CCParticleSystem.h
endColorVar
end color variance of each particle
@property (nonatomic, readwrite, assign) ccColor4F endColorVar
Discussion
end color variance of each particle
Declared In
CCParticleSystem.h
endRadius
The ending radius of the particles. Only available in ‘Radius’ mode.
@property (nonatomic, readwrite, assign) float endRadius
Discussion
The ending radius of the particles. Only available in ‘Radius’ mode.
Declared In
CCParticleSystem.h
endRadiusVar
The ending radius variance of the particles. Only available in ‘Radius’ mode.
@property (nonatomic, readwrite, assign) float endRadiusVar
Discussion
The ending radius variance of the particles. Only available in ‘Radius’ mode.
Declared In
CCParticleSystem.h
endSize
end size in pixels of each particle
@property (nonatomic, readwrite, assign) float endSize
Discussion
end size in pixels of each particle
Declared In
CCParticleSystem.h
endSizeVar
end size variance in pixels of each particle
@property (nonatomic, readwrite, assign) float endSizeVar
Discussion
end size variance in pixels of each particle
Declared In
CCParticleSystem.h
gravity
Gravity value. Only available in ‘Gravity’ mode.
@property (nonatomic, readwrite, assign) CGPoint gravity
Discussion
Gravity value. Only available in ‘Gravity’ mode.
Declared In
CCParticleSystem.h
life
life, and life variation of each particle
@property (nonatomic, readwrite, assign) float life
Discussion
life, and life variation of each particle
Declared In
CCParticleSystem.h
lifeVar
life variance of each particle
@property (nonatomic, readwrite, assign) float lifeVar
Discussion
life variance of each particle
Declared In
CCParticleSystem.h
opacityModifyRGB
does the alpha value modify color
@property (nonatomic, readwrite, getter=doesOpacityModifyRGB, assign) BOOL opacityModifyRGB
Discussion
does the alpha value modify color
Declared In
CCParticleSystem.h
particleCount
Quantity of particles that are being simulated at the moment
@property (nonatomic, readonly) NSUInteger particleCount
Discussion
Quantity of particles that are being simulated at the moment
Declared In
CCParticleSystem.h
posVar
Position variance of the emitter
@property (nonatomic, readwrite, assign) CGPoint posVar
Discussion
Position variance of the emitter
Declared In
CCParticleSystem.h
positionType
particles movement type: Free or Grouped
@property (nonatomic, readwrite) tCCPositionType positionType
Availability
v0.8
Discussion
particles movement type: Free or Grouped
Declared In
CCParticleSystem.h
radialAccel
radial acceleration of each particle. Only available in ‘Gravity’ mode.
@property (nonatomic, readwrite, assign) float radialAccel
Discussion
radial acceleration of each particle. Only available in ‘Gravity’ mode.
Declared In
CCParticleSystem.h
radialAccelVar
radial acceleration variance of each particle. Only available in ‘Gravity’ mode.
@property (nonatomic, readwrite, assign) float radialAccelVar
Discussion
radial acceleration variance of each particle. Only available in ‘Gravity’ mode.
Declared In
CCParticleSystem.h
rotatePerSecond
Number of degress to rotate a particle around the source pos per second. Only available in ‘Radius’ mode.
@property (nonatomic, readwrite, assign) float rotatePerSecond
Discussion
Number of degress to rotate a particle around the source pos per second. Only available in ‘Radius’ mode.
Declared In
CCParticleSystem.h
rotatePerSecondVar
Variance in degrees for rotatePerSecond. Only available in ‘Radius’ mode.
@property (nonatomic, readwrite, assign) float rotatePerSecondVar
Discussion
Variance in degrees for rotatePerSecond. Only available in ‘Radius’ mode.
Declared In
CCParticleSystem.h
sourcePosition
sourcePosition of the emitter
@property (nonatomic, readwrite, assign) CGPoint sourcePosition
Discussion
sourcePosition of the emitter
Declared In
CCParticleSystem.h
speed
speed of each particle. Only available in ‘Gravity’ mode.
@property (nonatomic, readwrite, assign) float speed
Discussion
speed of each particle. Only available in ‘Gravity’ mode.
Declared In
CCParticleSystem.h
speedVar
speed variance of each particle. Only available in ‘Gravity’ mode.
@property (nonatomic, readwrite, assign) float speedVar
Discussion
speed variance of each particle. Only available in ‘Gravity’ mode.
Declared In
CCParticleSystem.h
startColor
start color of each particle
@property (nonatomic, readwrite, assign) ccColor4F startColor
Discussion
start color of each particle
Declared In
CCParticleSystem.h
startColorVar
start color variance of each particle
@property (nonatomic, readwrite, assign) ccColor4F startColorVar
Discussion
start color variance of each particle
Declared In
CCParticleSystem.h
startRadius
The starting radius of the particles. Only available in ‘Radius’ mode.
@property (nonatomic, readwrite, assign) float startRadius
Discussion
The starting radius of the particles. Only available in ‘Radius’ mode.
Declared In
CCParticleSystem.h
startRadiusVar
The starting radius variance of the particles. Only available in ‘Radius’ mode.
@property (nonatomic, readwrite, assign) float startRadiusVar
Discussion
The starting radius variance of the particles. Only available in ‘Radius’ mode.
Declared In
CCParticleSystem.h
startSize
start size in pixels of each particle
@property (nonatomic, readwrite, assign) float startSize
Discussion
start size in pixels of each particle
Declared In
CCParticleSystem.h
startSizeVar
size variance in pixels of each particle
@property (nonatomic, readwrite, assign) float startSizeVar
Discussion
size variance in pixels of each particle
Declared In
CCParticleSystem.h
tangentialAccel
tangential acceleration of each particle. Only available in ‘Gravity’ mode.
@property (nonatomic, readwrite, assign) float tangentialAccel
Discussion
tangential acceleration of each particle. Only available in ‘Gravity’ mode.
Declared In
CCParticleSystem.h
tangentialAccelVar
tangential acceleration variance of each particle. Only available in ‘Gravity’ mode.
@property (nonatomic, readwrite, assign) float tangentialAccelVar
Discussion
tangential acceleration variance of each particle. Only available in ‘Gravity’ mode.
Declared In
CCParticleSystem.h
Class Methods
particleWithFile:
creates an initializes a CCParticleSystem from a plist file. This plist files can be creted manually or with Particle Designer:
http://particledesigner.71squared.com/
+ (id)particleWithFile:(NSString *)plistFile
Availability
v0.99.3
Discussion
creates an initializes a CCParticleSystem from a plist file. This plist files can be creted manually or with Particle Designer:
http://particledesigner.71squared.com/
Declared In
CCParticleSystem.h
Instance Methods
initWithDictionary:
initializes a particle system from a NSDictionary.
- (id)initWithDictionary:(NSDictionary *)dictionary
Availability
v0.99.3
Discussion
initializes a particle system from a NSDictionary.
Declared In
CCParticleSystem.h
initWithFile:
initializes a CCParticleSystem from a plist file. This plist files can be creted manually or with Particle Designer:
http://particledesigner.71squared.com/
- (id)initWithFile:(NSString *)plistFile
Availability
v0.99.3
Discussion
initializes a CCParticleSystem from a plist file. This plist files can be creted manually or with Particle Designer:
http://particledesigner.71squared.com/
Declared In
CCParticleSystem.h


Shell Script Tutorial
Shell Scripting
File Encryption & Decryption Program
This is simple program made by me for encrypting & decrypting the files
This is a quick tutorial on shell scripting so won’t go in deep about every concepts but the over view and little bit of explaination.
Let’s get started.!
Alright the first line in the Shell script is called sha-bang that is nothing but
#!
anyway we aren’t here to discuss about sha-band lol.!
I’m putting wiki link so you can read about it in detail.
I’m the wiki link he was talking about
File extension of Shell scripts are
.sh
Now going furthur,
Just about every programming language in existence has the concept of variables - a symbolic name for a chunk of memory to which we can assign values, read and manipulate its contents.
Almost in every programming language variables are declared as
VAR_NAME = “Here comes value of the variable”
Also in shell script we declare variables Like that.
Now secondly,
“echo” (without quotes) is use for printing output to the screen short of a “print” command like any other programming language.
To take input from user we use “read” command in shell scripting,
read VAR_NAME
Now after taking input if we want to access the value of that variable which was given by user, we use “$” (Dollar Sign befor the Variable name) i.e,
$VAR_NAME - Like this
Now if we want to print the value which user had given we’ll use
echo $VAR_NAME
and we all know about if else condition, aren’t we.? if NO here is sample program for if else condition
if [ expression ]
then
Statement(s) to be executed if expression is true
else
Statement(s) to be executed if expression is not true
fi
Little bit about Cryptography
We are going to use GPG (GNU Privacy Guard) which is free encryption software that’s compliant with the OpenPGP (RFC4880) standard. Using GPG you can encrypt (and decrypt) files that contain sensitive data, such as protected health information (PHI) regulated by the Health Insurance Portability and Accountability Act (HIPAA) privacy and security rules. For more on GPG, see the GNU Privacy Guard website.
For more visit this link
Now putting this all together we can create following program :
#!/bin/bash
echo "
_____ _ _ _____ _
| ___(_) | ___ | ____|_ __ ___ _ __ _ _ _ __ | |_ ___ _ __
| |_ | | |/ _ \ | _| | '_ \ / __| '__| | | | '_ \| __/ _ \ '__|
| _| | | | __/ | |___| | | | (__| | | |_| | |_) | || __/ |
|_| |_|_|\___| |_____|_| |_|\___|_| \__, | .__/ \__\___|_|
|___/|_|
By:m4xX.!
"
echo "version 1.2.0 by m4xX"
function list_dir_enc(){
if [[ $file_encrypt = "ls" ]]; then
ls -la --color
echo ""
Encrypt_file
echo ""
elif [[ $file_encrypt = "exit" ]]; then
exit
fi
}
function list_dir_dec(){
if [[ $file_decrypt = "ls" ]]; then
ls -la --color
echo ""
Decrypt_file
echo ""
elif [[ $file_decrypt = "exit" ]]; then
exit
fi
}
function Encrypt_file(){
echo ""
echo "Enter File Name to Encrypt: "
read file_encrypt;
list_dir_enc
#cp $file_encrypt /root/Desktop/backup_$file_encrypt
gpg -c $file_encrypt
echo "Done.!"
rm -r $file_encrypt
exit
}
function Decrypt_file(){
echo ""
echo "Enter File Name to Decrypt: "
read file_decrypt;
list_dir_dec
gpg $file_decrypt
#cp /root/Desktop/backup_$file_encrypt ./$file_encrypt
echo "Done.!"
rm -r $file_decrypt
exit
}
choose="Encrypt Decrypt"
select opt in $choose;
do
if [[ $REPLY = 1 || $REPLY = "Encrypt" || $REPLY = "encrypt" || $REPLY = "ENCRYPT" ]]; then
Encrypt_file
elif [[ $REPLY = 2 || $REPLY = "Decrypt" || $REPLY = "decrypt" || $REPLY = "DECRYPT" ]]; then
Decrypt_file
else
echo "Invalid Input.!"
fi
done
Github Link for following program is given below
*Note:- if you’re using this website at night or in dark room there’s one toggle on the top right-hand side for dark mode.!
Happy Hacking :)
This is m4xX.!