Foundation

ZURB's Foundation ist ein Front-End-Framework zum schnellen Erstellen von Anwendungen und Prototypen. Es ähnelt Twitter Bootstrap, verwendet jedoch Sass anstelle von LESS. Hier lernst du die Grundlagen des Rastersystems, der Navigation, Tooltips und mehr.

In dieser Episode werfen wir einen Blick auf Zurb Foundation, ein Front-End-Framework ähnlich wie Twitter Bootstrap, das wir behandelt haben. Ein wesentlicher Unterschied zwischen den beiden besteht darin, dass Foundation auf SASS anstelle von LESS aufgebaut ist, was die Integration in eine Rails-Anwendung erleichtern kann.

Los geht's mit Foundation

Um Foundation zu demonstrieren, werden wir eine neue Rails-Anwendung erstellen und ein Scaffold dafür erstellen, damit wir etwas zum Arbeiten haben. Wir werden die Option skip-stylesheets mit dem Scaffold verwenden, da wir keine Stylesheets dafür generieren möchten, da wir Foundation verwenden werden. Wir werden außerdem die Datenbank migrieren.

$ rails new store
$ cd store
$ rails g scaffold product name price:decimal
$ rails db:migrate

Die Installation von Foundation ist einfach: Alles, was wir tun müssen, ist das foundation-rails-Gem zur Gemfile hinzuzufügen.

// Gemfile

gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sassc-rails'
gem 'foundation-rails'

In Rails-Anwendungen gibt es keine Gruppe für Assets in der Gemfile, daher können wir das Gem überall hinzufügen. Um die Einrichtung von Foundation abzuschließen, müssen wir einen Generator ausführen. Mit einem kleinen Trick bekommen wir foundation dazu den Generator auszuführen. Wir erstellen die Datei application.coffee im Ordner assets/javascripts/. Also assets/javascripts/application.coffee. Nach der installation löschen wir die Datei wieder. Sollten wir die Datei nicht löschen bekommen wir einen Fehler.

$ rails g foundation:install
$ ./bin/importmap pin jquery
$ ./bin/importmap pin jquery-ui
$ ./bin/importmap pin foundation

Nach der installation müssen wir die application.html.erb wieder anpassen/korrigieren. Wir müssen den javascript helper wieder austauschen.

// app/views/layouts/application.html.erb

<%= javascript_importmap_tags %>

Das generiert mehrere Dateien, einschließlich einer Layout-Datei, und wird uns fragen, ob wir die vorhandene Layout-Datei der Anwendung überschreiben möchten. Wir werden dies zulassen, obwohl du, wenn du Foundation zu einer bestehenden App hinzufügst, den Code aus deiner Layout-Datei kopieren möchtest, bevor du zulässt, dass er überschrieben wird. Das Framework besteht sowohl aus JavaScript als auch aus Stylesheets und fügt beides der Asset-Pipeline hinzu. Wenn wir uns die Datei application.js ansehen, werden wir feststellen, dass sie die Foundation-Datei hinzufügt und eine Zeile Code, um das Framework zu initialisieren, wenn die Seite geladen wird.

// app/javascript/application.js

import "@hotwired/turbo-rails";
import "controllers";

import "jquery";
import "jquery-ui";
import "foundation";

$(function () {
  $(document).foundation();
});

Die CSS-Datei der Anwendung benötigt jetzt eine Datei namens foundation_and_overrides, die vom Generator erstellt wurde. Diese lädt das Foundation-Framework und ermöglicht uns, es durch Festlegen von Variablen anzupassen. Wir werden diese Datei hier nicht zeigen, da sie sehr lang ist, obwohl der Großteil davon Kommentare sind, die uns zeigen, welche Variablen wir anpassen können. Am Ende importiert es das Foundation-Framework, und wir sollten alle Anpassungen über dieser Zeile vornehmen. Die letzte generierte Datei ist die Layout-Datei, die einige gute Standards für die Behandlung von alten Versionen des Internet Explorers bietet, uns einen :title-Platzhalter für das Festlegen des Seitentitels gibt und die JavaScript- und CSS-Dateien nach Bedarf einbindet.

Verwendung des Grid-Systems von Foundation

So sieht unsere Anwendung aus, nicht schlecht, aber es gibt viel, was wir tun können, um sie zu verbessern. Wir werden der Seite eine Struktur hinzufügen und eine Seitenleiste mit einigen "Über uns"-Inhalten auf der rechten Seite einfügen. Erst kommentieren wir die zwei Zeilen aus der Datei
foundation_and_overrides.scss ein.

// app/assets/stylesheets/foundation_and_overrides.scss

@include foundation-grid;
@include foundation-flex-grid;

Um dies zu erreichen, müssen wir das Grid-System von Foundation verstehen. Dieses basiert auf zwölf Spalten, die wir mit CSS-Klassen definieren. Wir können Elementen Klassen zuweisen, um Zeilen und Spalten zu definieren, und sie werden für uns angeordnet. Wir werden Spalten verwenden, um die Seitenleiste hinzuzufügen, mit einer Spalte für den Hauptinhalt und einer weiteren für die Seitenleiste. Wir werden die Layout-Datei ändern, um dies zu erreichen. Wir verwenden ein div mit einer Klasse row, um die Zeile zu definieren, dann zwei mit Klassen large-8 columns und large-4 columns, um den Hauptinhalt und die Seitenleiste zu umschließen. Dies macht den Hauptinhalt doppelt so breit wie die Seitenleiste.

// app/views/layouts/application.html.erb

  <div class="row">
    <div class="large-8 columns">
      <%= yield %>
    </div>
    <div class="large-4 columns">
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

Wenn wir die Seite jetzt neu laden, haben wir unsere Seitenleiste.

Wir haben hier große Spalten verwendet, was bedeutet, dass sie für größere Bildschirme ausgelegt sind. Wenn wir die Breite des Fensters verkleinern, werden die Spalten untereinander zusammenbrechen, sodass auf mobilen Geräten der Bereich "Über uns" unterhalb des Hauptinhalts angezeigt wird. Wenn wir dieses Verhalten nicht möchten, können wir stattdessen kleine Spalten verwenden, die auf allen Geräten gerendert werden. Als Nächstes fügen wir dem oberen Bereich der Seite eine Navigationsleiste hinzu. Foundation macht dies einfach, selbst wenn wir verschachtelte Menüs hinzufügen möchten. Alles, was wir tun müssen, ist, etwas HTML mit Klassen einzufügen, die die Struktur definieren. Wir werden ein Menü oben auf der Seite hinzufügen.

// app/views/layouts/application.html.erb

    <nav class="top-bar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text"><%= link_to "Awesome Store", products_path %></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><%= link_to "Browse Products", products_path %></li>
          <li class="divider"></li>
          <li><%= link_to "Price List" %></li>
          <li class="divider"></li>
          <li><%= link_to "Contact Us" %></li>
          <li class="divider"></li>
          <li><%= link_to "Cart" %></li>
        </ul>
      </div>
    </nav>

Auch hier definieren die Klassen die verschiedenen Bereiche der Navigation. Wenn wir die Seite jetzt neu laden, sehen wir die Navigation.

Weitere Anpassungen an unserer Seite

Es gibt noch viel mehr, was wir mit Foundation tun können, und eine gute Übersicht findet sich im Abschnitt "Kitchen Sink" der Dokumentation. Dort werden einige Dinge gezeigt, die wir mit Styling hinzufügen können, einschließlich Benachrichtigungen, Schaltflächen, eingebetteten Videos und vielem mehr. Wir können all dies steuern, indem wir Klassen angeben. Wenn wir beispielsweise möchten, dass unser Header "Über uns" etwas heller ist, könnten wir eine Klasse "subheader" hinzufügen. Wir können auch den Link "Neues Produkt" auf der Produkte-Seite in eine Schaltfläche mit abgerundeten Ecken umwandeln. Suche $global-radius in der Datei _settings.scss und ändere den Wert.

// app/assets/stylesheets/_settings.scss

$global-radius: 8px;

und dann ergänze den link in der index.html.erb um die Classe button.

// app/views/products/index.html.erb

<%= link_to "New product", new_product_path, class: "button" %>

Durch das erneute Laden der Seite werden uns die Änderungen angezeigt.

Als Nächstes werfen wir einen Blick auf die Seite zum Erstellen eines Produkts. Die Textfelder für den Produktnamen und den Preis nehmen derzeit die volle Breite des Hauptabschnitts der Seite ein, und ihre Beschriftungen befinden sich darüber. Wir werden dies ändern, damit die Beschriftungen inline sind, und dazu das gleiche Rastersystem verwenden, das wir für das Layout verwendet haben, da Rastersysteme verschachtelt sein können. Jedes Feld ist derzeit in ein div mit der Klasse field eingefasst; wir werden dies auf row ändern, damit es das Rastersystem verwendet, und die Beschriftungen und Textfelder in ihre eigenen separaten divs einhüllen. Wir verwenden ähnliche Klassen, um den Platz zu definieren, den die Beschriftung und die Textfelder einnehmen werden, und auch, um die Beschriftungen rechts auszurichten. Wir werden auch das Rastersystem für die Schaltfläche "Absenden" verwenden, und hier verwenden wir eine der Offset-Klassen, um die Schaltfläche unterhalb der Textfelder zu verschieben.

// app/views/products/_form.html.erb

<div class="row">
  <div class="small-3 columns">
    <%= form.label :name, class: "float-right inline" %>
  </div>
  <div class="small-9 columns">
    <%= form.text_field :name %>
  </div>
</div>
<div class="row">
  <div class="small-3 columns">
    <%= form.label :price, class: "float-right inline" %>
  </div>
  <div class="small-9 columns">
    <%= form.text_field :price %>
  </div>
</div>
<div class="row">
  <div class="small-9 small-offset-3 columns">
    <%= form.submit %>
  </div>
</div>

Wenn wir die Seite jetzt neu laden, sieht sie besser aus, aber es gibt einen zu großen Abstand zwischen jeder Beschriftung und ihrem Textfeld. Dies liegt daran, dass wir zuvor den Spaltenabstand auf einen hohen Wert gesetzt haben. Wenn wir die Zwischenräume in einer Zeile nicht möchten, können wir die Klasse collapse verwenden, um sie zu entfernen. Dies entfernt alle Abstände im Untergrid, daher fügen wir manuell etwas davon in einem neuen Stylesheet hinzu.

// app/assets/stylesheets/_layouts.scss

label.float-right {
  padding-right: 10px;
}

Wenn wir die Seite jetzt neu laden, sieht sie so aus, wie wir es möchten.

Tooltips

Eine weitere Funktion, die wir in dieser Episode zeigen werden, sind Tooltips, die besonders nützlich für Formulare sind. Wir werden sie verwenden, um mehr Informationen anzuzeigen, wenn wir über eine Beschriftung schweben. Wir werden den Text in das title-Attribut einfügen und ein Datenattribut namens tooltip hinzufügen, das auf true gesetzt wird.

// app/views/products/_form.html.erb

<%= form.label :price, class: "float-right inline", title: "Price in Euro", data: {tooltip: true } %>

Wenn wir die Seite jetzt neu laden und den Cursor über die Beschriftung bewegen, wird der Tooltip jetzt angezeigt.

Foundation verkleinern

Foundation gibt uns viele Funktionen, und wir möchten möglicherweise nicht alle davon verwenden. Wir können diejenigen entfernen, die wir nicht benötigen, um nicht so viel JavaScript und CSS an den Client zu senden, indem wir die Zeile @import 'foundation'; in der foundation_and_overrides.css ersetzen, um genau zu kontrollieren, was importiert wird. Dies ist eigentlich ziemlich einfach. Wenn wir das Foundation-Projekt auf Github besuchen und im scss-Verzeichnis nachsehen, finden wir die Datei foundation.scss. Diese Datei importiert alle einzelnen Teile des Frameworks, und wir können sie kopieren und in unsere Datei einfügen. Dann können wir die Abschnitte entfernen, die wir in unserer Anwendung nicht verwenden.

Eine weitere Möglichkeit, die Menge an JavaScript, die wir an den Client senden, zu reduzieren, besteht darin, jQuery durch Zepto.js zu ersetzen. Dies ist deutlich kleiner und wird von Foundation unterstützt.

Meld dich an und schreibe ein Kommentar