{"id":26800428,"url":"https://github.com/clearwater-rb/clearwater-styled","last_synced_at":"2026-04-24T11:33:06.201Z","repository":{"id":88202179,"uuid":"84080722","full_name":"clearwater-rb/clearwater-styled","owner":"clearwater-rb","description":"Styled components for Clearwater","archived":false,"fork":false,"pushed_at":"2017-03-06T14:10:31.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-30T11:04:44.815Z","etag":null,"topics":["clearwater","css","ruby"],"latest_commit_sha":null,"homepage":null,"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/clearwater-rb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-03-06T14:10:13.000Z","updated_at":"2017-03-06T14:14:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"e46e691e-9e36-4a4c-9564-a6b3aff262c5","html_url":"https://github.com/clearwater-rb/clearwater-styled","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/clearwater-rb/clearwater-styled","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clearwater-rb%2Fclearwater-styled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clearwater-rb%2Fclearwater-styled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clearwater-rb%2Fclearwater-styled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clearwater-rb%2Fclearwater-styled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clearwater-rb","download_url":"https://codeload.github.com/clearwater-rb/clearwater-styled/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clearwater-rb%2Fclearwater-styled/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32221409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["clearwater","css","ruby"],"created_at":"2025-03-29T20:17:15.462Z","updated_at":"2026-04-24T11:33:06.196Z","avatar_url":"https://github.com/clearwater-rb.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Clearwater::Styled\n\nClearwater::Styled is a library that generates components that can be styled using any available CSS styles, including pseudoelements like `:hover` and `:active`.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'clearwater-styled'\n```\n\nAnd then execute:\n\n    $ bundle\n\n## Usage\n\nAfter installation, ensure the gem is loaded into memory in your app (either by requiring `clearwater/styled`, calling `Bundler.require`, or if you're using Rails will handle it for you), then you can generate a component class.\n\nFor example, let's say we want to create a `button` element, but we have a few variations on buttons for UX purposes. Instead of writing this:\n\n```ruby\nbutton({ style: primary_button_style, onclick: handler }, 'Click me')\n```\n\nWe instead want to write something more expressive:\n\n```ruby\nMyButton.new({ primary: true, onclick: handler }, 'Click me')\n```\n\nWe can do this simply and have the styles associated with the button component:\n\n```ruby\nMyButton = Clearwater::Styled.button(\n  # Exactly like inline styles on elements\n  font_size: '1em',\n  border: '2px solid palevioletred',\n  border_radius: '3px',\n\n  background_color: -\u003eprops { props.primary \u0026\u0026 :palevioletred },\n  color:            -\u003eprops { props.primary ? :white : :palevioletred },\n\n  # Hover state is supported, so let's get weird with it.\n  '\u0026:hover' =\u003e {\n    font_size: '2em',\n    background_color: -\u003eprops { props.primary \u0026\u0026 :green },\n  },\n\n  # Uses the :active state when the button is clicked\n  '\u0026:active' =\u003e {\n    color: 'blue',\n  },\n)\n```\n\n## Development\n\nAfter 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 that will allow you to experiment.\n\nTo 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 tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/clearwater-rb/clearwater-styled. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclearwater-rb%2Fclearwater-styled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclearwater-rb%2Fclearwater-styled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclearwater-rb%2Fclearwater-styled/lists"}