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