Arbeitsaufwand für die Aktualisierung von Zurb Foundation v5 auf Version 6.2

Das Upgrade von Foundation 5 auf die neueste Foundation 6 beinhaltet eine vollständige Neuerstellung der Website von einer neuen Website-Vorlage, da ein großer Teil des HTML-Codes ein wenig anders ist. Nein, es ist nicht schwer, aber ja, es gibt eine Menge Arbeit beim Übergang. Die zahlreichen Verbesserungen sind es jedoch wert.

Sie müssen ein neues Website-Projekt in einem neuen Ordner starten, um alle aktualisierten Dateisets zu erhalten, die in diesen Ordnern enthalten sind ...

• bower_components
• node_module
• scss
• css

Es gibt verschiedene Möglichkeiten, Foundation for Sites 6 zu installieren. Meine bevorzugte Einstellung ist npm node package manager. Verwenden Sie dazu die Eingabeaufforderung:

Gründung neuer
Was bauest du heute? = Eine Website (Foundation for Sites)
Wie lautet das Projekt? = Whatever_projectname
Welche Vorlage möchten Sie verwenden? = Basic Template: beinhaltet einen Sass Compiler

cd was auch immer_Projektname

Erstellen Sie css \ app.css mit GULP
Gründungsgebäude

UPDATE css \ app.css
npm starten
ODER
Stiftung Uhr STRG + C zum Beenden

Sobald Sie die neuen v6-Dateien heruntergeladen haben, müssen Sie im Ordner "scss" die anpassen Projizieren Sie SCSS-Dateien und generieren Sie das CSS neu .

1. Öffnen Sie _settings.scss und ändern Sie die Einträge wie gewünscht, im Wesentlichen um mit dem übereinzustimmen, was Sie in der vorherigen Version 5 hatten. Vor allem Schriftfamilie, Überschriften, Schriftgröße, Farben, Zeilenhöhe usw. Alle $ Variablennamen sind unterschiedlich, aber Sie bekommen schnell den Kern davon.
2. Öffnen Sie app.scss und wählen Sie aus, welche @includes Sie importieren möchten, nur diejenigen, die Sie wirklich benötigen, um die CSS-Dateigröße zu minimieren.
3. Nach all Ihren @includes, dann kopieren Sie den benutzerdefinierten SCSS-Stilcode aus Ihrem früheren Foundation 5-Website-Projekt .
4. Jetzt für die echte Arbeit. Sie müssen alle Version 5 MIXIN und MEDIA QUERY -Code in das neue Version 6-Format konvertieren. Beginnen Sie mit dem Lesen der Seite "Media Query" von Foundation 6 hier .
   Ihre Website-Software wird es sicher haben Ein 'Suchen' und 'Ersetzen' Feature, welches die beste Aufnahme für diesen Job ist. Hier einige Beispiele für:
   
   OLD Foundation 5 scss-Code im Vergleich zum Format NEW Foundation 6 .
   
   @media # {$ small-up}
   @include Haltepunkt (klein)
   
   @media # {$ large-up}
   @include Haltepunkt (groß)
   
   @media # {$ portrait}
   @include breakpoint (Hochformat)
   
   @include grid-column ($ spalten: 12);
   @include grid-column (12); @include flex-video-container (); @include flex-video ($ flexvideo-ratio-widescreen); @include button ($ background: $ primary-color); @include button ($ expand: false, $ background: $ Primärfarbe, $ background-hover: auto, $ color: auto, $ style: solid); Schriftgröße: 0.85rem;
   
   
5. Befehlszeilenaufforderung 'foundation watch' generiert bei jeder Speicherung der sss-Datei Ihre endgültige app.css -Datei. Wenn ein Fehler in Ihrem scss vorhanden ist, zeigt GULP die Zeilennummer an, an der der Fehler aufgetreten ist. Lesen Sie, nehmen Sie die notwendigen Korrekturen vor und speichern Sie sie erneut, bis app.css ohne Fehler generiert wird.
6. Sehen Sie sich Ihre Testseite für die Foundation 6 Website an, optimieren Sie das CSS und, wenn Sie mit dem Erscheinungsbild zufrieden sind, können Sie Ihr neues Foundation 6 Template auf jede Seite der Website anwenden.

Foundation 5 == & gt; Foundation 6 Konvertierung abgeschlossen .

Je mehr Conversions Sie vornehmen, desto schneller und einfacher wird es.

Ich denke, es ist viel mehr involviert als das (was in der Frage erklärt wird). Im Folgenden sind die Änderungen aufgeführt, die ich bei einem (relativ einfachen Projekt) anwenden musste. Der Aufwand hat mich dazu gebracht, zweimal nachzudenken, bevor ich meine anderen größeren Projekte aufwertete. Ich denke jedoch, dass das Folgende für andere Leute nützlich sein könnte, die darüber nachdenken, ihre Websites zu aktualisieren.

1. ////////////// JS: Ersetzen Sie im Dateisystem die js-Skripts, auf die am Ende der html / php-Skripte verwiesen wird, durch die neuen Versionen, die unter \ bower_components \ fundation-sites \ dist verfügbar sind. Kopieren Sie beispielsweise \ bower_components \ fundation-sites \ dist \ abc.js in IhrProjekt / js / abc.js.

2. ////////////// SCSS-VARIABLEN: In den Dateien (_settings.scss), (_custom_styles.scss) usw.:

• ERSETZEN Sie $paragraph-font-size WITH $global-font-size

• ERSETZEN Sie $callout-bg WITH $callout-background

• .... und ersetzen Sie alle anderen Variablen, die die Kompilierung von scss zu css
fehlschlagen

3. ////////////// PANELS & amp; ALARMKÄSTEN: In PHP / HTML: ERSETZEN Sie die Klassen (Panel) & amp; (Warnung) MIT dem Klassen-Callout. Für mich sind das die Strings, die ich im Replace-Dialog des Editors verwendet habe ( mit regulären Ausdrücken ). Abhängig von Ihrem Design und Codierungsstil werden Sie wahrscheinlich unterschiedliche Strings benötigen.

• ERSETZEN: <div data-alert class='alert-box **success** round'> WITH: <div class='**success** callout' data-closable='slide-out-right'>

• ERSETZEN: <div data-alert class='alert-box **alert** round'> WITH: <div class='**alert** callout' data-closable='slide-out-right'>

• ERSETZEN: <a href='#' class='close'>&times;</a> WITH: <button class='close-button' aria-label='Dismiss alert' type='button' data-close> <span aria-hidden='true'>&times;</span> </button>

• Entferne die Zeile: <script src="./js/foundation.alert.js"></script>

• Fügen Sie dem Text innerhalb jeder Warnmeldung <p> um die Textnachricht hinzu: <p>...</p>

4. ///////////// MENÜS: Ich denke, der beste Weg, Menüs zu handhaben, besteht darin, sie von Grund auf neu zu schreiben.

5. ////////////// TABELLEN: ERSETZEN: class='table' MIT: class='hover'

6. ////////////// Mache TABELLEN Responsiv (optional):

• ERSETZEN: <table WITH: <div class='table-scroll'><table

• ERSETZEN: </table> WITH: </table></div>

7. ///////////// ABIDE:

• ERSETZEN: </label>(.*)\r\n(.*)<small class=['|"]error['|"]>(.*)</small> WITH: <span class="form-error"></span>\r\n</label>

• ERSETZEN: <form (.*) data-abide(.*)> WITH: <form data-abide novalidate >

- Benutzerdefinierte Muster: - Verwenden Sie die folgenden 2 Zeilen anstelle der kommentierten Zeilen:

** Dies ist auf keinen Fall eine umfassende Liste aller erforderlichen Änderungen. Wenn ja, hätte das Foundation-Team es schon vor langer Zeit veröffentlicht. Es ist jedoch ein Ausgangspunkt, der Ihnen eine Vorstellung davon geben könnte, worum es geht.

Viel Glück .... **