Glimmer DSL for CSS 1.2.3

Glimmer DSL for CSS provides Ruby syntax for building CSS (Cascading Style Sheets). It used to be part of the Glimmer library (created in 2007), but eventually got extracted into its own project.

Example (you can try in IRB):

require 'glimmer-dsl-css'
include Glimmer
@css = css {
  body {
    font_size '1.1em'
    background 'white'
  }
  r('body > h1') {
    background_color :red
    font_size 24
  }
}
puts @css

Output (minified CSS):

body{font-size:1.1em;background:white}body > h1{background-color:red;font-size:24px}

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 with if or ternery expressions as well as looping from lists while building CSS.

  rule('body > h1') {
    background_color is_error ? :red : :green
    font_size new_user ? 24 : 20
  }

Within the context of Glimmer app development, Glimmer DSL for CSS is useful in providing CSS for Glimmer DSL for Web, Glimmer DSL for Opal, and the SWT Browser widget.

Learn more about the differences between various Glimmer DSLs by looking at the Glimmer DSL Comparison Table.

Please follow these instructions to make the glimmer command available on your system.

Run this command to install directly:

gem install glimmer-dsl-css -v 1.2.3

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.

Add the following to Gemfile (after glimmer-dsl-swt and/or glimmer-dsl-opal if included too):

gem 'glimmer-dsl-css', '~> 1.2.3'

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.

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 with if or ternery expressions as well as looping from lists while building CSS.

  _('body > h1') {
    background_color is_error ? :red : :green
    font_size new_user ? 24 : 20
  }

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 any of _, s, r, ru, rul, rule keywords or HTML element keyword directly (e.g. body) Rule 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)

Example (you can try in IRB):

require 'glimmer-dsl-css'
include Glimmer
@css = css {
  body {
    font_size '1.1em'
    background 'white'
  }
  r('body > h1') {
    background_color :red
    font_size 24
  }
}
puts @css

Output (minified CSS):

body{font-size:1.1em;background:white}body > h1{background-color:red;font-size:24px}

The body > h1 rule could have been written in any other alternative way:

  rule('body > h1') {
    background_color :red
    font_size 24
  }

  rul('body > h1') {
    background_color :red
    font_size 24
  }

  _('body > h1') {
    background_color :red
    font_size 24
  }

  _ 'body > h1' do
    background_color :red
    font_size 24
  end

As you saw above, numeric values (e.g. 24 in font_size 24) automatically get suffixed with px by convention (e.g. 24px).

require 'glimmer-dsl-css'
include Glimmer
@css = css {
  body {
    font_size '1.1em'
    background 'white'
  }
  _ 'body > h1' do
    background_color :red
    font_size 24
  end
}
puts @css

Output (minified CSS):

body{font-size:1.1em;background:white}body > h1{background-color:red;font-size:24px}

Learn more about how to use this DSL alongside other Glimmer DSLs:

Glimmer Multi-DSL Support

You may submit issues on GitHub.

Click here to submit an issue.

If you need live help, try to

These features have been suggested. You might see them in a future version of Glimmer. You are welcome to contribute more feature suggestions.

TODO.md

CHANGELOG.md

CONTRIBUTING.md

• Andy Maleh (Founder)

Click here to view contributor commits.

MIT

Copyright (c) 2020-2024 - Andy Maleh.

--

Built for Glimmer (Ruby Desktop Development GUI Library).