Ruby on Rails Front-End schnell mit Frameworks CSS Classless oder Class-Light – ohne 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"
>

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

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 .

 

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

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

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

Mehr anzeigen…

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

• 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

Mehr anzeigen…

• 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

FÜR

$ cd classless-css-local && code .

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

• 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

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