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

Open the project with VSCode or your preferred editor

$ cd classless-css && code .

 

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

Show more…

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

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

    

    
    

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

    
    
    
  

  
    
  

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

• 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

• 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

$ cd classless-css && code .

Or you can display all routes with

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

    

    
    

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

    
    
    
  

  
    
  

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

Show more…

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

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

root "pages#html_test_1"

• 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

Show more…

• 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

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

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