Home >Web Front-end >CSS Tutorial >Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight
$ 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
$ cd classless-css && code .
Show more…
<!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>
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
Open the config/routes.rb file in VSCode
$ 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
Using the terminal you can display the routes by specifying a controller (with -c), for example from controller pages Or you can display all routes with 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.Show more…
$ cd classless-css && code .
<!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>
Access the link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html and copy all the content from the main tag, as belowShow 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
Show more…
root "pages#html_test_1"
Show more…
$ 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
$ cd classless-css && code .
After saving the above stylesheets and
Some styles have the option for dark mode. To confirm, change your computer's theme in the personalization options
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!