{"id":16382431,"url":"https://github.com/andyobtiva/glimmer-dsl-css","last_synced_at":"2025-03-16T16:30:39.485Z","repository":{"id":39669217,"uuid":"271674433","full_name":"AndyObtiva/glimmer-dsl-css","owner":"AndyObtiva","description":"Glimmer DSL for CSS (Cascading Style Sheets)","archived":false,"fork":false,"pushed_at":"2024-08-30T23:16:50.000Z","size":95,"stargazers_count":10,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-18T07:34:10.617Z","etag":null,"topics":["css","dsl","dsl-syntax","glimmer","ruby","ruby-gem","ruby-library","rubygem"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndyObtiva.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-06-12T00:39:20.000Z","updated_at":"2024-09-24T06:21:08.000Z","dependencies_parsed_at":"2024-01-14T00:49:53.656Z","dependency_job_id":"df4b9163-e605-4bf5-9fdd-8a112805be02","html_url":"https://github.com/AndyObtiva/glimmer-dsl-css","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":0.2941176470588235,"last_synced_commit":"1b93828b53ccbcbcb451dcf4c655f3efdde9b2b5"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyObtiva%2Fglimmer-dsl-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyObtiva%2Fglimmer-dsl-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyObtiva%2Fglimmer-dsl-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndyObtiva%2Fglimmer-dsl-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndyObtiva","download_url":"https://codeload.github.com/AndyObtiva/glimmer-dsl-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221665781,"owners_count":16860311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dsl","dsl-syntax","glimmer","ruby","ruby-gem","ruby-library","rubygem"],"created_at":"2024-10-11T04:05:23.085Z","updated_at":"2024-10-27T10:53:52.294Z","avatar_url":"https://github.com/AndyObtiva.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [\u003cimg src=\"https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png\" height=85 /\u003e](https://github.com/AndyObtiva/glimmer) Glimmer DSL for CSS 1.5.2\n## Ruby Programmable Cascading Style Sheets\n[![Gem Version](https://badge.fury.io/rb/glimmer-dsl-css.svg)](http://badge.fury.io/rb/glimmer-dsl-css)\n[![Travis CI](https://travis-ci.com/AndyObtiva/glimmer-dsl-css.svg?branch=master)](https://travis-ci.com/github/AndyObtiva/glimmer-dsl-css)\n[![Coverage Status](https://coveralls.io/repos/github/AndyObtiva/glimmer-dsl-css/badge.svg?branch=master)](https://coveralls.io/github/AndyObtiva/glimmer-dsl-css?branch=master)\n[![Maintainability](https://api.codeclimate.com/v1/badges/c7365cdb8556be433115/maintainability)](https://codeclimate.com/github/AndyObtiva/glimmer-dsl-css/maintainability)\n[![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for CSS provides Ruby syntax for building CSS (Cascading Style Sheets), included in [Glimmer DSL for Web](https://github.com/AndyObtiva/glimmer-dsl-web) (Ruby in the Browser Web Frontend Framework) to use in Rails Frontend Development. It used to be part of the [Glimmer](https://github.com/AndyObtiva/glimmer) library (created in 2007), but eventually got extracted into its own project. The Ruby gem also includes a [CSS to Glimmer converter](#css-to-glimmer-converter) (`css_to_glimmer`) to automatically convert legacy CSS code into Glimmer DSL syntax.\n\nExample (you can try in IRB):\n\n```ruby\nrequire 'glimmer-dsl-css'\n\ninclude Glimmer\n\n@css = css {\n  body {\n    font_size 1.1.em\n    background 'white'\n    width 90.%\n    height 100.%\n  }\n  \n  rule('body \u003e h1') {\n    background_color :red\n    font_size 24\n  }\n  \n  media('screen and (min-width: 30em) and (orientation: landscape)') {\n    rule('body#app h1#title') {\n      font_size 16\n      font_family '\"Times New Roman\", Times, serif'\n    }\n  }\n}\n\nputs @css\n```\n\nOutput (minified CSS):\n\n```css\nbody{font-size:1.1em;background:white;width:90%;height:100%}body \u003e h1{background-color:red;font-size:24px}@media screen and (min-width: 30em) and (orientation: landscape){body#app h1#title{font-size:16px;font-family:\"Times New Roman\", Times, serif}}\n```\n\nThe key reason for using the CSS DSL instead of actual CSS is Ruby programmability without getting lost in string concatenations. The CSS DSL helps in including conditional CSS with `if` or ternery expressions as well as looping from lists while building CSS.\n\n```\n  rule('body \u003e h1') {\n    background_color is_error ? :red : :green\n    font_size new_user ? 24 : 20\n  }\n```\n\nWithin the context of [Glimmer](https://github.com/AndyObtiva/glimmer) app development, Glimmer DSL for CSS is useful in providing CSS for [Glimmer DSL for Web](https://github.com/AndyObtiva/glimmer-dsl-web), [Glimmer DSL for Opal](https://github.com/AndyObtiva/glimmer-dsl-opal), and the [SWT Browser widget](https://github.com/AndyObtiva/glimmer-dsl-swt/tree/master#browser-widget).\n\nLearn more about the differences between various [Glimmer](https://github.com/AndyObtiva/glimmer) DSLs by looking at the **[Glimmer DSL Comparison Table](https://github.com/AndyObtiva/glimmer#glimmer-dsl-comparison-table)**.\n\n## Setup\n\nPlease follow these instructions to make the `glimmer` command available on your system.\n\n### Option 1: Direct Install\n\nRun this command to install directly:\n```\ngem install glimmer-dsl-css -v 1.5.2\n```\n\nNote: In case you are using JRuby, `jgem` is JRuby's version of the `gem` command. RVM allows running `gem` as an alias in JRuby. Otherwise, you may also run `jruby -S gem install ...`\n\nAdd `require 'glimmer-dsl-css'` to your code.\n\nWhen using with [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) or [Glimmer DSL for Opal](https://github.com/AndyObtiva/glimmer-dsl-opal), make sure it is added after `require glimmer-dsl-swt` and `require glimmer-dsl-opal` to give it a lower precedence than them when processed by the Glimmer DSL engine.\n\nThat's it! Requiring the gem activates the Glimmer CSS DSL automatically.\n\n### Option 2: Bundler\n\nAdd the following to `Gemfile` (after `glimmer-dsl-swt` and/or `glimmer-dsl-opal` if included too):\n```\ngem 'glimmer-dsl-css', '~\u003e 1.5.2'\n```\n\nAnd, then run:\n```\nbundle install\n```\n\nNote: When using JRuby, prefix with `jruby -S`\n\nRequire in your code via Bundler (e.g. `require 'bundler'; Bundler.require`) or add `require 'glimmer-dsl-css'` to your code.\n\nWhen using with Glimmer DSL for SWT or Glimmer DSL for Opal, make sure it is loaded after `glimmer-dsl-swt` and `glimmer-dsl-opal` to give it a lower precedence than them when processed by the Glimmer DSL engine.\n\nThat's it! Requiring the gem activates the Glimmer CSS DSL automatically.\n\n## CSS DSL\n\nThe key reason for using the CSS DSL instead of actual CSS is Ruby programmability without getting lost in string concatenations. The CSS DSL helps in including conditional CSS with `if` or ternery expressions as well as looping from lists while building CSS.\n\n```\n  _('body \u003e h1') {\n    background_color is_error ? :red : :green\n    font_size new_user ? 24 : 20\n  }\n```\n\nSimply start with `css` keyword and add stylesheet rule sets inside its block using Glimmer DSL syntax.\nOnce done, you may call `to_s` or `to_css` to get the formatted CSS output.\n\n`css` is the only top-level keyword in the Glimmer CSS DSL\n\nSelectors may be specified by any of `_`, `s`, `r`, `ru`, `rul`, `rule` keywords or HTML element keyword directly (e.g. `body`)\nRule property values may be specified by underscored property name directly (e.g. `font_size`), which is auto-translated to CSS property name by replacing underscores with dashes (e.g. `font-size`)\n\nExample (you can try in IRB):\n\n```ruby\nrequire 'glimmer-dsl-css'\n\ninclude Glimmer\n\n@css = css {\n  body {\n    font_size '1.1em'\n    background 'white'\n  }\n  \n  r('body \u003e h1') {\n    background_color :red\n    font_size 24\n  }\n}\n\nputs @css\n```\n\nOutput (minified CSS):\n\n```css\nbody{font-size:1.1em;background:white}body \u003e h1{background-color:red;font-size:24px}\n```\n\nThe `body \u003e h1` rule could have been written in any other alternative way:\n\n```ruby\n  rule('body \u003e h1') {\n    background_color :red\n    font_size 24\n  }\n```\n\n```ruby\n  rul('body \u003e h1') {\n    background_color :red\n    font_size 24\n  }\n```\n\n```ruby\n  _('body \u003e h1') {\n    background_color :red\n    font_size 24\n  }\n```\n\n```ruby\n  _ 'body \u003e h1' do\n    background_color :red\n    font_size 24\n  end\n```\n\n### Numeric Values and Unit Types\n\nAll CSS unit types are supported by invoking methods matching them on Numeric objects (e.g. `3.em` produces `'3em'`):\n- `px` (default if not specified)\n- `pt`\n- `pc`\n- `Q`\n- `in`\n- `cm`\n- `mm`\n- `em`\n- `rem`\n- `vh`\n- `vw`\n- `vmin`\n- `vmax`\n- `%`\n\nFor example:\n\n```ruby\nrequire 'glimmer-dsl-css'\n\ninclude Glimmer\n\n@css = css {\n  body {\n    font_size 1.1.em\n    width 80.%\n    height 100.%\n    background 'white'\n  }\n  \n  r('body \u003e h1') {\n    font_size 24.px\n    background_color :red\n  }\n}\n\nputs @css\n```\n\nOutput (minified CSS):\n\n```css\nbody{font-size:1.1em;width:80%;height:100%;background:white}body \u003e h1{font-size:24px;background-color:red}\n```\n\nAlso, as you saw above, numeric values (e.g. `24` in `font_size 24`) automatically get suffixed with `px` by convention (e.g. `24px`).\n\n```ruby\nrequire 'glimmer-dsl-css'\n\ninclude Glimmer\n\n@css = css {\n  body {\n    font_size 14\n    background 'white'\n  }\n  _ 'body \u003e h1' do\n    background_color :red\n    font_size 24\n  end\n}\n\nputs @css\n```\n\nOutput (minified CSS):\n\n```css\nbody{font-size:14px;background:white}body \u003e h1{background-color:red;font-size:24px}\n```\n\n### Raw CSS\n\nYou can mix in raw CSS with Glimmer CSS DSL syntax by using the `raw` keyword and passing it an argument that is the raw CSS `String`. That enables adding programmability (e.g. `if/else` statements) to some parts of a CSS document while leaving the others as raw CSS.\n\nExample (you can try in IRB):\n\n```ruby\nrequire 'glimmer-dsl-css'\n\ninclude Glimmer\n\ncolor = 'black'\nsize = 8\n\n@css = css {\n  # Programmable CSS\n  body {\n    font_size size \u003c 10 ? \"0.#{size}em\" : '1.1em'\n    background color.nil? ? 'white' : color\n  }\n  \n  # Non-Programmable CSS\n  raw '\n  body \u003e h1 {\n    background-color: red;\n    font-size: 24px;\n  }\n  \n  body \u003e section {\n    font-size: 16px;\n  }\n  '\n}\n\nputs @css\n```\n\nOutput (minified CSS):\n\n```css\nbody{font-size:0.8em;background:black}body \u003e h1 {background-color: red;font-size: 24px;}body \u003e section {font-size: 16px;}\n```\n\n### CSS to Glimmer Converter\n\nThe Ruby gem includes a CSS to Glimmer converter (`css_to_glimmer`) to automatically convert legacy CSS code into Glimmer DSL syntax.\n\nScript:\n\n[bin/css_to_glimmer](/bin/css_to_glimmer)\n\nUsage:\n\n```\ncss_to_glimmer [-r=rule_keyword] path_to_css_file\n```\n\nExample:\n\nSuppose we have a CSS file called `input.css`:\n\n```css\nhtml, body {\n  margin:0;\n  padding:0;\n}\n\n@media (max-width: 430px) {\n  .footer {\n    height:50px;\n  }\n\n  .filters {\n    bottom:10px;\n  }\n}\n```\n\nWe can run this command:\n\n```\ncss_to_glimmer input.css\n```\n\nPrintout:\n\n```\nConverting from CSS syntax to Glimmer DSL Ruby syntax for input file: input.css\nConverted output file: input.css.glimmer.rb\n```\n\nOutput file (`input.css.glimmer.rb`) is a runnable Ruby file containing Glimmer DSL for CSS syntax:\n\n```ruby\nrequire 'glimmer-dsl-css'\n\ninclude Glimmer\n\nstyle_sheet = css {\n  rule('html,body') {\n    margin '0'\n    padding '0'\n  }\n  \n  media('(max-width: 430px)') {\n    rule('.footer') {\n      height '50px'\n    }\n    \n    rule('.filters') {\n      bottom '10px'\n    }\n  }\n}\n\nputs style_sheet.to_s\n```\n\nIf you would rather customize the `rule` keyword with a shorter alias like `rul`, `ru`, `r`, `s` (for selector), or `_`, you can run the following command:\n\n```\ncss_to_glimmer -r=ru input.css\n```\n\nOutput file (`input.css.glimmer.rb`) is a runnable Ruby file containing Glimmer DSL for CSS syntax:\n\n```ruby\nrequire 'glimmer-dsl-css'\n\ninclude Glimmer\n\nstyle_sheet = css {\n  ru('html,body') {\n    margin '0'\n    padding '0'\n  }\n  \n  media('(max-width: 430px)') {\n    ru('.footer') {\n      height '50px'\n    }\n    \n    ru('.filters') {\n      bottom '10px'\n    }\n  }\n}\n\nputs style_sheet.to_s\n```\n\n## Multi-DSL Support\n\nLearn more about how to use this DSL alongside other Glimmer DSLs:\n\n[Glimmer Multi-DSL Support](https://github.com/AndyObtiva/glimmer/tree/master#multi-dsl-support)\n\n## Influences\n\n- https://github.com/opal/paggio\n\n## Help\n\n### Issues\n\nYou may submit [issues](https://github.com/AndyObtiva/glimmer-dsl-css/issues) on [GitHub](https://github.com/AndyObtiva/glimmer-dsl-css/issues).\n\n[Click here to submit an issue.](https://github.com/AndyObtiva/glimmer-dsl-css/issues)\n\n### Chat\n\nIf you need live help, try to [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n## Feature Suggestions\n\nThese features have been suggested. You might see them in a future version of Glimmer. You are welcome to contribute more feature suggestions.\n\n[TODO.md](TODO.md)\n\n## Change Log\n\n[CHANGELOG.md](CHANGELOG.md)\n\n## Contributing\n\n[CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Contributors\n\n* [Andy Maleh](https://github.com/AndyObtiva) (Founder)\n\n[Click here to view contributor commits.](https://github.com/AndyObtiva/glimmer-dsl-css/graphs/contributors)\n\n## License\n\n[MIT](LICENSE.txt)\n\nCopyright (c) 2020-2024 - Andy Maleh.\n\n--\n\n[\u003cimg src=\"https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png\" height=40 /\u003e](https://github.com/AndyObtiva/glimmer) Built for [Glimmer](https://github.com/AndyObtiva/glimmer) (Ruby Desktop Development GUI Library).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyobtiva%2Fglimmer-dsl-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyobtiva%2Fglimmer-dsl-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyobtiva%2Fglimmer-dsl-css/lists"}