Pure.css is a css framework that does not include JavaScript like other frameworks such as Vue, bootstrap, …

In contrast to those frameworks:

Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered.

I like it because of its extremely simple usage, particulary for the small development web servers I’m working in Ruby or go.

I have only had some quirks with it when designing responsive menus for mobile devices. There is a story on that.

Adding pure.css in Rails

There are two ways to add Pure.css to your rails application:

  • adding the style sheet link
  • adding the asset

Stylesheet

To add the link to the stylesheet on CDN, use this line:

<head>
    <title>My Title</title>
    <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 %>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
</head>

Asset

To add it as an asset, do the following.

  1. Add the following lines to the asset initializer
# config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( pure-min.css )
  1. Create a custom CSS file to include the CDN CSS in app/assets/stylesheets/application.css:
/*
 *= require_self
 *= require_tree .
*/
@import url("https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css");
  1. Ensure that application.css is included in app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
  <title>PurecssApp</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
</head>
<body>
  <%= yield %>
</body>
</html>
  1. Now restart the server

Simple index.html

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simle Pure.CSS index</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"
        integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
</head>

<body>
    <div id="layout">
        <div class="pure-menu pure-menu-horizontal">
            <a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">News</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Sports</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Finance</a>
                </li>
            </ul>
        </div>
        <div class="content">
            <div>
                <h1>Page Title</h1>
            </div>

            <h2>Sub header</h2>
            <p>
                Eu aliqua amet nisi magna adipisicing ad. Ullamco adipisicing deserunt ullamco irure elit cupidatat nulla non nulla non adipisicing. Cupidatat ex ex sunt eiusmod. Sunt minim officia Lorem reprehenderit pariatur veniam anim labore. Tempor occaecat nostrud Lorem adipisicing magna aliquip sint ea excepteur laborum eiusmod. Incididunt esse dolor commodo commodo laborum occaecat eu irure excepteur sint dolore qui voluptate sit. Proident incididunt consequat in culpa anim ex occaecat et labore et voluptate.
            </p>
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <p>Nulla nisi adipisicing mollit qui irure ullamco fugiat pariatur in velit. Nisi non anim dolor
                        fugiat proident in non veniam veniam magna laborum fugiat sint qui. Incididunt eiusmod Lorem
                        ad est. Elit voluptate Lorem sit id aliquip tempor laboris. Nisi incididunt aute velit non
                        qui consectetur veniam eiusmod esse esse reprehenderit sunt. Commodo excepteur duis mollit
                        nulla. Adipisicing duis magna mollit fugiat aliqua laborum laboris tempor cillum consequat
                        ad.</p>
                </div>
                <div class="pure-u-1-4">
                    <p>Nulla nisi adipisicing mollit qui irure ullamco fugiat pariatur in velit. Nisi non anim dolor
                        fugiat proident in non veniam veniam magna laborum fugiat sint qui. Incididunt eiusmod Lorem
                        ad est. Elit voluptate Lorem sit id aliquip tempor laboris. Nisi incididunt aute velit non
                        qui consectetur veniam eiusmod esse esse reprehenderit sunt. Commodo excepteur duis mollit
                        nulla. Adipisicing duis magna mollit fugiat aliqua laborum laboris tempor cillum consequat
                        ad.</p>
                </div>
                <div class="pure-u-1-4">
                    <p>Nulla nisi adipisicing mollit qui irure ullamco fugiat pariatur in velit. Nisi non anim dolor
                        fugiat proident in non veniam veniam magna laborum fugiat sint qui. Incididunt eiusmod Lorem
                        ad est. Elit voluptate Lorem sit id aliquip tempor laboris. Nisi incididunt aute velit non
                        qui consectetur veniam eiusmod esse esse reprehenderit sunt. Commodo excepteur duis mollit
                        nulla. Adipisicing duis magna mollit fugiat aliqua laborum laboris tempor cillum consequat
                        ad.</p>
                </div>
                <div class="pure-u-1-4">
                    <p>Nulla nisi adipisicing mollit qui irure ullamco fugiat pariatur in velit. Nisi non anim dolor
                        fugiat proident in non veniam veniam magna laborum fugiat sint qui. Incididunt eiusmod Lorem
                        ad est. Elit voluptate Lorem sit id aliquip tempor laboris. Nisi incididunt aute velit non
                        qui consectetur veniam eiusmod esse esse reprehenderit sunt. Commodo excepteur duis mollit
                        nulla. Adipisicing duis magna mollit fugiat aliqua laborum laboris tempor cillum consequat
                        ad.</p>
                </div>
            </div>
            <h2>Another Sub header</h2>
            <p>
                Aute Lorem duis commodo dolor mollit exercitation mollit adipisicing elit adipisicing laboris voluptate tempor deserunt. Adipisicing qui occaecat elit do. Non Lorem velit aliquip ipsum quis irure. Est ad ea cillum duis aliquip commodo aute mollit mollit commodo. Anim officia consectetur fugiat qui ipsum anim in duis enim.
            </p>
        </div>

    </div>


    <style>
        #layout {
            position: relative;
            left: 0;
            padding-left: 0;
        }

        .content {
            margin: 0 auto;
            padding: 0 2em;
            max-width: 800px;
            margin-bottom: 50px;
            line-height: 1.6em;
        }

        .main {
            padding: 2em;
            color: black;
        }
    </style>


</body>

</html>

Note: the piece of html code above is included in the page. The post by Marcus Olsson showed me how to do it.