Heim > Web-Frontend > CSS-Tutorial > Schnelles Ruby on Rails-Frontend mit Zero CSS als klassenloses CSS-Framework

Schnelles Ruby on Rails-Frontend mit Zero CSS als klassenloses CSS-Framework

Patricia Arquette
Freigeben: 2025-01-22 04:18:14
Original
686 Leute haben es durchsucht

Ruby on Rails  Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless

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.

Erstellen Sie eine neue Rails-App

  • 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>
Nach dem Login kopieren
Nach dem Login kopieren

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.

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

<code>$ cd classless-css-zero && code .</code>
Nach dem Login kopieren
Nach dem Login kopieren

Erstellen Sie einige Seiten, um die Stile von HTML-Elementen anzuzeigen

Die Seite befindet sich im Abschnitt „Allgemeine Schritte“ des ersten Artikels dieser Serie.

Fügen Sie CSS Zero zu Ihrem Projekt hinzu

Erweitern…Folgen Sie diesen Schritten, um CSS Zero zu Ihrem Projekt hinzuzufügen:
<code>$ bundle add css-zero
$ bin/rails generate css_zero:install</code>
Nach dem Login kopieren

Um die verfügbaren Komponenten anzuzeigen, führen Sie den folgenden Befehl aus:

<code>$ bin/rails generate css_zero:add --help</code>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Bitte beachten Sie, dass der obige Befehl nicht funktioniert, wenn andere Komponenten hinzugefügt oder einige Komponenten entfernt werden.

Teil 1 – app/assets/stylesheets/base.cssDatei ändern

Erweitern…Im Link „Überschriften“ sehen wir, dass viele Stilelemente in ein Element mit „<div>“ eingefügt werden müssen.
<code><div>
  ...
</div></code>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ö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>
Nach dem Login kopieren

Fügen Sie das obige am app/assets/stylesheets/base.css Ende der Datei ein.

Teil 2 – app/assets/stylesheets/button.cssDatei ändern

Erweitern…Ändern Sie die CSS-Klasse „.btn“, sodass alle HTML-Schaltflächenelemente automatisch diesen Stil verwenden.

wird:

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>
Nach dem Login kopieren
Nach dem Login kopieren

geändert in:

<code>$ cd classless-css-zero && code .</code>
Nach dem Login kopieren
Nach dem Login kopieren

Teil 3 – app/assets/stylesheets/input.cssDatei ändern

Erweitern…Ändern Sie die CSS-Klasse „.input“, sodass alle HTML-Eingabeelemente automatisch diesen Stil verwenden. Ändern Sie in ähnlicher Weise die Selektoren „.checkbox“, „.radio“ und „.range“, sodass sie für alle entsprechenden HTML-Tags gelten. Die spezifische Änderungsmethode ähnelt dem zweiten Teil. Bitte beachten Sie die Änderungsmethode im zweiten Teil.

app/views/layouts/application.html.erbDatei anpassen

Erweitern…Der Link wird unterschiedlich angezeigt, je nachdem, wo in „application.html.erb“ Sie den Verweis auf die Test-HTML-Datei platzieren. Wenn Sie möchten, dass die Demo genauso aussieht wie das Tutorial, ändern Sie bitte den entsprechenden Abschnitt.

Jetzt CSS Zero als klassenloses Framework zum Stylen von HTML verwenden?

Nachdem Sie CSS Zero konfiguriert und die oben genannten Anpassungen vorgenommen haben, starten Sie den Rails-Server und Sie sehen den gestalteten HTML-Code.

Dunkler Modus

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.

Nächste Schritte

[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

Referenzen

    https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f
  • 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 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!

Quelle:php.cn
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
Neueste Artikel des Autors
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage