/ / Arbeit erforderlich, um die Zurb Foundation v5 auf Version 6.2 zu aktualisieren - zurb-foundation-5, zurb-foundation-6

Arbeiten erforderlich, um die Zurb Foundation v5 auf Version 6.2 zu aktualisieren - zurb-foundation-5, zurb-foundation-6

Was und wie viel Arbeit ist erforderlich, um Foundation 5 auf 6,2 zu aktualisieren?

Unser Entwicklergeschäft übernimmt die Entwicklung einesbestehendes F5-Projekt. Scheint das Front-End-Layout ist zu 80% abgeschlossen, obwohl wir wahrscheinlich Übergang in JSX zu wenig wird unberührt sein. Ich brauche Hilfe beim Wiegen, wenn F6.2 den zusätzlichen Aufwand wert ist, da der Client budget-limited ist. Zurb "s F6 Ankündigung listet nur einige weniger wichtige Vorteile auf (A11y, weniger Klassen). Flexbox könnte hilfreich sein, kleine Foundation CSS ist weniger wichtig wegen Uncss.

Ich habe F6.2 einmal benutzt, würde aber gerne von Leuten hören, die echte Seiten von F5 auf F6.x mit Gotchas und Zeit aktualisiert haben F5 bis F6 Upgrade-Anleitung, & Versionshinweise fehlen.

Antworten:

8 für die Antwort № 1

Upgrade von Foundation 5 auf die neueste Foundation6 beinhaltet eine vollständige Website-Neuerstellung von einem neuen Website-Template, da ein Großteil des HTML-Codes ein bisschen 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
  • Knoten_Module
  • scss
  • css

Es gibt verschiedene Möglichkeiten, Foundation for Sites 6 zu installieren. Meine Präferenz lautet npm node package manager unter Verwendung der Eingabeaufforderung:

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

cd was auch immer_Projektname

Erstellen Sie cssapp.css mit GULP
Fundament bauen

AKTUALISIEREN von cssapp.css
npm starten
ODER
Grunduhr
STRG + C zum Beenden

Sobald Sie die neuen v6-Dateien heruntergeladen haben, müssen Sie sie im Ordner "scss" speichern Passen Sie die Projekt-SCSS-Dateien an und generieren Sie das CSS neu.

  1. Öffnen _settings.scss und ändern Sie Einträge wie gewünscht, im Grunde zu entsprechenwas du in der vorherigen v5 gehabt hast. Vor allem Schriftfamilie, Überschriften, Schriftgröße, Farben, Zeilenhöhe usw. Alle $ Variablennamen sind unterschiedlich, aber Sie werden schnell den Kern davon bekommen.
  2. Öffnen app.scss und wählen Sie aus, welche @includes Sie importieren möchten, nur diejenigen, die Sie wirklich benötigen, um die endgültige CSS-Dateigröße zu minimieren.
  3. Nach all deinen @Includes, dann Sie kopieren / fügen den gesamten benutzerdefinierten SCSS-Stilcode aus Ihrem früheren Foundation 5-Website-Projekt ein.
  4. Jetzt für die echte Arbeit. Sie müssen alle Version 5 konvertieren MIXIN und MEDIENABFRAGE Code für das neue Version 6-Format. Beginnen Sie mit Lesen Sie hier die Seite 6 Media Query der Foundation.
    Ihre Website-Software wird sicherlich eine "Suchen" und "Ersetzen" -Funktion haben, die die beste Einstellung für diesen Job ist. Hier sind einige Beispiele von:

    ALTE Stiftung 5 scss Code im Vergleich zu
    NEUE Stiftung 6 Format.

    @media # {$ small-up}
    @include Haltepunkt (klein)

    @media # {$ large-up}
    @include Haltepunkt (groß)

    @media # {$ Porträt}
    @include Haltepunkt (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. Command Line Prompt "Foundation Watch" generiert Ihr Finale app.css Datei bei jeder scss-Datei speichern. Wenn es ein gibt Error In Ihrem scss zeigt GULP die Zeilennummer an, an der der Fehler aufgetreten ist. Nachlesen, notwendige Korrekturen vornehmen und erneut speichern bis app.css wird ohne Fehler generiert.
  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 ==> Foundation 6 Konvertierung abgeschlossen.

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


5 für die Antwort № 2

Ich denke, es ist viel mehr involviert als das (was?wird in der Frage erklärt). 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, diewerden am Ende der html / php-Skripte mit den neuen Versionen referenziert, die unter bower_componentsfoundation-sitesdist verfügbar sind. Kopieren Sie beispielsweise bower_componentsfoundation-sitesdistabc.js in IhrProject / js / abc.js.

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

  • ERSETZEN $paragraph-font-size MIT $global-font-size

  • ERSETZEN $callout-bg MIT $callout-background

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

3. ////////////// PANELS & ALERT BOXES: In php / html: Ersetze die Klassen (Panel) & (alert) WITH das Klassen-Callout. Für mich sind das die Strings, die ich im Replace-Dialog des Editors benutzt habe (Verwenden regulärer Ausdrücke). Abhängig von Ihrem Design und Codierungsstil werden Sie wahrscheinlich unterschiedliche Strings benötigen.

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

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

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

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

  • Um den Text in jeder Warnmeldung ADD <p> um die SMS herum: <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. ////////////// Machen Sie Tabellen Responsive (optional):

  • ERSETZEN:<table MIT:<div class="table-scroll"><table

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

7. ///////////// ABEN:

  • ERSETZEN:</label>(.*)rn(.*)<small class=["|"]error["|"]>(.*)</small> MIT:<span class="form-error">$3</span>rn$2</label>

  • ERSETZEN:<form (.*) data-abide(.*)> MIT:<form $1 data-abide novalidate $2>

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

// Foundation 6 Style:
Foundation.Abide.defaults.patterns["dd_mm_yyyy"] = /((0[1-9]|[12][0-9]|3[01])[- /.]0[1-9]|1[012])[- /.]dd/;
Foundation.Abide.defaults.patterns["short_time"] = /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9])/;

// Foundation 5 Style:
// $(document).foundation({
// abide : {
// patterns : {
// short_time: /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9])/,
// dd_mm_yyyy: /((0[1-9]|[12][0-9]|3[01])[- /.]0[1-9]|1[012])[- /.]dd/
// },
// }
// });

** Auf keinen Fall ist dies eine umfassende Liste vonalle 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....**