Ruby on Rails Frontend schnell mit Frameworks CSS Classless oder Class-Light mit CDN

Erstellen Sie eine neue Rails-App

Der Befehl
• time zeigt die Ausführungszeit nach Ausführung des Befehls rails serve an. Das folgende Beispiel zeigt eine Ausführungszeit von 47 Sekunden.

<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 verwendet standardmäßig Propshaft als Ressourcen-Pipeline-Bibliothek und Importmap als JavaScript-Bibliothek, basierend auf seiner „Kein Build erforderlich“-Philosophie. Importmap macht nichts mit JavaScript.

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

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

Erstellen Sie einige Seiten, um die Stile von HTML-Elementen anzuzeigen

Die Seite befindet sich im Abschnitt „Allgemeine Schritte“ des ersten Artikels der Serie.

Öffnen Sie die app/views/layouts/application.html.erb-Datei erneut und verweisen Sie über CDN auf den klassenlosen CSS-Stil

Erweitern Sie mehr…

- nach

<code class="language-html">


</code>

Fügen Sie vor
• und </head> Folgendes ein. Sie müssen nicht alle dieser Stile verwenden; sie werden hinzugefügt, damit Sie verschiedene Optionen testen können.

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

• Die meisten Stile sind auskommentiert, mit Ausnahme von Normalize CSS und Pico CSS.
• Speichern Sie die Datei und aktualisieren Sie die Seite oder starten Sie den Server neu.
• Um einen anderen Stil als Pico CSS zu testen, kommentieren Sie die Zeile aus, die den Stil-CDN festlegt (d. h. <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link>), und kommentieren Sie die Zeile für andere Stile aus, z. B. die Zeile für einfaches CSS.
• Um eine Zeile in VSCode zu kommentieren und zu kommentieren, können Sie die Tastenkombination Strg K C verwenden.

HTML-Styling mit einem CDN-basierten klassenlosen CSS-Framework?

Sobald Sie das obige Stylesheet speichern und Ihren Rails-Server starten, sehen Sie HTML, das mit dem klassenlosen CSS-Framework Ihrer Wahl gestaltet wurde.

Dunkler Modus

Einige Stile verfügen über Dunkelmodusoptionen. Ändern Sie zur Bestätigung das Thema in den Farbpersonalisierungseinstellungen Ihres Computers. Suchen Sie in Windows nach „Dunkelmodus für Apps aktivieren“ und wechseln Sie zwischen Dunkelmodus und Hellmodus. Nach der Änderung der Betriebssystemeinstellungen sollte sich die HTML-Seite automatisch ändern, um anzuzeigen, dass sie den Hellmodus und den Dunkelmodus unterstützt.

Nächste Schritte

[-] Organisieren Sie Stile nach Ihren Wünschen; [-] CSS-Dateien im Projekt zum Stylen verwenden, ohne ein CDN zu verwenden; [-] Verwenden Sie Rails Live Reload, um Änderungen in Ihrem Projekt im Browser dynamisch zu aktualisieren; [-] Wenn Sie mehr Zeit mit dem Frontend verbringen möchten, schauen Sie sich die Anpassungsoptionen für Ihre Lieblingsstile an; [-] Verwenden Sie Tailwind, um die Funktionalität klassenloser CSS-Frameworks zu replizieren;

参考资料

• 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

Das obige ist der detaillierte Inhalt vonRuby on Rails Frontend schnell mit Frameworks CSS Classless oder Class-Light mit CDN. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!