Dieser Artikel ist den vorherigen Artikeln dieser Serie sehr ähnlich, aber dieses Mal verwenden wir ein neu erstelltes hervorragendes CSS-Framework CSS Zero, das für „No Build“-Projekte oder Ruby on Rails-Anwendungen verwendet werden kann, die „Build“ erfordern. .
Es ist zu beachten, dass das CSS Zero-Framework nicht darauf abzielt, ein völlig klassenloses oder leichtes klassenloses Framework zu sein. Die in diesem Artikel vorgeschlagenen Änderungen dienen nur zu Testzwecken und dienen dazu, alle Elemente auf der HTML-Seite dieses Tutorials zu formatieren, ohne Klassen hinzuzufügen.
Daher entspricht die Formatierung einiger HTML-Elemente möglicherweise nicht dem vom CSS Zero-Framework empfohlenen Stil, Design, Layout und Verhalten. Um zu sehen, was Sie vom CSS Zero-Framework erwarten können, besuchen Sie das CSS Zero-Lookbook: [Lookbook-Link hier hinzufügen]. Um es als klassenloses Framework in Aktion zu sehen, führen Sie die folgenden Schritte aus.
rails new
Das time
vor dem Befehl wird verwendet, um die Gesamtzeit der Befehlsausführung anzuzeigen. Das folgende Beispiel dauerte 47 Sekunden. <code>$ rails -v Rails 8.0.0 $ time rails new classless-css-zero ... 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 führt keine JavaScript-Verarbeitung durch.
<code>$ cd classless-css-zero && code .</code>
Die Seite befindet sich im Abschnitt „Allgemeine Schritte“ des ersten Artikels dieser Serie.
<code>$ bundle add css-zero $ bin/rails generate css_zero:install</code>
Um die verfügbaren Komponenten anzuzeigen, führen Sie den folgenden Befehl aus:
<code>$ bin/rails generate css_zero:add --help</code>
Um alle Komponenten hinzuzufügen, führen Sie den folgenden Befehl aus:
<code>bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share</code>
Bitte beachten Sie, dass der obige Befehl nicht funktioniert, wenn andere Komponenten hinzugefügt oder einige Komponenten entfernt werden.
app/assets/stylesheets/base.css
Datei ändern<code><div> ... </div></code>
Um diese HTML-Elemente ohne Verwendung von <div>
zu formatieren, werden wir die folgenden Änderungen vornehmen.
<code>body { background-color: var(--color-bg); color: var(--color-text); font-synthesis-weight: none; text-rendering: optimizeLegibility; /* 无类配置测试 */ font-size: var(--text-fluid-base); /* max-inline-size: 65ch; */ /* 抗锯齿字体 */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--font-extrabold); hyphens: auto; letter-spacing: -0.02ch; line-height: 1.1; margin-block: 0.5em; overflow-wrap: break-word; text-wrap: balance; } }</code>
Öffnen Sie die Datei app/assets/stylesheets/base.css
, suchen Sie die Zeile body {
und fügen Sie den kopierten Inhalt nach text-rendering: optimizeLegibility;
ein. Löschen Sie nach dem Einfügen die max-inline-size: 65ch;
-Zeilen oder kommentieren Sie sie aus. Der Inhalt von body
sollte derselbe sein wie im obigen Beispiel.
Öffnen Sie als Nächstes die Datei app/assets/stylesheets/prose.css
und kopieren Sie den Abschnitt mit:
<code>/* 无类配置测试 */ h1 { font-size: 2.4em; } h2 { font-size: 1.8em; } h3 { font-size: 1.5em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 0.8em; } :is(ul, ol, menu) { list-style: revert; padding-inline-start: revert; } :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) { margin-block: 0.65lh; overflow-wrap: break-word; text-wrap: pretty; } hr { border-color: var(--color-border-dark); border-style: var(--border-style, solid) none none; margin: 2lh auto; } :is(b, strong) { font-weight: var(--font-bold); } :is(pre, code) { background-color: var(--color-border-light); border: 1px solid var(--color-border); border-radius: var(--rounded); font-family: var(--font-monospace-code); font-size: 0.85em; } code { padding: 0.1em 0.3em; } pre { border-radius: 0.5em; overflow-x: auto; padding: 0.5lh 2ch; text-wrap: nowrap; } pre code { background-color: transparent; border: 0; font-size: 1em; padding: 0; } p { hyphens: auto; letter-spacing: -0.005ch; } blockquote { font-style: italic; margin: 0 3ch; } blockquote p { hyphens: none; } table { border: 1px solid var(--color-border-dark); border-collapse: collapse; margin: 1lh 0; } th { font-weight: var(--font-bold); } :is(th, td) { border: 1px solid var(--color-border-dark); padding: 0.2lh 1ch; text-align: start; } th { border-block-end-width: 3px; } del { background-color: rgb(from var(--color-negative) r g b / .1); color: var(--color-negative); } ins { background-color: rgb(from var(--color-positive) r g b / .1); color: var(--color-positive); } a { color: var(--color-link); text-decoration: underline; text-decoration-skip-ink: auto; } mark { color: var(--color-text); background-color: var(--color-highlight); }</code>
Fügen Sie das obige am app/assets/stylesheets/base.css
Ende der Datei ein.
app/assets/stylesheets/button.css
Datei ändernwird:
<code>$ rails -v Rails 8.0.0 $ time rails new classless-css-zero ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
geändert in:
<code>$ cd classless-css-zero && code .</code>
app/assets/stylesheets/input.css
Datei ändernapp/views/layouts/application.html.erb
Datei anpassenNachdem Sie CSS Zero konfiguriert und die oben genannten Anpassungen vorgenommen haben, starten Sie den Rails-Server und Sie sehen den gestalteten HTML-Code.
Einige Stile verfügen über Dunkelmodusoptionen. Um dies zu bestätigen, ändern Sie das Design 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.
[x] Organisieren Sie Stile nach Ihren Wünschen; [x] Verwenden Sie CSS-Dateien im Projekt für das Styling anstelle von CDN; [x] Verwenden Sie Tailwind, um die Funktionalität klassenloser CSS-Frameworks zu replizieren; [-] 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, sehen Sie sich die Anpassungsoptionen für Ihre Lieblingsstile an
ReferenzenDas obige ist der detaillierte Inhalt vonSchnelles Ruby on Rails-Frontend mit Zero CSS als klassenloses CSS-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!