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"
>

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

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 .

 

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

Show more…

• 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"
>

• 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

Show more…

$ rails -v
Rails 8.0.0

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

• 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 .

• 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

Show more…

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>

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"
>

• 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

Show more…

• 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

Start the Rails server and see the ugly plain HTML?

Show more…

• 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 .

• 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/

Show more…

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

Show more…

• 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

FOR

$ cd classless-css-local && code .

• 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>

• 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

• 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!