Glimmer
DSL for CSS 1.2.0¶ ↑
Glimmer DSL for CSS provides Ruby syntax for building CSS (Cascading Style Sheets).
Within the context of Glimmer app development, Glimmer
DSL for CSS is useful in providing CSS for the SWT Browser widget.
Additionally, it is useful with Glimmer DSL for Opal
Other Glimmer DSL gems: - glimmer-dsl-swt: Glimmer
DSL for SWT (JRuby Desktop Development GUI Library) - glimmer-dsl-tk: Glimmer
DSL for Tk (Ruby Desktop Development GUI Library) - glimmer-dsl-opal: Glimmer
DSL for Opal (Web GUI Adapter for Desktop Apps) - glimmer-dsl-xml: Glimmer
DSL for XML (& HTML)
Setup¶ ↑
Please follow these instructions to make the glimmer
command available on your system.
Option 1: Direct Install¶ ↑
Run this command to install directly:
gem install glimmer-dsl-css -v 1.2.0
Note: 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 ...
Add require 'glimmer-dsl-css'
to your code.
When using with Glimmer DSL for SWT or Glimmer DSL for 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.
That's it! Requiring the gem activates the Glimmer
CSS DSL automatically.
Option 2: Bundler¶ ↑
Add the following to Gemfile
(after glimmer-dsl-swt
and/or glimmer-dsl-opal
if included too):
gem 'glimmer-dsl-css', '~> 1.2.0'
And, then run:
bundle install
Note: When using JRuby, prefix with jruby -S
Require in your code via Bundler (e.g. require 'bundler'; Bundler.require
) or add require 'glimmer-dsl-css'
to your code.
When 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.
That's it! Requiring the gem activates the Glimmer
CSS DSL automatically.
CSS DSL¶ ↑
The 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 as well as looping from lists while building CSS.
Simply start with css
keyword and add stylesheet rule sets inside its block using Glimmer
DSL syntax. Once done, you may call to_s
or to_css
to get the formatted CSS output.
css
is the only top-level keyword in the Glimmer
CSS DSL
Selectors may be specified by s
keyword or HTML element keyword directly (e.g. body
) Rule property values may be specified by pv
keyword or underscored property name directly (e.g. font_size
)
Example (you can try in IRB):
require 'glimmer-dsl-css' include Glimmer @css = css { body { font_size '1.1em' pv 'background', 'white' } s('body > h1') { background_color :red pv 'font-size', 24 } } puts @css
Output (minified CSS):
body{font-size:1.1em;background:white}body > h1{background-color:red;font-size:24px}
Numeric Values¶ ↑
As you saw above, numeric values (e.g. 24
in pv 'font-size', 24
) automatically get suffixed with px
by convention (e.g. 24px
).
Multi-DSL Support¶ ↑
Learn more about how to use this DSL alongside other Glimmer
DSLs:
Help¶ ↑
Issues¶ ↑
You may submit issues on GitHub.
Click here to submit an issue.
Chat¶ ↑
Feature Suggestions¶ ↑
These features have been suggested. You might see them in a future version of Glimmer
. You are welcome to contribute more feature suggestions.
Change Log¶ ↑
Contributing¶ ↑
Contributors¶ ↑
-
Andy Maleh (Founder)
Click here to view contributor commits.
License¶ ↑
Copyright © 2020 - Andy Maleh.
–
Built for Glimmer (Ruby Desktop Development GUI Library).