Ruby on Rails Front-End schnell mit Frameworks CSS Classless oder Class-Light

Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light - Sem CDN

Dieser Artikel ist absichtlich dem vorherigen sehr ähnlich, der sich mit demselben Thema befasst, aber CDN für die CSS-Frameworks verwendet. In diesem Artikel werden wir jedoch CSS-Dateien lokal verwenden, die in den Projektordner kopiert werden.

Wenn Sie mit der Webentwicklung beginnen und sich nicht auf die Spezialisierung auf das Frontend konzentrieren, besteht eine der Hürden, die am schmerzhaftesten sein kann, darin, Ihr hässliches HTML einfach formatieren zu können.

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

Nach dem Login kopieren

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 hinzu, indem Sie die Dateien in das Projekt kopieren;
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-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Nach dem Login kopieren

Rails 8 verwendet im Rahmen seiner No-Build-Philosophie standardmäßig Propshaft als Asset-Pipeline-Bibliothek und Importmap als JavaScript-Bibliothek. Importmap führt keinerlei JavaScript-Verarbeitung durch.

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

$ cd classless-css-local && code .

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

$ rails -v
Rails 8.0.0

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

Nach dem Login kopieren

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-local && code .

Nach dem Login kopieren

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

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>

Nach dem Login kopieren

Oder Sie können alle Routen anzeigen mit

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

Nach dem Login kopieren

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

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-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Nach dem Login kopieren

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

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-local && code .

Nach dem Login kopieren

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

Kopieren Sie Ihre CSS-Dateien in Ihr Projekt und fügen Sie sie in app/assets/stylesheets/ ein.

Wenn wir die Rails-Dokumentation zu CSS-Dateien durchsehen, können wir erkennen, dass wir einige Schritte befolgen müssen, um unsere Webanwendung durch Kopieren der CSS-Dateien zu gestalten:

Kopieren Sie die Datei in den Ordner app/assets/stylesheets/ oder in einen Unterordner darin, zum Beispiel app/assets/stylesheets/classless
Referenzieren Sie diese Datei, indem Sie das Standard-Rails-Layout in der Datei application.html.css mit dem richtigen Tag festlegen, zum Beispiel:
- Wenn sich Ihre CSS-Datei in app/assets/stylesheets/mystylesheet.css befand, müssen Sie das Tag <%= stylesheet_link_tag "mystylesheet" %> hinzufügen. ohne die Erweiterung .css;
- Wenn sich Ihre CSS-Datei in app/assets/stylesheets/classless/mystylesheet.css befand, müssen Sie das Tag <%= stylesheet_link_tag "classless/mystylesheet" %> hinzufügen. ohne die Erweiterung .css;

Lassen Sie uns einen klassenlosen Unterordner in app/assets/stylesheets erstellen, um die CSS-Dateien zu kopieren, die über die folgenden Links heruntergeladen wurden:

CSS normalisieren: https://necolas.github.io/normalize.css/latest/normalize.css
Pico CSS: https://github.com/picocss/pico/blob/main/css/pico.css
MVP-CSS: https://andybrewer.github.io/mvp/mvp.css
Chota CSS: https://github.com/jenil/chota/blob/main/dist/chota.css
Einfaches CSS: https://github.com/kevquirk/simple.css/blob/main/simple.css
Klassenloses CSS: https://classless.de/classless.css
Beton-CSS: https://github.com/louismerlin/concrete.css/blob/main/concrete.css
Mandel-CSS: https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
Picknick-CSS: https://github.com/franciscop/picnic/blob/master/picnic.css
YACCK CSS: https://github.com/sphars/yacck/blob/master/yacck.css
Sakura CSS: https://github.com/oxalorg/sakura/blob/master/css/sakura.css
Bamboo CSS: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
Bamboo CSS enthält nur die minimierte Datei. Sie können sie mithilfe von Diensten wie CSS Beautifier und Minifie formatieren, um sie leichter verständlich zu machen. Fügen Sie den Code links ein und erhalten Sie rechts die formatierte Datei. Benennen Sie die Datei in „bambus.css“ um.
Vanilla SCSS in Vanilla CSS konvertieren:

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

Nach dem Login kopieren

Kopieren Sie die Datei in den Ordner app/assets/stylesheets/classless/vanilla-framework/build/css/build.css und verwenden Sie den Website-Dienst CSS Beautifier & Minifie, um den Code besser lesbar zu machen. Fügen Sie den Code links ein und erhalten Sie rechts die formatierte Datei. Benennen Sie die Datei in Vanilla.css um und schneiden Sie sie in den Ordner app/assets/stylesheets/classless
Löschen Sie den Ordner app/assets/stylesheets/classless/vanilla-framework/

Öffnen Sie die Seite app/views/layouts/application.html.erb erneut, um die in das Projekt kopierten klassenlosen CSS-Stile hinzuzufügen

Kommentieren Sie die Zeile <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> Einfügen eines # nach dem <%, damit Rails nicht alle Stile auf einmal lädt. Um den Kommentar zu entfernen, entfernen Sie das #. Wenn Sie zum Kommentieren die VSCode-Tastenkombinationen Strg K C verwenden, wird die Zeile nicht korrekt kommentiert. ÄNDERUNG VON:

$ rails -v
Rails 8.0.0

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

Nach dem Login kopieren

FÜR

$ cd classless-css-local && code .

Nach dem Login kopieren

Nach dem Inhalt unten, mit der kommentierten Zeile

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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 lokalen Stil festlegt, in diesem Fall die Zeile <%= stylesheet_link_tag "classless/pico" %> und entkommentieren Sie die Zeile aus einem anderen Stil, zum Beispiel der Simple CSS-Zeile.
Vergessen Sie nicht, dass Sie zum Kommentieren von ERB-Tags nach dem <% ein # einfügen müssen. Um den Kommentar zu entfernen, entfernen Sie das #. Wenn Sie zum Kommentieren die VSCode-Tastenkombinationen Strg K C verwenden, wird die Zeile nicht korrekt kommentiert.

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. Durchsuchen Sie Windows nach „Dunkelmodus für Apps aktivieren“ und wechseln Sie zwischen dunklem und hellem Modus. Die HTML-Seite sollte sich nach dem Wechsel des Betriebssystems automatisch ändern und anzeigen, dass sie den Hell- und Dunkelmodus unterstützt.

Nächste Schritte

[x] Ordnen Sie die Stile nach Ihren Wünschen an;
[x] Stil aus Projekt-CSS-Dateien verwenden, ohne CDN zu verwenden;
[-] Am Projekt im Browser vorgenommene Änderungen dynamisch mit Rails Live Reload aktualisieren;
[-] Wenn Sie etwas mehr Zeit mit dem Frontend verbringen möchten, schauen Sie sich die Anpassungsoptionen für Ihren Lieblingsstil an;
[-] Replizieren Sie die Fähigkeiten eines klassenlosen CSS-Frameworks mit Tailwind;

Referenzen

https://guides.rubyonrails.org/layouts_and_rendering.html
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 vonRuby on Rails Front-End schnell mit Frameworks CSS Classless oder Class-Light – ohne CDN. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!