https://github.com/douglas-vitoriano/picocss-gem
Easily use PicoCSS with Rails, Bridgetown, and Sinatra
https://github.com/douglas-vitoriano/picocss-gem
bridgetown css gem html picocss rails ruby ruby-on-rails rubygems sinatra
Last synced: about 1 month ago
JSON representation
Easily use PicoCSS with Rails, Bridgetown, and Sinatra
- Host: GitHub
- URL: https://github.com/douglas-vitoriano/picocss-gem
- Owner: douglas-vitoriano
- License: mit
- Created: 2025-10-29T21:43:25.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-30T02:18:11.000Z (8 months ago)
- Last Synced: 2026-02-19T12:05:05.338Z (4 months ago)
- Topics: bridgetown, css, gem, html, picocss, rails, ruby, ruby-on-rails, rubygems, sinatra
- Language: Ruby
- Homepage: https://rubygems.org/gems/picocss-gem
- Size: 1.06 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.pt-BR.txt
Awesome Lists containing this project
README
# Picocss::Gem
`picocss-gem` is a **Ruby gem** that integrates [PicoCSS](https://picocss.com) 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](./README.pt-BR.md)
---
## 🌟 Features
* ✅ 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_`)
* ✅ Login template generator (`bin/rails generate picocss:template_login`)
---
## 💾 Installation
Add to your **Gemfile**:
```ruby
gem "picocss-gem", "~> 0.1.0"
```
Then run:
```bash
bundle install
```
Or install directly:
```bash
gem install picocss-gem
```
---
## 🛠️ Usage
### Rails
#### Default PicoCSS
1. Add PicoCSS to your layout:
```erb
<%= stylesheet_link_tag "pico.min", media: "all" %>
```
2. Copy the CSS to your project:
```bash
bin/rails generate picocss:install
```
3. Restart your server:
```bash
rails server
```
---
#### 🎨 Install a Theme
```bash
bin/rails generate picocss:install_
```
| Theme | Color |
| ------- | ----- |
| red | ![]()
|
| pink | ![]()
|
| fuchsia | ![]()
|
| purple | ![]()
|
| violet | ![]()
|
| indigo | ![]()
|
| blue | ![]()
|
| cyan | ![]()
|
| jade | ![]()
|
| green | ![]()
|
| lime | ![]()
|
| yellow | ![]()
|
| pumpkin | ![]()
|
| orange | ![]()
|
| sand | ![]()
|
| grey | ![]()
|
| zinc | ![]()
|
| slate | ![]()
|
Example:
```bash
bin/rails generate picocss:install_blue
```
---
#### 👤 Login Template Generator
```bash
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
```erb
Login
Email
Password
Remember me
Login
```
---
### Sinatra
```ruby
require "sinatra"
require "picocss"
register Picocss::Sinatra
```
```html
```
```bash
ruby app.rb
```
---
### Bridgetown
```ruby
gem "picocss-gem", "~> 0.1.0"
```
CSS Copy automatically to:
```
output/assets/css/pico.min.css
```
Include in layout:
```html
```
Build and serve:
```bash
bridgetown build
bridgetown serve
```
---
## ⚡ Generators Summary
| Command | Description |
| -------------------------------------------- | ---------------------------------------------- |
| `bin/rails generate picocss:install` | Copy `pico.min.css` |
| `bin/rails generate picocss:install_` | Copy a themed CSS (e.g. `pico.blue.min.css`) |
| `bin/rails generate picocss:template_login` | Copy login template |
---
## 🧪 Development
```bash
bin/setup
rake spec
bin/console
bundle exec rake install
bundle exec rake release
```
---
## 📝 License
MIT License. See [LICENSE](./LICENSE.txt)