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

Wenn Sie mit der Entwicklung für das Web beginnen und Ihr Fokus nicht auf der Spezialisierung auf das Frontend liegt, besteht eine der Hürden, die am schmerzhaftesten sein kann, darin, Ihr Design einfach gestalten zu können Hässliches HTML.

Für diejenigen, die den ersten Kontakt haben, ist es etwas Rätselhaftes, Mystisches, Übernatürliches, wenn man versucht, HTML zu verstehen, das eine Folge von Buchstaben und Zahlen mit vordefinierten Hilfsklassen hat, um Stile auf HTML anzuwenden, zum Beispiel:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

CSS-Frameworks, die Utility-Klassen verwenden, sind ausgezeichnet, vielseitig, reaktionsschnell, elegant und haben viele andere Eigenschaften, aber Tailwind CSS ist nicht die einzige Lösung. Wenn Sie etwas Schnelles und Einfacheres benötigen, ist die Verwendung eines klassenlosen oder klassenarmen CSS-Frameworks die bessere Lösung.

Klassenlose CSS-Frameworks formatieren HTML-Elemente direkt, ohne Klassen. Class-Light-Frameworks kombinieren automatische Stile mit einigen optionalen Utility-Klassen zur Anpassung, was ihre Verwendung vielseitiger macht.

Mit einem klassenlosen oder klassenleichten Ansatz können Sie das HTML-Styling schnell mit einer, zwei oder drei Zeilen lösen.

Wir werden unten sehen:

• Verwendung des Ruby on Rails-Frameworks in Version 8, mit Propshaft und Importmap;
• Kennenlernen der Datei mit dem Standardlayout von HTML-Seiten;
• Erstellen und Hinzufügen von Inhalten zu 4 HTML-Seiten, um das Styling mit CSS zu testen;
• Eine kurze Erwähnung der für die Seiten erstellten Routen;
• Ändern Sie das Standardlayout, um den Link zu den erstellten Seiten einzuschließen;
• Fügen Sie 12 CSS-Frameworks über CDN zum Standardlayout hinzu;
• Wissen Sie, wie Sie feststellen können, ob in den CSS-Frameworks standardmäßig der Hell- und Dunkelmodus konfiguriert ist;
• Vorschläge für die nächsten Schritte;

Starten Sie eine neue Rails-Anwendung

• Die Zeit vor dem Rails-Befehl wird verwendet, um seine Ausführungszeit am Ende der Befehlsausführung anzuzeigen. Im Beispiel unten dauerte es 47 Sekunden.

$ rails -v
Rails 8.0.0

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

Rails 8 verwendet im Rahmen seiner No-Build-Philosophie standardmäßig Propshaft als Asset-Pipeline-Bibliothek und Importmap als JavaScript-Bibliothek. Wir bitten Sie, die Testbibliothek mit --skip-test zu überspringen.
Bei Bedarf können Sie Ihr JavaScript mit esbuild verarbeiten, indem Sie den Parameter --javascript esbuild übergeben. Importmap führt keine Erstellung oder Verarbeitung von JavaScript durch.

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

$ cd classless-css-cdn && code .

 

Kennen des Standard-Rails-Layouts app/views/layouts/application.html.erb.

Mehr anzeigen…

• Gemäß Convention over Configuration (CoC) verwendet Rails application.html.erb als Standardlayout zum Rendern aller Seiten;
• Die Originaldatei in Rails 8 muss den gleichen oder einen ähnlichen Inhalt haben wie die unten kopierte:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

• Der obere Teil im … Sie verfügen über die wichtigen Strukturelemente für die korrekte Darstellung und Funktion der Seite. Das Head-Tag wird verwendet, um wichtige Metadaten und Ressourcen einzuschließen, die dabei helfen, das Verhalten der Seite (mit Javascript), ihr Erscheinungsbild (mit CSS), ihre Beziehung zu anderen Systemen und Diensten sowie Sicherheitseinstellungen wie den Schutz für CSRF und CSP zu konfigurieren ;
• Der Hauptinhalt der Seiten wird innerhalb von gerendert. , über das ERB-Tag <%= yield %>. Dieses Tag dient als Integrationspunkt, um den Inhalt einer von Rails dynamisch gerenderten Ansicht einzuschließen.

 

Testseiten generieren, mit einem Controller-Seiten und den Aktionen html_test_1, html_test_2, html_test_3 und html_test_4

Mehr anzeigen…

$ rails -v
Rails 8.0.0

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

• Wie bei der Erstellung des Controllers und der oben genannten Aktionen wurden auch die Routen hinzugefügt, sodass Sie auf alle über die Links erstellten Aktionen zugreifen können
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4

 

Öffnen Sie die Datei config/routes.rb in VSCode

• Fügen Sie die folgende Zeile am Ende der Datei ein, um den Seitenstamm auf die zuvor erstellten Controller-Seiten und die Aktion html_test_1 zu leiten. Daher ist die erste Seite, die beim Zugriff auf Ihre Website oder Ihr System angezeigt wird, die Seite html_test_1 der Controller-Seiten. Andernfalls würde die Standard-Rails-Seite angezeigt.

$ cd classless-css-cdn && code .

• Sie hätten das Hinzufügen der Routen zu den erstellten Aktionen ignorieren können, wenn Sie beim Erstellen des Controllers den Parameter --skip-routes übergeben hätten. Der vollständige Befehl würde lauten: Rails G Controller Pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

 

Anzeige von Rails-Routen

Mehr anzeigen…

Mit dem Terminal können Sie die Routen durch Angabe eines Controllers (mit -c) anzeigen, beispielsweise von Controller-Seiten aus

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

Oder Sie können sich mit
alle Routen anzeigen lassen

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

• Es ist auch möglich, über den Browser über die Adresse http://127.0.0.1:3000/rails/info/routes auf die Routen zuzugreifen. Vergessen Sie nicht, den Entwicklungsserver mit bin/dev oder den Standard-Rails-Server mit Rails-Server aus dem Stammverzeichnis Ihres Projekts zu starten. Der Entwicklungsserver „lauscht“ auf Änderungen in Javascript-Dateien und CSS-Dateien, um die notwendige Verarbeitung durchzuführen, um sie den Benutzern verfügbar zu machen.
• Damit Änderungen an diesen Dateien vorgenommen und sofort im Browser angezeigt werden können, muss ein Juwel wie Rails Livre Reload installiert werden.

Lassen Sie uns vier Seiten mit HTML-Inhalten erstellen, um die CSS-Stile zu testen.

Ruby on Rails verwendet standardmäßig die MVC-Architektur (Model-View-Controller), um mit der Organisation Ihres Projekts zu beginnen. Ein Großteil Ihres Codes ist in den folgenden Ordnern organisiert:

• Wenn sich der Code auf Domänen-/Geschäftslogik und Daten bezieht, bewahren Sie ihn im Ordner „app/models“ auf;
• Der mit der Ansicht verknüpfte Code (HTML, JSON, XML usw.) befindet sich in app/views;
• Code, der sich auf den Anforderungslebenszyklus bezieht, befindet sich in App/Controllern;

 

Fügen Sie den Inhalt der Seite html_test_1 ein

Mehr anzeigen…

• Greifen Sie auf den Link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html zu und kopieren Sie den gesamten Inhalt des Haupt-Tags, wie unten gezeigt

$ rails -v
Rails 8.0.0

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

Starten Sie den Rails-Server und sehen Sie das hässliche einfache HTML?

Mehr anzeigen…

• Starten Sie den Rails-Entwicklungsserver mit bin/dev oder den Standardserver mit Rails-Server und öffnen Sie den Browser bei 127.0.0.1:3000

$ cd classless-css-cdn && code .

• Nach dem Öffnen der Seite sehen Sie oben die vier Links, die wir zu den zuvor erstellten Seiten html_test_1, html_test_2, html_test_3 und html_test_4 hinzugefügt haben.
• So viel Arbeit bisher. Öffnen Sie jedes einzelne und Sie werden feststellen, dass der HTML-Code noch nicht mit CSS formatiert wurde, was wir als Nächstes tun werden

Öffnen Sie die Seite app/views/layouts/application.html.erb erneut, um klassenlose CSS-Stile über CDN einzuschließen

Mehr anzeigen…

• Nach dem Inhalt unten

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

• Fügen Sie vor den folgenden Inhalt ein. Sie benötigen nicht alle dieser Stile, sie wurden eingefügt, damit Sie verschiedene Optionen testen können.

$ rails -v
Rails 8.0.0

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

• 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 das CDN des Stils konfiguriert, in diesem Fall die Zeile und entkommentieren Sie die Zeile aus einem anderen Stil, zum Beispiel der Simple CSS-Zeile.
• Um eine Zeile mit VSCode zu kommentieren und zu kommentieren, verwenden Sie die Tastenkombination Strg K C.

Nun ja, stilvolles HTML?

Nachdem Sie die oben genannten Stylesheets gespeichert und den Rails-Server gestartet haben, wird Ihr HTML mit den ausgewählten CSS-Frameworks gestaltet.

Dunkler Modus

Einige Stile verfügen über die Option für den Dunkelmodus. Ändern Sie zur Bestätigung das Design Ihres Computers in den Farbanpassungsoptionen. Suchen Sie in Windows nach „Dunklen Modus für Apps aktivieren“ und wechseln Sie zwischen dunklem und hellem Modus. Die HTML-Seite ändert sich automatisch nach der Änderung im Betriebssystem al.

Nächste Schritte

• Organisieren Sie die Stile nach Ihren Wünschen;
• Wenn Sie etwas mehr Zeit mit dem Frontend verbringen möchten, schauen Sie sich die Anpassungsoptionen für Ihren Lieblingsstil an;
• Änderungen, die am Projekt im Browser vorgenommen wurden, mithilfe von Rails Live Reload dynamisch aktualisieren;
• Styling aus Projekt-CSS-Dateien verwenden, ohne CDN zu verwenden;
• Replizieren Sie die Fähigkeiten des klassenlosen CSS-Frameworks mit Tailwind;

Referenzen

• https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
• https://prismic.io/blog/best-css-frameworks
• https://saeedesmaili.com/notes/classless-css-libraries/
• https://dev.to/logrocket/comparing-classless-css-frameworks-3267
• https://github.com/dbohdan/classless-css
• https://github.com/troxler/awesome-css-frameworks

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