Ruby on Rails Fast Frontend Using Zero CSS as a Classless CSS Frameworks-CSS Tutorial-php.cn

Ruby on Rails Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless

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>

Copy after login

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>

Copy after login

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>

Copy after login

To see the available components, run the following command:

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

Copy after login

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>

Copy after login

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 `<div>`.

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

Copy after login

In order to style these HTML elements without using <div> we will make the following modifications.

<code>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;
  }
}</code>

Copy after login

Open the 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>

Copy after login

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>

Copy after login

changed to:

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

Copy after login

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

The above is the detailed content of Ruby on Rails Fast Frontend Using Zero CSS as a Classless CSS Frameworks. For more information, please follow other related articles on the PHP Chinese website!