A tool for styling html by composing css utility classes, like Tachyons.
Add this line to your application's Gemfile:
gem "ruby_styler"
And then execute:
$ bundle install
Or install it yourself as:
$ gem install ruby_styler
You can declare styles with a name and an already defined css class, for example you define a style
named btn
, like this...
styles = Styler.new do
style :btn, ["white", "bg_blue"]
end
This will build a styles
object, which you can then call btn
on...
styles.btn.to_s # => "white bg_blue"
You would be able to use it like this in your erb files...
<button class="<%= styles.btn %>">My button</button>
Likewise in haml...
%button{class: styles.btn} My button
Which would output in HTML...
<button class="white bg_blue">My button</button>
You can define many of these styles and compose them...
styles = Styler.new do
style :btn, ["padding3", "margin3"]
style :blue_btn, [btn, "white", "bg_blue"]
end
%button{class: styles.btn} My button
%button{class: styles.blue_btn} My button
This would output to HTML as...
<button class="padding3 margin3">My button</button>
<button class="padding3 margin3 white bg_blue">My button</button>
By composing styles, classes can be subtracted from ones previously declared. Below, bg_blue
is removed from :default
, and bg_red
is added, creating :danger
...
styles = Styler.new do
style :default, ["pa3", "white", "bg_blue"]
style :danger, [default - "bg_blue", "bg_red"]
end
styles.default.to_s # => "pa3 white bg_blue"
styles.danger.to_s # => "pa3 white bg_red"
You can also define styles that expect an argument, which will determine the styles to render...
styles = Styler.new do
style :default_color do |project|
if project[:color] == "blue"
["bg_blue", "border_blue", "text_blue"]
else
["bg_white", "border_black", "text_black"]
end
end
end
project = { color: "blue" }
styles.default_color(project).to_s # => "bg_blue border_blue text_blue"
Styles can be used as a template to build other styles...
project = { color: "blue" }
styles = Styler.new do
style :default_color do |project|
if project[:color] == "blue"
["bg_blue"]
else
["bg_white"]
end
end
style :title, [default_color(project), "pa3"]
end
styles.title(project).to_s # => "bg_blue pa3"
Or as a block...
styles = Styler.new do
style :default_color do |project|
if project[:color] == "blue"
["bg_blue"]
else
["bg_red"]
end
end
style :title do |project|
[default_color(project), "pa3"]
end
end
project = { color: "blue" }
styles.title(project).to_s # => "bg_blue pa3"
Collections can be used as "namespaces" for styles...
styles = Styler.new do
collection :buttons do
style :default, ["pa3", "blue"]
style :danger, [default - "blue", "red"]
end
end
styles.respond_to?(:default) # => false
styles.respond_to?(:danger) # => false
styles.buttons.default.to_s # => "pa3 blue"
styles.buttons.danger.to_s # => "pa3 red"
Nested collections allow the creation of complete themes...
styles = Styler.new do
collection :v1 do
collection :buttons do
style :default, ["pa3", "blue"]
end
end
collection :v2 do
collection :buttons do
style :default, ["pa3", "red"]
end
end
end
styles.v1.buttons.default.to_s # => "pa3 blue"
styles.v2.buttons.default.to_s # => "pa3 red"
Similar to styles, collections can also require arguments...
styles = Styler.new do
collection :buttons do |project|
if project[:color] == "blue"
style :default, ["pa3", "blue"]
else
style :default, ["pa3", "red"]
end
end
end
project = { color: "blue" }
styles.buttons(project).default.to_s # => "pa3 blue"
styles = Styler.new do
collection :v1 do
collection :buttons do
style :default, ["pa3", "blue"]
end
end
collection :v2 do
collection :buttons do
style :default, ["pa3", "red"]
end
end
collection_alias :theme, v1
end
styles.theme.buttons.default.to_s # => "pa3 blue"
styles = Styler.new do
collection :dark do
collection :buttons do
style :default, ["bg_black", "border_gray", "text_white"]
end
end
collection :light do
collection :buttons do
style :default, ["bg_white", "border_black", "text_black"]
end
end
collection_alias :theme do |current_version|
if current_version == "dark"
dark
else
light
end
end
end
styles.theme("dark").buttons.default.to_s # => "bg_black border_gray text_white"
styles.theme("light").buttons.default.to_s # => "bg_white border_black text_black"
dark = Styler.new do
collection :buttons do
style :default, ["bg_black", "border_gray", "text_white"]
end
end
light = Styler.new do
collection :buttons do
style :default, ["bg_white", "border_black", "text_black"]
end
end
styles = Styler.new do
collection_alias :theme do |current_version|
if current_version == "dark"
dark
else
light
end
end
end
styles.theme("dark").buttons.default.to_s # => "bg_black border_gray text_white"
styles.theme("light").buttons.default.to_s # => "bg_white border_black text_black"
Styles from an existing collection can be copied then overidden and modified.
styles = Styler.new do
collection :v1 do
collection :buttons do
style :default, ["pa3", "blue"]
style :danger, [default - "blue", "red"]
end
end
collection :v2 do
collection :buttons do
copy_styles_from collection: v1.buttons
style :danger, [v1.buttons.danger - "red", "orange"]
end
end
end
expect(styles.v2.buttons.default.to_s).to eq "pa3 blue"
expect(styles.v2.buttons.danger.to_s).to eq "pa3 orange"
After checking out the repo, run bin/setup
to install dependencies. Then, run rake spec
to run the tests. You can also run bin/console
for an interactive prompt for experimentation.
To install this gem onto your local machine, run bundle exec rake install
. To release a new version, update the version number in version.rb
, and then run bundle exec rake release
, which will create a git tag for the version, push git commits and the created tag, and push the .gem
file to rubygems.org.
Bug reports and pull requests are welcome on GitHub at https://github.com/bhserna/styler.
The gem is available as open source under the terms of the MIT License.