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

If you are starting to develop for the web 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 via CDN to the default layout;
• 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-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Rails 8, within its No Build philosophy, will use by default Propshaft as the asset pipeline library and Importmap as the JavaScript library. We ask you to skip the test library with --skip-test.
If necessary, you can process your JavaScript using esbuild by passing the --javascript esbuild parameter. Importmap does not perform any build or any type of processing on JavaScript.

Open the project with VSCode or your preferred editor

$ cd classless-css-cdn && 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-cdn --skip-test
...
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-cdn && 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-cdn --skip-test
...
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-cdn && 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

Reopen the app/views/layouts/application.html.erb page to include classless CSS styles via CDN

Show more…

• After the content 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"
>

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

$ rails -v
Rails 8.0.0

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

• 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 configures the style's CDN, in this case the line and uncomment the line from another style, for example, the Simple CSS line.
• To comment and uncomment a line with VSCode, use the Ctrl K C key combination.

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 in Windows for Enable dark mode for apps and switch between dark or light mode and the HTML page automatically changes after the change in the operating system al.

Next steps

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

References

• 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 Usando CDN. For more information, please follow other related articles on the PHP Chinese website!