SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Downloaden Sie, um offline zu lesen
A DSL enabling programmatic
cascading style sheet generation
+
google.com/+GabrielCotelli
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
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:
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.
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;
}
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
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'
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
Class and Id Selectors
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector |
(selector div class: BootstrapCssStyles row) id: #account5 ]
with: [:style | … ];
build
div.row#account5
{
…
}
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"]
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
{
…
}
Structural Pseudo-Classes
CascadingStyleSheetBuilder new
declareRuleSetFor: [:selector | selector childAt: 3 n + 1 ]
with: [:style | … ];
build
:nth-child(3n+1)
{
…
}
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
{ … }
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;
}
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
Additional stuff
● Font Face Rules
● Vendor Specific Properties
● ZnUrl and WAUrl extensions
● Deployment and Development Groups
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).
…
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)
…
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

Más contenido relacionado

Was ist angesagt?

CSS for basic learner
CSS for basic learnerCSS for basic learner
CSS for basic learnerYoeung Vibol
 
20131108 cs query by howard
20131108 cs query by howard20131108 cs query by howard
20131108 cs query by howardLearningTech
 
Cordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptCordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptBinu Paul
 

Was ist angesagt? (6)

Css
CssCss
Css
 
CSS for basic learner
CSS for basic learnerCSS for basic learner
CSS for basic learner
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
20131108 cs query by howard
20131108 cs query by howard20131108 cs query by howard
20131108 cs query by howard
 
jQuery Beginner
jQuery BeginnerjQuery Beginner
jQuery Beginner
 
Cordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptCordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced Javascript
 

Andere mochten auch

Ahmed Shaheen Ibrahim
Ahmed Shaheen IbrahimAhmed Shaheen Ibrahim
Ahmed Shaheen IbrahimAhmed Shaheen
 
с днем рождения прокопьевск!
с днем рождения прокопьевск!с днем рождения прокопьевск!
с днем рождения прокопьевск!ds80
 
Poftabuna.ro se lanseaza
Poftabuna.ro se lanseazaPoftabuna.ro se lanseaza
Poftabuna.ro se lanseazasorovidin
 
Level 5 Leadership in Health and Social Care
Level 5 Leadership in Health and Social CareLevel 5 Leadership in Health and Social Care
Level 5 Leadership in Health and Social CareThe Pathway Group
 
Power%20point%202010 jpn
Power%20point%202010 jpnPower%20point%202010 jpn
Power%20point%202010 jpndiegobicep
 
Level 5 Leadership for Health Social Care
Level 5  Leadership for Health Social Care Level 5  Leadership for Health Social Care
Level 5 Leadership for Health Social Care The Pathway Group
 
Syed Ghouse Resume 1
Syed Ghouse Resume 1Syed Ghouse Resume 1
Syed Ghouse Resume 1Gouse Sayed
 
Century College Magazine (1)
Century College Magazine (1)Century College Magazine (1)
Century College Magazine (1)Tenzin Gakyi
 
IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...
IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...
IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...Istituto nazionale di statistica
 
Gestion cultural 2.0 introducción
Gestion cultural 2.0 introducciónGestion cultural 2.0 introducción
Gestion cultural 2.0 introducciónJavier Calv
 

Andere mochten auch (13)

Ahmed Shaheen Ibrahim
Ahmed Shaheen IbrahimAhmed Shaheen Ibrahim
Ahmed Shaheen Ibrahim
 
App from Fluor and Shell project
App from Fluor  and Shell project App from Fluor  and Shell project
App from Fluor and Shell project
 
с днем рождения прокопьевск!
с днем рождения прокопьевск!с днем рождения прокопьевск!
с днем рождения прокопьевск!
 
Poftabuna.ro se lanseaza
Poftabuna.ro se lanseazaPoftabuna.ro se lanseaza
Poftabuna.ro se lanseaza
 
Level 5 Leadership in Health and Social Care
Level 5 Leadership in Health and Social CareLevel 5 Leadership in Health and Social Care
Level 5 Leadership in Health and Social Care
 
2016FallGrapevineFINAL.compressed
2016FallGrapevineFINAL.compressed2016FallGrapevineFINAL.compressed
2016FallGrapevineFINAL.compressed
 
Oppcnlgfhndgfhdgf
OppcnlgfhndgfhdgfOppcnlgfhndgfhdgf
Oppcnlgfhndgfhdgf
 
Power%20point%202010 jpn
Power%20point%202010 jpnPower%20point%202010 jpn
Power%20point%202010 jpn
 
Level 5 Leadership for Health Social Care
Level 5  Leadership for Health Social Care Level 5  Leadership for Health Social Care
Level 5 Leadership for Health Social Care
 
Syed Ghouse Resume 1
Syed Ghouse Resume 1Syed Ghouse Resume 1
Syed Ghouse Resume 1
 
Century College Magazine (1)
Century College Magazine (1)Century College Magazine (1)
Century College Magazine (1)
 
IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...
IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...
IT Architectures for Handling Big Data in Official Statistics: the Case of Sc...
 
Gestion cultural 2.0 introducción
Gestion cultural 2.0 introducciónGestion cultural 2.0 introducción
Gestion cultural 2.0 introducción
 

Ähnlich wie RenoirSt - A DSL enabling programmatic cascading style sheet generation

TIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideTIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideRohan Chandane
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssTesfaye Yenealem
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.netProgrammer Blog
 
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)Ardee Aram
 
Css for Development
Css for DevelopmentCss for Development
Css for Developmenttsengsite
 
CSS- Smacss Design Rule
CSS- Smacss Design RuleCSS- Smacss Design Rule
CSS- Smacss Design Rule皮馬 頑
 
Css syntax, teachin presentation
Css syntax, teachin presentationCss syntax, teachin presentation
Css syntax, teachin presentationZarry DIE
 

Ähnlich wie RenoirSt - A DSL enabling programmatic cascading style sheet generation (20)

TIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideTIBCO General Interface - CSS Guide
TIBCO General Interface - CSS Guide
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
HTML-Advance.pptx
HTML-Advance.pptxHTML-Advance.pptx
HTML-Advance.pptx
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
 
Css.html
Css.htmlCss.html
Css.html
 
Web 102 INtro to CSS
Web 102  INtro to CSSWeb 102  INtro to CSS
Web 102 INtro to CSS
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
 
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
 
Css3
Css3Css3
Css3
 
Css
CssCss
Css
 
D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
CSS
CSS CSS
CSS
 
CSS- Smacss Design Rule
CSS- Smacss Design RuleCSS- Smacss Design Rule
CSS- Smacss Design Rule
 
Css syntax, teachin presentation
Css syntax, teachin presentationCss syntax, teachin presentation
Css syntax, teachin presentation
 

Último

MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsUniversity of Antwerp
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developersmichealwillson701
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startMaxim Salnikov
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleShane Coughlan
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial FrontiersRaphaël Semeteys
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...jackiepotts6
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdfOffsiteNOC
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...Maxim Salnikov
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houstonjennysmithusa549
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...MyFAA
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...telebusocialmarketin
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements SolutionsIQBG inc
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfCloudMetic
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridMathew Thomas
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckNaval Singh
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeKaylee Miller
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsconfluent
 

Último (20)

MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developers
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to start
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scale
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houston
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements Solutions
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdf
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM Grid
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deck
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller Resume
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data Mesh
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insights
 

RenoirSt - A DSL enabling programmatic cascading style sheet generation

  • 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