Ruby on Rails Frontend Rápido com Frameworks CSS Classless ou Class-Light com CDN

Create a new Rails app

The
• time command displays the execution time after the rails serve command is executed. The following example shows an execution time of 47 seconds.

<code class="language-bash">$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Rails 8, based on its "no build required" philosophy, uses Propshaft as the resource pipeline library and Importmap as the JavaScript library by default. Importmap does not do anything with JavaScript.

Open the project using VSCode or your favorite editor

<code class="language-bash">$ cd classless-css-cdn && code .</code>

Create some pages to view the styles of HTML elements

The page is located in the "Common Steps" section of the first article in the series.

Open the app/views/layouts/application.html.erb file again and reference the classless CSS style via CDN

Expand more…

- after

<code class="language-html">


</code>

Before
• and </head>, paste the following. You don't need to use all of these styles; they are added so that you can test various options.

<code class="language-html">

     <!-- 不同浏览器之间可能存在不同的边距或字体 -->

    <link href="https://cdn.jsdelivr.net/npm/normalize.css" rel="stylesheet"></link><link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link> %>
      %>



     %>



     %>



     %>



     %>



     %>



     %>



     %>




    <link href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" rel="stylesheet"></link><link href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" rel="stylesheet"></link> %>



     %></code>

• 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 different style than Pico CSS, comment out the line that sets the style CDN (i.e. <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link>), and uncomment the line for other styles, such as the line for Simple CSS.
• To comment and uncomment a line in VSCode, you can use the shortcut key Ctrl K C.

HTML styling using a CDN-based classless CSS framework?

Once you save the above stylesheet and start your Rails server, you will see HTML styled using the classless CSS framework of your choice.

Dark Mode

Some styles have dark mode options. To confirm, change the theme in your computer's color personalization settings. Search Windows for "enable dark mode for apps" and toggle between dark mode and light mode. After changing the operating system settings, the HTML page should automatically change to indicate that it supports light mode and dark mode.

Next Steps

[-] Organize styles according to your preferences; [-] Use CSS files in the project for styling without using a CDN; [-] Use Rails Live Reload to dynamically update changes in your project in the browser; [-] If you want to spend more time on the front end, check out the customization options for your favorite styles; [-] Use Tailwind to replicate the functionality of classless CSS frameworks;

参考资料

• https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
• https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
• https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
• https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
• https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
• https://www.php.cn/link/c48eb27d5b0a288f5bbf1545c218e001

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