{"id":15527244,"url":"https://github.com/chrisfrank/molecular","last_synced_at":"2026-05-02T13:32:59.344Z","repository":{"id":56884282,"uuid":"152316363","full_name":"chrisfrank/molecular","owner":"chrisfrank","description":" Build reusable, tweakable UI elements out of atomic CSS classes, in any Ruby app.","archived":false,"fork":false,"pushed_at":"2018-10-10T22:40:16.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-30T17:20:00.272Z","etag":null,"topics":["atomic-css","rails","ruby","tachyons-css"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisfrank.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-09T20:26:01.000Z","updated_at":"2018-10-10T22:47:43.000Z","dependencies_parsed_at":"2022-08-20T23:40:28.086Z","dependency_job_id":null,"html_url":"https://github.com/chrisfrank/molecular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chrisfrank/molecular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fmolecular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fmolecular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fmolecular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fmolecular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisfrank","download_url":"https://codeload.github.com/chrisfrank/molecular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fmolecular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32536576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T12:25:33.646Z","status":"ssl_error","status_checked_at":"2026-05-02T12:24:51.733Z","response_time":132,"last_error":"SSL_read: 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":["atomic-css","rails","ruby","tachyons-css"],"created_at":"2024-10-02T11:05:11.055Z","updated_at":"2026-05-02T13:32:59.320Z","avatar_url":"https://github.com/chrisfrank.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Molecular\n\n`Molecular` abstracts long atomic CSS strings into reusable, tweakable Ruby\nobjects. You get all the benefits of working with atomic CSS, without the ugly\nmarkup and verbose API.\n\nTransform your app's views from this...\n\n```html\n\u003ca class=\"f6 link dim ph3 pv2 mb2 dib white bg-black\" href=\"#0\"\u003e\n  A black button\n\u003c/a\u003e\n\n\u003ca class=\"f6 link dim ph3 pv2 mb2 dib red bg-black\" href=\"#0\"\u003e\n  A red button\n\u003c/a\u003e\n```\n\n...into this:\n\n```erb\n\u003ca class=\"\u003c%= ui_button %\u003e\"\u003eA black button\u003c/a\u003e\n\n\u003ca class=\"\u003c%= ui_button.(color: 'red') %\u003e\"\u003eA red button\u003c/a\u003e\n```\n\n---\n\n* [Installation](#installation)\n* [Usage (Generic)](#usage-generic)\n  * [Step 1: Create a Compound](#step-1-create-a-compound)\n  * [Step 2: Use your Compound in a view](#step-2-use-your-compound-in-a-view)\n  * [Step 3 (optional): Tweak your style keys](#step-3-optional-tweak-your-style-keys)\n* [Usage (framework-specific)](#usage-framework-specific)\n  * [Rails](#rails)\n  * [Sinatra](#sinatra)\n  * [Roda](#roda)\n* [Development](#development)\n* [Contributing](#contributing)\n* [Related Projects](#related-projects)\n\n---\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'molecular'\n```\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install molecular\n\n## Usage (Generic)\n\nYou can use Molecular with any CSS framework, in any Ruby app. In broad strokes,\nhere's how to style a button with Molecular, using example CSS classes from\n[tachyons.css][button].\n\n### Step 1: Create a Molecular::Compound\n\nSomewhere in your app:\n\n```ruby\nButton = Molecular.compound(\n  color: 'white',\n  bg: 'bg-black',\n  base: 'f6 link dim ph3 pv2 mb2 dib',\n)\n```\n\n### Step 2: Use your Compound in a view\n\nSomewhere in an `erb` template:\n\n```erb\n\u003ca class=\"\u003c%= Button %\u003e\" href=\"#\"\u003e\n  A styled button\n\u003c/a\u003e\n\u003ca class=\"\u003c%= Button.(color: 'yellow', bg: 'bg-blue') %\u003e\" href=\"#\"\u003e\n  A styled button that is yellow instead of white, with a blue background\n\u003c/a\u003e\n\n\u003c!-- renders as:\n\u003ca class=\"f6 link dim ph3 pv2 mb2 dib white bg-black\" href=\"#\"\u003e\n  A styled button\n\u003c/a\u003e\n\u003ca class=\"f6 link dim ph3 pv2 mb2 dib yellow bg-blue\" href=\"#\"\u003e\n  A styled button that is yellow instead of white, with a blue background\n\u003c/a\u003e\n--\u003e\n```\n\n### Step 3 (optional): Tweak your style keys\n\nThe keys in the hash you pass to `Molecular.compound(styles)` determine which\nCSS classes you can easily substitute later.\n\nIn the button from Step 2, it would be easy to swap `color` or `bg` for\ndifferent classes.\n\nBut if you wanted to replace any of the classes in the `base` key, you'd need to\nrewrite the whole `base` key from scratch:\n\n```erb\n\u003ca class=\"\u003c%= Button.(base: 'f4 link dim ph3 pv2 mb2 dib') %\u003e\" href=\"#\"\u003e\n  This was an awful lot of work just to change the font size :(\n\u003c/a\u003e\n```\n\nTo make a more flexible Compound, use more granular styles hash:\n\n```ruby\nButton = Molecular.compound(\n  color: 'white',\n  bg: 'black',\n  size: 'f6',\n  hover: 'link dim',\n  padding: 'ph3 pv2',\n  margin: 'mb2',\n  display: 'dib',\n)\n```\n\n```erb\n\u003ca class=\"\u003c%= Button.(size: 'f3', padding: 'pa2', margin: nil) %\u003e\"\u003e\n  This button was easier to tweak\n\u003c/a\u003e\n```\n\n---\n\n## Usage (framework-specific)\n\nIf you skipped straight to this section from the TOC, make sure to read the\n[generic usage section](#usage-generic) first!\n\nThese examples use Molecular and [tachyons.css][button] to style a button in\nRails, Sinatra, and Roda.\n\n* [Rails](#rails)\n* [Sinatra](#sinatra)\n* [Roda](#roda)\n\n### Rails\n\n**Step 1:**\n\nImport tachyons.css into your asset pipeline, either directly or via the\n[tachyons-rails gem][tachyons-gem]\n\n**Step 2:**\n\nCreate a `StyleHelper` in `app/helpers/style_helper.rb` and build some\ncompounds:\n\n```ruby\nmodule StyleHelper\n  def ui_button\n    Molecular.compound(\n      color: 'white',\n      bg: 'black',\n      size: 'f6',\n      hover: 'link dim',\n      padding: 'ph3 pv2',\n      margin: 'mb2',\n      display: 'dib',\n    )\n  end\nend\n```\n\n**Step 3:**\n\nUse your StyleHelper methods in your views:\n\n```erb\n\u003c!-- app/views/welcome/index.erb --\u003e\n\u003ca class=\"\u003c%= ui_button %\u003e\"\u003eA styled button\u003c/a\u003e\n\u003ca class=\"\u003c%= ui_button.(bg: 'bg-blue') %\u003e\"\u003eA blue button\u003c/a\u003e\n```\n\n### Sinatra\n\n**Step 1:**\n\nInclude the `tachyons.css` stylesheet somewhere in your app's layout.\n\n**Step 2:**\n\nCreate a StyleHelper somewhere:\n\n```ruby\nmodule StyleHelper\n  def ui_button\n    Molecular.compound(\n      color: 'white',\n      bg: 'black',\n      size: 'f6',\n      hover: 'link dim',\n      padding: 'ph3 pv2',\n      margin: 'mb2',\n      display: 'dib',\n    )\n  end\nend\n```\n\n**Step 3:**\n\nMake your StyleHelper available to your app's helper methods:\n\n```ruby\nrequire_relative 'wherever_you_put_it/style_helper'\n\nclass MyApp \u003c Sinatra::Application\n  helpers StyleHelper\n\n  get '/' do\n    erb :my_template\n  end\nend\n```\n\n**Step 4:**\n\nUse your StyleHelper methods in your views:\n\n```erb\n\u003c!-- views/my_template.erb --\u003e\n\u003ca class=\"\u003c%= ui_button %\u003e\"\u003eA styled button\u003c/a\u003e\n\u003ca class=\"\u003c%= ui_button.(bg: 'bg-blue') %\u003e\"\u003eA blue button\u003c/a\u003e\n```\n\n### Roda\n\n**Step 1:**\n\nInclude the `tachyons.css` stylesheet somewhere in your app's layout.\n\n**Step 2:**\n\nCreate a StyleHelper somewhere:\n\n```ruby\nmodule StyleHelper\n  def ui_button\n    Molecular.compound(\n      color: 'white',\n      bg: 'black',\n      size: 'f6',\n      hover: 'link dim',\n      padding: 'ph3 pv2',\n      margin: 'mb2',\n      display: 'dib',\n    )\n  end\nend\n```\n\n**Step 3:**\n\nInclude StyleHelper in your app:\n\n```ruby\nrequire_relative 'wherever_you_put_it/style_helper'\n\nclass MyApp \u003c Roda\n  plugin :render\n  include StyleHelper\n\n  route do |r|\n    get('/') { view('stylish') }\n  end\nend\n```\n\n**Step 4:**\n\nUse your StyleHelper methods in your views:\n\n```erb\n\u003c!-- views/stylish.erb --\u003e\n\u003ca class=\"\u003c%= ui_button %\u003e\"\u003eA styled button\u003c/a\u003e\n\u003ca class=\"\u003c%= ui_button.(bg: 'bg-blue') %\u003e\"\u003eA blue button\u003c/a\u003e\n```\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run\n`rake spec` to run the tests. You can also run `bin/console` for an interactive\nprompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`. To\nrelease a new version, update the version number in `version.rb`, and then run\n`bundle exec rake release`, which will create a git tag for the version, push\ngit commits and tags, and push the `.gem` file to\n[rubygems.org](https://rubygems.org).\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at\nhttps://github.com/chrisfrank/molecular.\n\n## Related Projects\n\n* [Tachyons.css][tachyons]\n* [Nanostyled (JS)](https://github.com/chrisfrank/nanostyled)\n\n[tachyons]: http://tachyons.io/\n[button]: http://tachyons.io/components/buttons/basic/index.html\n[tachyons-rails]: https://github.com/maggy96/tachyons-rails\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisfrank%2Fmolecular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisfrank%2Fmolecular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisfrank%2Fmolecular/lists"}