Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light

Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light - Sem CDN

This article is intentionally very similar to the previous one that deals with the same subject, but used CDN for the CSS frameworks, however, in this article we will use CSS files locally, copied to the project folder.

If you are starting out in web development and your focus is not to specialize in the front-end, one of the barriers that can be most painful is being able to easily style your ugly HTML.

For those who have first contact, it is something enigmatic, mystical, supernatural trying to understand HTML that has a sequence of letters and numbers with predefined utility classes to apply styles to HTML, for example:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Copy after login

CSS frameworks that use utility classes are excellent, versatile, responsive, elegant and have many other qualities, but Tailwind CSS is not the only solution. If you need something quick and simpler, using a classless or class-light CSS framework will be a better solution.

Classless CSS Frameworks style HTML elements directly, without classes. Class-light frameworks combine automatic styles with some optional utility classes for customization, which adds greater versatility to their use.

Using a classless or class-light approach you can quickly solve HTML styling with one, two or three lines.

We will see below:

Use of the Ruby on Rails framework in version 8, with Propshaft and Importmap;
Getting to know the file with the standard layout of HTML pages;
Creating and adding content to 4 HTML pages to test styling with CSS;
A brief mention of the routes created for the pages;
Change the default layout to include the link to the created pages;
Add 12 CSS frameworks by copying the files to the project;
Know how to identify whether the CSS frameworks have light and dark mode configured by default;
Suggestions for next steps;

Start a new Rails application

The time before the rails command is used to display its execution time at the end of the command execution. In the example below, it took 47 seconds.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copy after login

Rails 8, within its No Build philosophy, will use Propshaft as an asset pipeline library by default and Importmap as a JavaScript library. Importmap does not perform any type of JavaScript processing.

Open the project with VSCode or your preferred editor

$ cd classless-css-local && code .

Copy after login

Knowing the default Rails layout app/views/layouts/application.html.erb.

By Convention over Configuration (CoC), Rails uses application.html.erb as the default layout to render all pages;
The original file in Rails 8 must have the same or similar content as the one copied below:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Copy after login

The top part within the …
they have the important structural elements for the page to be rendered and function correctly. The head tag is used to include important metadata and resources that help configure the page's behavior (with javascript), its appearance (with CSS), its relationship with other systems and services, and security settings such as protection for CSRF and CSP ;
The main content of the pages will be rendered inside , through the ERB tag <%= yield %>. This tag serves as an integration point to include the content of a view dynamically rendered by Rails;

Generate test pages, with a controller pages and the actions html_test_1, html_test_2, html_test_3 and html_test_4

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copy after login

As during the creation of the controller and the actions above, the routes were also added, allowing you to access any action created from the links
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

Open the config/routes.rb file in VSCode

Include the line below at the end of the file to direct the page root to the previously created controller pages and action html_test_1. Thus, the first page to be displayed when accessing your website or system will be the html_test_1 page, from controller pages. Otherwise it would display the default rails page.

$ cd classless-css-local && code .

Copy after login

You could have ignored adding the routes to the created actions if you had passed the --skip-routes parameter when creating the controller. The full command would become rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Displaying Rails routes

Using the terminal you can display the routes by specifying a controller (with -c), for example from controller pages

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Copy after login

Or you can display all routes with

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Copy after login

It is also possible to access the routes through the browser using the address http://127.0.0.1:3000/rails/info/routes. Don't forget to start the development server with bin/dev or the standard rails server with rails server from your project's root directory. The development server is “listening” for changes in javascript files and css files to carry out the necessary processing to make them available to users.
For changes to these files to be made and viewed instantly in the browser, it is necessary to install a gem like Rails Livre Reload.

Let's create four pages with HTML content to test the CSS styles.

Ruby on Rails uses the MVC (Model-View-Controller) architecture by default to start organizing your project. Much of your code is organized in the following folders:

When the code is related to domain/business logic and data, keep it in the app/models folder;
The code related to the view (HTML, JSON, XML, etc...) will be in app/views;
Code related to the request lifecycle, will be in app/controllers;

Insert the content of the html_test_1 page

Access the link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html and copy all the contents of the main tag, as shown below

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copy after login

Start the Rails server and see the ugly plain HTML?

Start the Rails development server with bin/dev or the standard server with rails server and open the browser at 127.0.0.1:3000

$ cd classless-css-local && code .

Copy after login

After opening the page you will see at the top the four links that we added to the html_test_1, html_test_2, html_test_3 and html_test_4 pages that we created previously.
So much work so far. Open each one and you will notice that the HTML has not yet been styled with any CSS, which we will do next

Copy your CSS files to your project and paste into app/assets/stylesheets/

Consulting the Rails documentation on CSS files, we can see that we need to follow a few steps to style our web application by copying the CSS files:

Copy the file to the app/assets/stylesheets/ folder, or to a subfolder within it, for example, app/assets/stylesheets/classless
Reference this file by setting the default Rails layout in the application.html.css file with the correct tag, for example:
- If your css file was located in app/assets/stylesheets/mystylesheet.css, you must add the tag <%= stylesheet_link_tag "mystylesheet" %> without the extension .css;
- If your css file was located in app/assets/stylesheets/classless/mystylesheet.css, you must add the tag <%= stylesheet_link_tag "classless/mystylesheet" %> without the extension .css;

Let's create a classless subfolder inside app/assets/stylesheets to copy the css files downloaded from the links below:

Normalize CSS: https://necolas.github.io/normalize.css/latest/normalize.css
Pico CSS: https://github.com/picocss/pico/blob/main/css/pico.css
MVP CSS: https://andybrewer.github.io/mvp/mvp.css
Chota CSS: https://github.com/jenil/chota/blob/main/dist/chota.css
Simple CSS: https://github.com/kevquirk/simple.css/blob/main/simple.css
Classless CSS: https://classless.de/classless.css
Concrete CSS: https://github.com/louismerlin/concrete.css/blob/main/concrete.css
Almond CSS: https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
Picnic CSS: https://github.com/franciscop/picnic/blob/master/picnic.css
YACCK CSS: https://github.com/sphars/yacck/blob/master/yacck.css
Sakura CSS: https://github.com/oxalorg/sakura/blob/master/css/sakura.css
Bamboo CSS: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
Bamboo CSS only has the minified file. You can format them to make them easier to understand using services like CSS Beautifier & Minifie. Paste the code on the left and get the formatted file on the right. Rename the file to bamboo.css.
Converting Vanilla SCSS to Vanilla CSS:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Copy after login

Copy the file into the app/assets/stylesheets/classless/vanilla-framework/build/css/build.css folder and to make the code more readable, use the CSS Beautifier & Minifie website service. Paste the code on the left and get the formatted file on the right. Rename the file to vanilla.css and cut it to the app/assets/stylesheets/classless folder
Delete the app/assets/stylesheets/classless/vanilla-framework/ folder

Reopen the app/views/layouts/application.html.erb page to add the classless CSS styles copied to the project

Comment out the line <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> inserting a # after the <% so that Rails doesn't load all the styles at once. To uncomment, remove the #. If you use the VSCode shortcuts Ctrl K C to comment, the line will not be correctly commented. CHANGE FROM:

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copy after login

FOR

$ cd classless-css-local && code .

Copy after login

After the content below, with the commented line

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Copy after login

And before
, paste the following content. You don't need all of these styles, they were inserted so you can test various options.

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

Copy after login

Most styles are commented out, except Normalize CSS and Pico CSS
Save the file and refresh the page or restart the server
To test a style other than Pico CSS, comment out the line that sets the local style, in this case the line <%= stylesheet_link_tag "classless/pico" %> and uncomment the line from another style, for example, the Simple CSS line.
Don't forget that to comment on ERB tags you need to insert a # after the <%. To uncomment, remove the #. If you use the VSCode shortcuts Ctrl K C to comment, the line will not be correctly commented.

Now yes, stylish HTML?

After saving the stylesheets above and starting the Rails server you will see your HTML styled with the chosen css frameworks.

Dark mode

Some styles have the option for dark mode. To confirm, change your computer's theme in the color customization options. Search Windows for Turn on dark mode for apps and toggle between dark or light mode. The HTML page should automatically change after changing the operating system, indicating that it supports light and dark mode.

Next steps

[x] Arrange the styles according to your preference;
[x] Use styling from project CSS files, without using CDN;
[-] Dynamically update changes made to the project in the browser using Rails Live Reload;
[-] If you want to spend a little more time on the frontend, check out the customization options for your favorite style;
[-] Replicate the capability of a classless CSS framework using Tailwind;

References

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 Front-end Rápido com Frameworks CSS Classless ou Class-Light - Sem CDN. For more information, please follow other related articles on the PHP Chinese website!