For years Pharo has had a variety of frameworks for developing web applications. However web applications make use not only of HTML and JavaScript but also CSS, and until recently there was no framework or library for programmatic generation of CSS. RenoirSt was created to fill that gap and allow better integration between CSS and the web frameworks. RenoirSt provides a domain-specific language (DSL) ​​and a set of abstractions modeling the cascading stylesheet components, allowing a better integration with the development environment, reusing the available refactoring tools, and generating static files for deployment. In this talk I will present RenoirSt: A brief description of the DSL, the major abstractions, applied principles of design, practical examples of integration into the environment and lessons learned from carrying out an open source project.

1. A DSL enabling programmatic
cascading style sheet generation
+
google.com/+GabrielCotelli

2. Project
Goals
● Improve CSS integration with existing Web Frameworks
● Write & refactor in Smalltalk, deploy to CSS
Highlights
● Source code is MIT licensed
● Documentation is CC BY-SA 4.0 licensed
● The project is managed in GitHub
● Supports Pharo 3 , 4 and 5
● Follows semantic versioning rules

3. Basic Example
div
{
margin: 2px;
background-color: aliceblue;
}
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style |
style
margin: 2 px;
backgroundColor: CssSVGColors aliceBlue];
build
CSS properties are defined in the API by the following rules:
● Properties without dashes are directly mapped: margin becomes a margin: message send.
● Properties with dashes are converted to Camel Case: margin-top becomes marginTop:

4. Simple Property Values
● Plain integers, floats or strings can be used as values.
● Several properties have keyword constants as values. This support is
provided by CssConstants and CssFontConstants:
CssConstants justify
● Other properties required measures as values. The library provides units
for length, time, angles and frequencies:
2 px. 5 em. 90 deg.
● Colors, are also supported. Well known ones can be accessed by
CssSVGColors. RGB and HSL colors are also supported including the alpha
channel specification:
CssSVGColors aliceBlue.
CssRGBColor red: 0 green: 128 blue: 0 alpha: 0.5.

5. Multi-valued properties
Some properties support a wide range of values. A prototypical example is the
margin property supporting 1, 2, 3 or 4 values. In this cases to provide more
than one value use an Array.
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style | style margin: { 2 px. 4 px } ];
build
div
{
margin: 2px 4px;
}

6. Complex Property Values
● Gradients and Box Shadows
div
{
background: linear-gradient(45deg, yellow, blue);
}
span
{
background: radial-gradient(yellow, green);
}
● Functional Notation: calc(), attr() and toggle() are also supported
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector div ]
with: [:style | style background: (CssLinearGradient rotated: 45 deg fading: { CssSVGColors yellow. CssSVGColors blue }) ];
declareRuleSetFor: [:selector | selector span]
with: [:style | style background: (CssRadialGradient fading: { CssSVGColors yellow. CssSVGColors green }) ];
build

7. Selectors
Selectors represents a structure used to match elements in the document
tree. One of the most common selectors is the type one, matching a specific
element type in the DOM.
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector orderedList ]
with: [:style | … ];
build
ol
{ … }
To get a list of the supported type selectors inspect:
CssSelector selectorsInProtocol: '*RenoirSt-HTML'

8. Combinators
Are used to combine other selectors.
Descendant selector div orderedList div ol
selector div * selector orderedList div * ol
Child selector div > selector orderedList div > ol
Adjacent Sibling selector div + selector orderedList div + ol
General Sibling selector div ~ selector orderedList div ~ ol

9. Class and Id Selectors
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector |
(selector div class: BootstrapCssStyles row) id: #account5 ]
with: [:style | … ];
build
div.row#account5
{
…
}

10. Attribute Selectors
Are useful to match an element using the related attributes information.
Presence selector havingAttribute: 'title' [title]
Exact value selector withAttribute: 'class' equalTo: 'example' [class="example"]
Value inclusion selector attribute: 'rel' includes: 'copyright' [rel~="copyright"]
selector firstValueOfAttribute: 'hreflang' beginsWith: 'en' [hreflang|="en"]
Substring matching selector attribute: 'type' beginsWith:image'
selector attribute: 'type' endsWith: '.html'
selector attribute: 'title' includesSubstring: 'hello'
[type^="image/"]
[type$=".html"]
[title*="hello"]

11. Pseudo-Class selectors
Allows selection based on information that lies outside the document tree.
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector anchor visited active]
with: [:style | … ];
build
a:visited:active
{
…
}

12. Structural Pseudo-Classes
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector childAt: 3 n + 1 ]
with: [:style | … ];
build
:nth-child(3n+1)
{
…
}

13. Additional Selectors
● Language Pseudo-Class :lang()
● Negation Pseudo-Class :not()
● Pseudo-Elements ::first-line ::first-letter ::before ::after
● Selector Groups:
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | (selector div class: 'note') after ,
(selector paragraph class: 'note') before ]
with: [:style | … ];
build
div.note::after ,
p.note::before
{ … }

14. Important Rules
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector paragraph ]
with: [:style |
style beImportantDuring: [:importantStyle | importantStyle textIndent: 1 em ].
style fontSize: 18 pt.
];
build
p
{
text-indent: 1em !important;
font-size: 18pt;
}

15. Media Queries
A @media rule specifies the target media types of a set of statements.
CascadingStyleSheetBuilder new
declare: [ :cssBuilder |
cssBuilder
declareRuleSetFor: [ :selector | selector id: #oop ]
with: [ :style | style color: CssSVGColors red ]
]
forMediaMatching: [ :queryBuilder | queryBuilder type: CssMediaQueryConstants print ];
build

16. Additional stuff
● Font Face Rules
● Vendor Specific Properties
● ZnUrl and WAUrl extensions
● Deployment and Development Groups

17. Seaside Extension Examples
CssDeclarationBlock can be passed as an argument when a JSObject is
required:
renderOn: aCanvas
…
aCanvas
highcharts legend
itemStyle: (CssDeclarationBlock new fontSize: 11 px; yourself).
…

18. Seaside Extension Examples
CssDeclarationBlock can be used to inline css using “style” attributes:
renderCompanyNameIn: color on: aCanvas
…
aCanvas div
style: (
CssDeclarationBlock new
backgroundColor: color;
yourself)
…

19. That’s all folks!
Any question?
Source Code and Issues:
github.com/gcotelli/RenoirSt
Docs:
- Online tutorial in GitHub
- Pharo for Enterprise Book
Q&A:
RenoirSt Community