Skip to content

Rapid prototyping with pico.css or milligram.css for backend developers

Posted on:May 20, 2023 at 06:34 PM

Some of the developers don’t like to work with frontend. To be honest - me too. Especially for us, Lucas Larroche have developed an awesome library named pico.css (github: All you need is to add it to your application, and you can just focus on backend and use basic HTML tags and helpers. Fantastic!

Well, let’s try it with a new rails application.

rails new demo_app && cd demo_app

Then we will create a scaffold for posts …

rails g scaffold Post title body:text

… and point it as a root route

Rails.application.routes.draw do
  resources :posts
  root "posts#index"

Now, let’s try to add pico.css to your application. I’ve generated app with importmaps, so i cannot add pico.css as a npm package, but if you use cssbundling-rails gem - you’ll have no limitation. There are 3 ways to use pico.css with your app:

I’ve added it using link to CDN via adding to app/views/layouts/application.html.erb

<!DOCTYPE html>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    <!-- I've added line below -->
    <link rel="stylesheet" href="">

    <!-- I've wrapped content/yield block in .container -->
    <div class="container">
      <%= yield %>

Also, (but it is not necessary) I’ve added dark theme. For that I’ve added the following styles to app/assets/stylesheets/application.css file as described here:

/* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */
:root:not([data-theme="dark"]) {
  --primary: #ffb300;
  --primary-hover: #ffa000;
  --primary-focus: rgba(255, 179, 0, 0.125);
  --primary-inverse: rgba(0, 0, 0, 0.75);

/* Amber Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: #ffb300;
    --primary-hover: #ffc107;
    --primary-focus: rgba(255, 179, 0, 0.25);
    --primary-inverse: rgba(0, 0, 0, 0.75);

/* Amber Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #ffb300;
  --primary-hover: #ffc107;
  --primary-focus: rgba(255, 179, 0, 0.25);
  --primary-inverse: rgba(0, 0, 0, 0.75);

/* Amber (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);

Let’s check how it looks like

Well, not bad, comparing to default style

There are some more similar frameworks, but I’ve chosen another one, which doesn’t require special classes to create pretty output. It is milligram. To install it to our rails application, I’ve replaced pico’s stylesheet with the following

<!-- Google Fonts -->

<!-- CSS Reset -->

<!-- Milligram CSS -->

<!-- You should properly set the path from the main file. -->

as described here Yay! Looks good!

Now i have another problem - I cannot choose what I like more, but it is a topic for another post :)

If you like this post, you can hire me as an independent consultant for your project.
Just drop me a message using my contacts on the About me page