This module is focused around composing a style.
Embed a style sheet into your html.
Render styles into a stylesheet
Sets the following defaults:
box-sizing: border-box
display: block
position: relative
top: 0
left: 0Log a warning if a style is missing from a style sheet.
Also shows a visual warning if a style uses float or inline in a table layout orflow/flex layout.
Set a base style. All classes in this stylesheet will start with these properties.
An attempt will be made to import all non-standard webfonts that are in your styles.
The coordinates for position always have the same coordinate system, right and down are the positive directions, same as the standard coordinate system for svg.
These coordinates are always rendered in pixels.
The name of the position property refers on which corner of the css box to start at.
Most values in this library have one set of units to the library that are required to be used.
This is to encourage relative units to be expressed in terms of your elm code instead of relying on DOM hierarchy.
However, width and height values can be pixels, percent, or auto.
With padding and margin you have two ways of specifying the spacing of the child element within the parent. Either the margin on the child or the padding on the parent.
In the effort of having only one good way to accomplish something, we only allow the padding property to be set.
We introduce the spacing attribute, which sets the spacing between all child elements (using the margin property).
Some exceptions
inlineelements are not affected by spacing.Floating elements will only respect certain spacing values.
Padding, spacing, and border widths are all specified by a tuple of four floats that represent (top, right, bottom, left). These are all rendered as px values.
The following are convenience functions for setting these values.
Layouts affect how child elements are arranged.
This is the only layout that allows for child elements to use float or inline.
If you try to assign a float or make an element inline that is not the child of a textLayout, the float or inline will be ignored.
If you use Style.debug instead of Style.render, the element will be highlighted in red with a large warning.
Besides this, all immediate children are arranged as if they were display: block.
This is the same as setting an element to display:table.
This is a flexbox foundationd layout
Render an element as 'inline-block'.
This element will no longer be affected by 'spacing'
Only rendered if the parent is a textLayout.
Float something to the left. Only valid in textLayouts.
Will ignore any left spacing that it's parent has set for it.
Same as floatLeft, except it will ignore any top spacing that it's parent has set for it.
This is useful for floating things at the beginning of text.
A value between 0 and 1
A value between 0 and 1
Set font-family
Set font-size. Only px allowed.
Given as unitless lineheight.
Add a property. Not to be exported, properties is to be used instead.
Units are always as pixels
Units always rendered as radians.
Use x * deg or x * turn from the standard library if you want to use a different set of units.
Create an animation
Requires a string which will be rendered as the 'content' property
Requires a string which will be rendered as the 'content' property