Ruby on Rails – Schnelles Frontend mit Frameworks CSS Classless oder Classlight-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Ruby on Rails – Schnelles Frontend mit Frameworks CSS Classless oder Classlight

Barbara Streisand

Dec 16, 2024 pm 07:07 PM

Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight

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 --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Nach dem Login kopieren

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

$ cd classless-css && code .

Nach dem Login kopieren

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

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

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

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.

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

$ 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

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.

$ rails -v
Rails 8.0.0

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

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

Schienenstrecken anzeigen

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

$ cd classless-css && code .

Nach dem Login kopieren

Oder Sie können sich mit
alle Routen anzeigen lassen

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

Der Zugriff auf die Routen ist auch über den Browser über die Adresse http://127.0.0.1:3000/rails/info/routes möglich. 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- und CSS-Dateien, um die erforderliche Verarbeitung durchzuführen und sie den Benutzern zur Verfügung zu stellen. Damit Änderungen an diesen Dateien vorgenommen und sofort im Browser angezeigt werden können, muss ein Gem wie Rails Livre Reload installiert werden.

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

Fügen Sie den Seiteninhalt für die Aktion 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 aus dem Haupt-Tag, wie unten gezeigt

$ 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

Starten Sie den Rails-Server und sehen Sie Ugly Pure 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

root "pages#html_test_1"

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

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

Nach dem Inhalt unten

$ rails -v
Rails 8.0.0

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

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.

$ cd classless-css && code .

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

Nun ja, HTML mit Style?

Nach dem Speichern der oben genannten Stylesheets und

Dunkler Modus

Einige Stile verfügen über die Option für den Dunkelmodus. Ändern Sie zur Bestätigung das Design Ihres Computers in den Personalisierungsoptionen

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

Testen

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

3 Wochen vor By DDD

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie kann ich KB5055612 in Windows 10 nicht installieren?

3 Wochen vor By DDD

Nordhold: Fusionssystem, erklärt

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Flüstern des Hexenbaum

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1665

CakePHP-Tutorial

1424

Laravel-Tutorial

1321

PHP-Tutorial

1269

C#-Tutorial

1249

Related knowledge

Ein Beweis für das Konzept, um Sass schneller zu machen Apr 16, 2025 am 10:38 AM

Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt

Ein Vergleich statischer Formanbieter Apr 16, 2025 am 11:20 AM

Versuchen wir, hier einen Begriff zu prägen: "Statischer Formanbieter". Sie bringen Ihre HTML

Wöchentliche Plattformnachrichten: HTML -Ladeattribut, die Haupt -ARIA -Spezifikationen und Wechsel von Iframe zu Shadow Dom Apr 17, 2025 am 10:55 AM

In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein

Der Deal mit dem Abschnittselement Apr 12, 2025 am 11:39 AM

Zwei Artikel veröffentlichten genau den selben Tag:

Einige praktisch mit dem HTML-Dialogelement Apr 16, 2025 am 11:33 AM

Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und

Multi-Daumen-Schieberegler: Allgemeiner Fall Apr 12, 2025 am 10:52 AM

In dem ersten Teil dieser zweiteiligen Serie werden beschrieben, wie wir einen Zwei-Daumen-Schieberegler erhalten können. Jetzt sehen wir uns einen allgemeinen Multi-Thumb-Fall an, aber mit einem anderen und

Wie wir Google -Schriftarten getaggt und Goofonts.com erstellt haben Apr 12, 2025 pm 12:02 PM

Goofonts ist ein Nebenprojekt, das von einer Entwicklerin und einem Designer-Ehemann signiert wurde, beide große Fans der Typografie. Wir haben Google markiert

Es ist alles in der Kopf Apr 15, 2025 am 11:01 AM

Der Dokumentkopf ist vielleicht nicht der glamouröseste Teil einer Website, aber was darauf einfließt

See all articles