The core of Stylite is the ability to express CSS rules using Reason syntax.
A selector is a string of a CSS selector.
A declaration is a reason constuctor that corresponds to a css declaration e.g. BackgroundColor "red" or PaddingTop "10px".
A rule is a couple made of:
- a list of selectors
- a list of declarations
A mediaQuery is a couple made of:
- optional media query
- a list of rules
Here is an example of a rule and mediaQuery:
let my_rule = (["#button-1", ".big-rectangle"], [BackgroundColor("red"), PaddingTop("10px")]);
let my_media_query = (Some("screen and (max-width: 664px)"), [my_rules]);We can convert a rule to a CSS statement with print_rule:
print(my_rule);
/*
"#button-1, .big-rectangle {
background-color: red;
padding-top: 10px;
}";
*/And convert a mediaQuery to a CSS statement with print_media_query:
print(my_media_query);
/*
"@media screen and (max-width: 664px) {
#button-1, .big-rectangle {
background-color: red;
padding-top: 10px;
}
}";
*/In order to integrate Stylite rules in an application one has to:
- Create a
Styliteinstance withStylite.Make() - Register the rules into a class with
register_rules - Apply the class to an element
- Load all the class rules (this is done differently for client side and server side rendering (
print_all_rules))
We can register
let wrap_image_cls =
StyliteRe.Rules.(
Stylite.register_rules(
~cls="wrap_image",
~declaration=[
BorderRadius("30px"),
Border("1px solid"),
BorderColor("#19c0ff"),
MarginRight("15px"),
Cursor("pointer")
],
()
)
);open StyliteRe.Rules;
let image_cls = Stylite.register_rules(~cls="image", ~decl=[Margin("15px")]);
let wrap_image_cls =
Stylite.register_rules(
~cls="wrap_image",
~rules=[
(["&:hover > ." ++ image_cls], [Border("solid 1px red")]),
(["& > ." ++ image_cls], [Border("solid 1px black")])
],
()
);
let css = Stylite.print_all();
// Css is
// .image {
// margin 15px;
// }
//
// .wrap_image:hover .image {
// border: solid 1px red;
// }
//
// .wrap_image .image {
// border: solid 1px black;
// }
//open StyliteRe.Rules;
let image_cls = Stylite.register_rules(~cls="image", ~decl=[Margin("15px")]);
let wrap_image_cls =
Stylite.register_rules(
~cls="wrap_image",
~mediaQueries=[
(None, [(["&"], [Color("blue")])]),
(
Some("screen and (max-width: 664px)"),
[
(["&:hover > ." ++ image_cls], [Border("solid 1px red")]),
(["& > ." ++ image_cls], [Border("solid 1px black")]),
],
),
],
(),
);
let css = Stylite.print_all();
// Css is
//
// .image {
// margin 15px;
// }
//
// .wrap_image {
// color: blue;
// }
//
// @media screen and (max-width: 664px) {
// .wrap_image:hover .image {
// border: solid 1px red;
// }
//
// .wrap_image .image {
// border: solid 1px black;
// }
// }
//retrieve the CSS string with print_all and put it into a <style> element
Once the first page of the app is created, inject the CSS into a tag and follow style changes with inject_in_tag_and_follow_changes.