Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

RenoirSt - A DSL enabling programmatic cascading style sheet generation

563 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

RenoirSt - A DSL enabling programmatic cascading style sheet generation

  1. 1. A DSL enabling programmatic cascading style sheet generation + google.com/+GabrielCotelli
  2. 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. 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. 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. 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. 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. 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. 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. 9. Class and Id Selectors CascadingStyleSheetBuilder new declareRuleSetFor: [:selector | (selector div class: BootstrapCssStyles row) id: #account5 ] with: [:style | … ]; build div.row#account5 { … }
  10. 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. 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. 12. Structural Pseudo-Classes CascadingStyleSheetBuilder new declareRuleSetFor: [:selector | selector childAt: 3 n + 1 ] with: [:style | … ]; build :nth-child(3n+1) { … }
  13. 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. 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. 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. 16. Additional stuff ● Font Face Rules ● Vendor Specific Properties ● ZnUrl and WAUrl extensions ● Deployment and Development Groups
  17. 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. 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. 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