Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight-CSS Tutorial-php.cn

Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight

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 --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copy after login

Open the project with VSCode or your preferred editor

$ cd classless-css && code .

Copy after login

Knowing the Rails Standard Master Layout app/views/layouts/application.html.erb.

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

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

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

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.

$ rails -v
Rails 8.0.0

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

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

$ cd classless-css && code .

Copy after login

Or you can display all routes with

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

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 “listens” 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 such as Rails Livre Reload.

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

Insert the Page Content for the html_test_1 action

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

$ 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

Start the Rails Server and See Ugly Pure 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

root "pages#html_test_1"

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

Open the app/views/layouts/application.html.erb Page Again to Include Classless CSS Styles via CDN

After the content below

$ rails -v
Rails 8.0.0

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

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.

$ cd classless-css && code .

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

Now yes, HTML with Style?

After saving the above stylesheets and

Dark Mode

Some styles have the option for dark mode. To confirm, change your computer's theme in the personalization options

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 with Tailwind;

References

Test

The above is the detailed content of Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight. For more information, please follow other related articles on the PHP Chinese website!