Picocss::Gem

picocss-gem is a Ruby gem that integrates PicoCSS into Ruby applications. It works with Rails, Bridgetown, and Sinatra, providing:

• Automatic inclusion of PicoCSS assets
• Rails generators (base + theme + login template)
• Multi-framework support for Ruby apps

Documentation also available in Portuguese: Português

• ✅ Rails, Sinatra, and Bridgetown support
• ✅ PicoCSS included and ready for production
• ✅ Easy setup and integration
• ✅ Generators for Rails (bin/rails generate picocss:install)
• ✅ Theme generators (bin/rails generate picocss:install_<theme>)
• ✅ Login template generator (bin/rails generate picocss:template_login)

Add to your Gemfile:

gem "picocss-gem", "~> 0.1.0"

Then run:

bundle install

Or install directly:

gem install picocss-gem

1. Add PicoCSS to your layout:

<%= stylesheet_link_tag "pico.min", media: "all" %>

2. Copy the CSS to your project:

bin/rails generate picocss:install

3. Restart your server:

rails server

bin/rails generate picocss:install_<color>

Theme	Color
red
pink
fuchsia
purple
violet
indigo
blue
cyan
jade
green
lime
yellow
pumpkin
orange
sand
grey
zinc
slate

Example:

bin/rails generate picocss:install_blue

bin/rails generate picocss:template_login

This will copy the login template to:

app/views/sessions/new.html.erb

Template highlights:

• Centered form with vertical alignment
• Fields: Email, Password, "Remember me" checkbox
• Dark background with contrasting buttons
• Fully responsive container

<main class="container" style="background-color:#111; height:100vh; display:flex; justify-content:center; align-items:center;">
  <form method="post" action="/login" style="width:300px;">
    <h1 style="color:white;">Login</h1>
    <label>Email</label>
    <input type="email" required>
    <label>Password</label>
    <input type="password" required>
    <div>
      <input type="checkbox">
      <label>Remember me</label>
    </div>
    <button type="submit">Login</button>
  </form>
</main>

require "sinatra"
require "picocss"

register Picocss::Sinatra

<link rel="stylesheet" href="/assets/stylesheets/pico.min.css" />

ruby app.rb

gem "picocss-gem", "~> 0.1.0"

CSS Copy automatically to:

output/assets/css/pico.min.css

Include in layout:

<link rel="stylesheet" href="/assets/css/pico.min.css" />

Build and serve:

bridgetown build
bridgetown serve

bin/setup
rake spec
bin/console
bundle exec rake install
bundle exec rake release

MIT License. See LICENSE