Ruby on Rails Fast Frontend Using Zero CSS as a Classless CSS Frameworks

This article is very similar to previous articles in this series, but this time we will use a newly created excellent CSS framework CSS Zero, which can be used for "no build" projects or Ruby on Rails applications that require "build".

It should be noted that the CSS Zero framework does not aim to be a completely classless or lightweight classless framework. The modifications suggested in this article are for testing purposes only and are designed to style all elements in this tutorial's HTML page without adding any classes.

As a result, the formatting of some HTML elements may not match the style, design, layout, and behavior recommended by the CSS Zero framework. To see what to expect from the CSS Zero framework, visit the CSS Zero lookbook: [Add lookbook link here]. To see it in action as a classless framework, follow the steps below.

Create a new Rails app

• rails new The time before the command is used to display the total time of command execution. The following example took 47 seconds.

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Rails 8, based on its "no build required" philosophy, uses Propshaft as the resource pipeline library and Importmap as the JavaScript library by default. Importmap does not perform any JavaScript processing.

Open the project using VSCode or your favorite editor

<code>$ cd classless-css-zero && code .</code>

Create some pages to view the styles of HTML elements

The page is located in the "Common Steps" section of the first article in this series.

Add CSS Zero to your project

Expand…

Follow these steps to add CSS Zero to your project:

<code>$ bundle add css-zero
$ bin/rails generate css_zero:install</code>

To see the available components, run the following command:

<code>$ bin/rails generate css_zero:add --help</code>

To add all components, run the following command:

<code>bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share</code>

Please note that the above command will not work if other components are added or some components are removed.

Part 1 - Modify app/assets/stylesheets/base.css file

Expand…

In the Headings link, we can see that many styling elements need to be included in an element with `

`.

<code><div>
  ...
</div></code>

In order to style these HTML elements without using <div> we will make the following modifications. <pre class="brush:php;toolbar:false">&lt;code&gt;body { background-color: var(--color-bg); color: var(--color-text); font-synthesis-weight: none; text-rendering: optimizeLegibility; /* 无类配置测试 */ font-size: var(--text-fluid-base); /* max-inline-size: 65ch; */ /* 抗锯齿字体 */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--font-extrabold); hyphens: auto; letter-spacing: -0.02ch; line-height: 1.1; margin-block: 0.5em; overflow-wrap: break-word; text-wrap: balance; } }&lt;/code&gt;</pre> <p>Open the <code>app/assets/stylesheets/base.css file, find the body { line, and paste the copied content after text-rendering: optimizeLegibility;. After pasting, delete or comment out the max-inline-size: 65ch; lines. The content of body should be the same as the example above.

Next, open the app/assets/stylesheets/prose.css file and copy the section containing:

<code>/* 无类配置测试 */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.8em;
  }

  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }

  :is(b, strong) {
    font-weight: var(--font-bold);
  }

  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded);
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }

  code {
    padding: 0.1em 0.3em;
  }

  pre {
    border-radius: 0.5em;
    overflow-x: auto;
    padding: 0.5lh 2ch;
    text-wrap: nowrap;
  }

  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }

  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }

  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }

  blockquote p {
    hyphens: none;
  }

  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }

  th {
    font-weight: var(--font-bold);
  }

  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }

  th {
    border-block-end-width: 3px;
  }

  del {
    background-color: rgb(from var(--color-negative) r g b / .1);
    color: var(--color-negative);
  }

  ins {
    background-color: rgb(from var(--color-positive) r g b / .1);
    color: var(--color-positive);
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }</code>

Paste the above into the app/assets/stylesheets/base.css end of the file .

Part 2 - Modify app/assets/stylesheets/button.css file

Expand…

Modify the `.btn` CSS class so that all HTML button elements automatically use this style.

will:

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

changed to:

<code>$ cd classless-css-zero && code .</code>

Part 3 - Modify app/assets/stylesheets/input.css File

Expand…

Modify the `.input` CSS class so that all HTML input elements automatically use this style. Similarly, modify the `.checkbox`, `.radio`, `.range` selectors so that they apply to all corresponding HTML tags. The specific modification method is similar to the second part, please refer to the modification method in the second part.

Adjust app/views/layouts/application.html.erb file

Expand…

The link will appear differently depending on where in `application.html.erb` you place the reference to the test HTML file. If you want the demo to look the same as the tutorial, please modify the corresponding section.

Now, use CSS Zero as a classless framework to style HTML?

After configuring CSS Zero and making the above customizations, start the Rails server and you will see the styled HTML.

Dark Mode

Some styles have dark mode options. To confirm this, change the theme in your computer's color personalization settings. Search Windows for "enable dark mode for apps" and toggle between dark mode and light mode. After changing the operating system settings, the HTML page should automatically change to indicate that it supports light mode and dark mode.

Next Steps

[x] Organize styles according to your preferences; [x] Use CSS files in the project for styling instead of CDN; [x] Use Tailwind to replicate the functionality of classless CSS frameworks; [-] Use Rails Live Reload to dynamically update changes in your project in the browser; [-] If you want to spend more time on the front-end, check out the customization options for your favorite styles;

References

• https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f
• https://guides.rubyonrails.org/layouts_and_rendering.html
• https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
• https://prismic.io/blog/best-css-frameworks
• https://saeedesmaili.com/notes/classless-css-libraries/
• https://dev.to/logrocket/comparing-classless-css-frameworks-3267
• https://github.com/dbohdan/classless-css
• https://github.com/troxler/awesome-css-frameworks