{"id":32929225,"url":"https://github.com/douglas-vitoriano/picocss-gem","last_synced_at":"2026-05-07T09:33:07.747Z","repository":{"id":321484696,"uuid":"1086045257","full_name":"douglas-vitoriano/picocss-gem","owner":"douglas-vitoriano","description":"Easily use PicoCSS with Rails, Bridgetown, and Sinatra","archived":false,"fork":false,"pushed_at":"2025-10-30T02:18:11.000Z","size":1110,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-19T12:05:05.338Z","etag":null,"topics":["bridgetown","css","gem","html","picocss","rails","ruby","ruby-on-rails","rubygems","sinatra"],"latest_commit_sha":null,"homepage":"https://rubygems.org/gems/picocss-gem","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/douglas-vitoriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.pt-BR.txt","code_of_conduct":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-29T21:43:25.000Z","updated_at":"2025-10-30T02:32:19.000Z","dependencies_parsed_at":"2025-10-29T23:21:16.789Z","dependency_job_id":"24c49214-8d61-44d4-aecd-2c86d0434a7f","html_url":"https://github.com/douglas-vitoriano/picocss-gem","commit_stats":null,"previous_names":["douglas-vitoriano/picocss-gem"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/douglas-vitoriano/picocss-gem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglas-vitoriano%2Fpicocss-gem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglas-vitoriano%2Fpicocss-gem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglas-vitoriano%2Fpicocss-gem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglas-vitoriano%2Fpicocss-gem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/douglas-vitoriano","download_url":"https://codeload.github.com/douglas-vitoriano/picocss-gem/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglas-vitoriano%2Fpicocss-gem/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32731407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["bridgetown","css","gem","html","picocss","rails","ruby","ruby-on-rails","rubygems","sinatra"],"created_at":"2025-11-11T11:18:07.062Z","updated_at":"2026-05-07T09:33:07.742Z","avatar_url":"https://github.com/douglas-vitoriano.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Picocss::Gem\n\n`picocss-gem` is a **Ruby gem** that integrates [PicoCSS](https://picocss.com) into Ruby applications.\nIt works with **Rails**, **Bridgetown**, and **Sinatra**, providing:\n\n* Automatic inclusion of PicoCSS assets\n* Rails generators (base + theme + login template)\n* Multi-framework support for Ruby apps\n\n\u003e Documentation also available in Portuguese: [Português](./README.pt-BR.md)\n\n---\n\n## 🌟 Features\n\n* ✅ Rails, Sinatra, and Bridgetown support\n* ✅ PicoCSS included and ready for production\n* ✅ Easy setup and integration\n* ✅ Generators for Rails (`bin/rails generate picocss:install`)\n* ✅ Theme generators (`bin/rails generate picocss:install_\u003ctheme\u003e`)\n* ✅ Login template generator (`bin/rails generate picocss:template_login`)\n\n---\n\n## 💾 Installation\n\nAdd to your **Gemfile**:\n\n```ruby\ngem \"picocss-gem\", \"~\u003e 0.1.0\"\n```\n\nThen run:\n\n```bash\nbundle install\n```\n\nOr install directly:\n\n```bash\ngem install picocss-gem\n```\n\n---\n\n## 🛠️ Usage\n\n### Rails\n\n#### Default PicoCSS\n\n1. Add PicoCSS to your layout:\n\n```erb\n\u003c%= stylesheet_link_tag \"pico.min\", media: \"all\" %\u003e\n```\n\n2. Copy the CSS to your project:\n\n```bash\nbin/rails generate picocss:install\n```\n\n3. Restart your server:\n\n```bash\nrails server\n```\n\n---\n\n#### 🎨 Install a Theme\n\n```bash\nbin/rails generate picocss:install_\u003ccolor\u003e\n```\n\n| Theme   | Color |\n| ------- | ----- |\n| red     | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23ff0000'/\u003e\u003c/svg\u003e\" /\u003e |\n| pink    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23ffc0cb'/\u003e\u003c/svg\u003e\" /\u003e |\n| fuchsia | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23ff00ff'/\u003e\u003c/svg\u003e\" /\u003e |\n| purple  | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23800080'/\u003e\u003c/svg\u003e\" /\u003e |\n| violet  | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23ee82ee'/\u003e\u003c/svg\u003e\" /\u003e |\n| indigo  | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%234b0082'/\u003e\u003c/svg\u003e\" /\u003e |\n| blue    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%230000ff'/\u003e\u003c/svg\u003e\" /\u003e |\n| cyan    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%2300ffff'/\u003e\u003c/svg\u003e\" /\u003e |\n| jade    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%232e8b57'/\u003e\u003c/svg\u003e\" /\u003e |\n| green   | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23008000'/\u003e\u003c/svg\u003e\" /\u003e |\n| lime    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%2300ff00'/\u003e\u003c/svg\u003e\" /\u003e |\n| yellow  | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23ffff00'/\u003e\u003c/svg\u003e\" /\u003e |\n| pumpkin | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23ff8c00'/\u003e\u003c/svg\u003e\" /\u003e |\n| orange  | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23ffa500'/\u003e\u003c/svg\u003e\" /\u003e |\n| sand    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23f4a460'/\u003e\u003c/svg\u003e\" /\u003e |\n| grey    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23808080'/\u003e\u003c/svg\u003e\" /\u003e |\n| zinc    | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23a9a9a9'/\u003e\u003c/svg\u003e\" /\u003e |\n| slate   | \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'\u003e\u003crect width='15' height='15' rx='3' ry='3' fill='%23708090'/\u003e\u003c/svg\u003e\" /\u003e |\n\nExample:\n\n```bash\nbin/rails generate picocss:install_blue\n```\n\n---\n\n#### 👤 Login Template Generator\n\n```bash\nbin/rails generate picocss:template_login\n```\n\nThis will copy the login template to:\n\n```\napp/views/sessions/new.html.erb\n```\n\nTemplate highlights:\n\n* Centered form with vertical alignment\n* Fields: Email, Password, \"Remember me\" checkbox\n* Dark background with contrasting buttons\n* Fully responsive container\n\n```erb\n\u003cmain class=\"container\" style=\"background-color:#111; height:100vh; display:flex; justify-content:center; align-items:center;\"\u003e\n  \u003cform method=\"post\" action=\"/login\" style=\"width:300px;\"\u003e\n    \u003ch1 style=\"color:white;\"\u003eLogin\u003c/h1\u003e\n    \u003clabel\u003eEmail\u003c/label\u003e\n    \u003cinput type=\"email\" required\u003e\n    \u003clabel\u003ePassword\u003c/label\u003e\n    \u003cinput type=\"password\" required\u003e\n    \u003cdiv\u003e\n      \u003cinput type=\"checkbox\"\u003e\n      \u003clabel\u003eRemember me\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cbutton type=\"submit\"\u003eLogin\u003c/button\u003e\n  \u003c/form\u003e\n\u003c/main\u003e\n```\n\n---\n\n### Sinatra\n\n```ruby\nrequire \"sinatra\"\nrequire \"picocss\"\n\nregister Picocss::Sinatra\n```\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/assets/stylesheets/pico.min.css\" /\u003e\n```\n\n```bash\nruby app.rb\n```\n\n---\n\n### Bridgetown\n\n```ruby\ngem \"picocss-gem\", \"~\u003e 0.1.0\"\n```\n\nCSS Copy automatically to:\n\n```\noutput/assets/css/pico.min.css\n```\n\nInclude in layout:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/assets/css/pico.min.css\" /\u003e\n```\n\nBuild and serve:\n\n```bash\nbridgetown build\nbridgetown serve\n```\n\n---\n\n## ⚡ Generators Summary\n\n| Command                                      | Description                                    |\n| -------------------------------------------- | ---------------------------------------------- |\n| `bin/rails generate picocss:install`         | Copy `pico.min.css`                          |\n| `bin/rails generate picocss:install_\u003ctheme\u003e` | Copy a themed CSS (e.g. `pico.blue.min.css`) |\n| `bin/rails generate picocss:template_login`  | Copy login template                          |\n\n---\n\n## 🧪 Development\n\n```bash\nbin/setup\nrake spec\nbin/console\nbundle exec rake install\nbundle exec rake release\n```\n\n---\n\n## 📝 License\n\nMIT License. See [LICENSE](./LICENSE.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdouglas-vitoriano%2Fpicocss-gem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdouglas-vitoriano%2Fpicocss-gem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdouglas-vitoriano%2Fpicocss-gem/lists"}