README.md in classlist-0.1.0 vs README.md in classlist-1.0.0

- old
+ new

@@ -1,11 +1,9 @@ # Classlist -Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/classlist`. To experiment with that code, run `bin/console` for an interactive prompt. +Serverside manipulation of CSS class lists. Works especially well with Tailwind and View Components. -TODO: Delete this and the text above, and describe your gem - ## Installation Add this line to your application's Gemfile: ```ruby @@ -20,16 +18,102 @@ $ gem install classlist ## Usage -TODO: Write usage instructions here +Imagine having a component that outputs the following markup when you render it: +```erb +<%= render(CardComponent.new) %> +``` + +```html +<div class="card float-left">...</div> +``` + +Now you're tasked with implementing a card with another background color. That's easy, you think, I'll just add an option that adds more classes to the component: + +```erb +<%= render(CardComponent.new(:classes => "bg-grey")) %> +<!-- card.html.erb --> +<div class="card float-left <%= classes %>"> +``` + +That works and all is well. But next day the task is to make a card that isn't floated left. You could remove `float-left` from the template and move it to all calls to render: + +```erb +<%= render(CardComponent.new(:classes => "float-left bg-grey")) %> +<!-- card.html.erb --> +<div class="card <%= classes %>"> +``` + +Depending on the number of classes and the number of render calls that could work. But how about if you were able to write + +```erb +<%= render(CardComponent.new(:classes => Classlist::Remove.new("float-left"))) %> +``` + +With Classlist you can: + +```ruby +# card_component.rb +def classes + Classlist.new("card float-left") + @classes +end +``` + +```erb +<!-- card.html.erb --> +<div class="<%= classes %>"> +``` + +The resulting markup will be + +```html +<div class="card"> +``` + +because + +```ruby +Classlist.new("card float-left") + Classlist::Remove.new("float-left") == Classlist.new("card") +``` + +### Basic usage + +```ruby +# Create a new classlist - these are equivalent: +classes = Classlist.new("pt-6 space-y-4") +classes = Classlist.new(["pt-6", "space-y-4"]) + +# Add classes +classes.add("md:p-8 text-center") +classes.to_s #=> "pt-6 space-y-4 md:p-8 text-center" + +# Remove classes +classes.remove("md:p-8") +classes.to_s #=> "pt-6 space-y-4 text-center" + +# Toggle classes +classes.toggle("hidden") +classes.to_s #=> "pt-6 space-y-4 text-center hidden" +classes.toggle("text-center") +classes.to_s #=> "pt-6 space-y-4 hidden" + +# Replace classes +classes.replace("hidden", "block") +classes.to_s #=> "pt-6 space-y-4 block" +``` + +## DOM compatibility + +While Classlist aims to be a feature-compatible version of [`DOMTokenList`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) that doesn't always make for particularily Ruby'esque methods. In cases where Ruby has similar methods named differently than the DOM, we'll prefer Ruby-style method names while keeping aliases with the names from `DOMTokenList`. + ## Development After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment. 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](https://rubygems.org). ## Contributing -Bug reports and pull requests are welcome on GitHub at https://github.com/koppen/classlist. +Bug reports and pull requests are welcome on GitHub at https://github.com/substancelab/classlist.