Frontend in voller Editierbarkeit / Sudo Null IT News

Hallo, nur bei dir. Wir bauen digitale Architektur und Kommunikation für große Unternehmen und Marken. Eines der wichtigsten Projekte in unserer Karriere ist die Zusammenarbeit mit Severstal, einem führenden Hersteller von Stahlprodukten, einem führenden Unternehmen in der Metallurgie der Zukunft. Das Unternehmen wandte sich an uns mit der Aufgabe, eine Corporate Website für Severstal zu entwickeln und zu launchen, die ein disparates System von Geschäftseinheiten auf einer digitalen Plattform vereinen sollte.

In diesem Artikel werden wir Sie ausführlich über das Block-für-Block-Montagesystem und die Fallstricke bei der Implementierung eines solchen Systems unter 1C-Bitrix für Frontend-Entwickler informieren.

Bearbeitbarkeit blockieren

Wir mussten eine Website basierend auf dem CMS „1C-Bitrix: Site Management“ entwickeln und gleichzeitig den Content-Managern die volle Kontrolle über die Seiten und deren Inhalt geben. Content-Manager \read not developer\ sollten in der Lage sein, Seiten aus vorgefertigten Blöcken zusammenzustellen, die Reihenfolge dieser Blöcke auf der Seite zu bestimmen, zusätzliche visuelle Designeinstellungen für jeden der Blöcke zu verwalten und Inhalte innerhalb der unterstützten Datentypen zu bearbeiten. Und all dies wird über den visuellen Editor von Bitrix verwaltet, ohne dass für jeden Block auf der Seite manuell ein neuer Infoblock erstellt werden muss. Ein solches System kann als „Bearbeitbarkeit von Blöcken“ bezeichnet werden.

Gehen wir zum Frontend-Teil des Projekts über und reservieren wir, dass alle Quellen, einschließlich des Layouts, separat gespeichert werden und die Verwendung des Webpack-Sammlers beinhalten, um die endgültigen HTML-, CSS- und JS-Dateien zu generieren, die anschließend in die übertragen werden Backend.

Blocktyp-Kategorisierung

Um das Arbeiten mit einer großen Anzahl von Blöcken zu erleichtern, haben wir die Blöcke in separate Typen und alternative Gestaltungsmöglichkeiten unterteilt. Blöcke, die unterschiedliche Datentypen enthalten oder sich in ihrer Logik stark unterscheiden, sind zu eigenständigen Typen geworden. Insgesamt wurden 74 Blocktypen gebildet, und mit Alternativen – mehr als 200. Alternativen können als zusätzliche Add-Ons zu Blöcken betrachtet werden, die ihr Aussehen oder ihre Logik geringfügig ändern.

Beispiele für Blocktypen:

  • Hut

  • Widget

  • Werbeblock

  • Schieberegler

  • Infografiken

  • Diagramm

  • Produktionsblock

  • Tischbilder

  • Textfeld mit Optionsfeld

  • Liste der Dokumente usw.

Am Ende betrug die Gesamtzahl der Typen und Optionen mehr als 200. Gleichzeitig ist die Anpassung kleiner Elemente wie Schaltflächen oder Widgets nicht in zusätzlichen Blockoptionen enthalten, da sie separat existieren.

Beispielsweise ist ein normaler Kartenschieber ein eigener Typ und enthält die grundlegende Logik und das Aussehen, während der Inhalt des Schiebers bestimmt, zu welcher der alternativen Gestaltungsmöglichkeiten dieser Block gehört. Solche Alternativen können nur die Grundlogik des Blocks modifizieren oder ergänzen. Zum Beispiel kann eine Variante die Animation des Wechselns von Folien ändern oder ein modales Fenster beim Klicken auf eine Folie hinzufügen, aber die Hauptlogik des Schiebereglers bleibt unverändert.

Ein typischer SchieberEin typischer Schieber

Jeder einzelne Block ist eine JS-Klasse, und zusätzliche Optionen sind Initialisierungsparameter, die im Konstruktor der Basisklasse beschrieben werden. Ändert oder ergänzt eine Variante das Erscheinungsbild des Blocks, so wird für jede Variante eine CSS-Klasse mit einer Beschreibung zusätzlicher Stile erstellt.

Mixins

Beim Arbeiten mit einer großen Anzahl von Varianten kann das CSS jedes Blocks so stark anwachsen, dass es schwierig wird, den Code zu pflegen. Um uns die Arbeit mit zusätzlichen Optionen zu erleichtern, haben wir Mixins verwendet, die von bereitgestellt werden sass/scss-Präprozessor. Mit Hilfe von Mixins können Sie die Generierung alternativer Stile vom Code der Hauptkomponente trennen.

Mit dem Scss-Präprozessor können Sie Ihre eigenen Variablen, Mixins und Funktionen verwenden, was die Arbeit mit CSS in großen Projekten erheblich vereinfacht.

Betrachten wir diesen Ansatz am Beispiel einer normalen Schaltfläche, die keine js-Logik enthält. Neben den Grundstilen hat ein solcher Button zusätzliche Designoptionen, die gemischt werden können und so 48 einzigartige Kombinationen bilden (6 Farbthemen, 4 Arten von Symbolstilen, Basis- und Kontrastoptionen). Gleichzeitig werden für jedes Farbthema 5 Hauptzustände (Normal, Schweben, Fokus, Aktiv, Deaktiviert) unter Berücksichtigung der Kontrastoption bereitgestellt.

Grundlegende Gestaltung des Buttons nach dem GestaltungssystemGrundlegende Gestaltung des Buttons nach dem Gestaltungssystem

Um die Stile nicht für jede CSS-Klasse manuell zu beschreiben, haben wir nur die veränderbaren Werte für jede der Optionen beschrieben und in die scss-Variable geschrieben. Hier ist beispielsweise eine teilweise Beschreibung der Stile für Farbschemaoptionen:

$button-types: (fill: ( background: #0041A0, hover: #002F6C, active: #001E46, disabled: #F4F4F4, ), fill-alt: ( background: #FF0000, hover: #BF1D26, active: #81080F , deaktiviert: #F4F4F4 ), /* … */ );

Dann wird in der Haupt-Scss-Datei mit einer Beschreibung der Schaltflächenstile das Common-Button-Types-Mixin aufgerufen, das für die Generierung von Farbthemenstilen verantwortlich ist. Für jede beschriebene Option wird ein zusätzliches Mixin im Common-Button-Stil aufgerufen, das die gesamte Logik der Erzeugung von Farbthemen unter Berücksichtigung möglicher Kontraste beschreibt.

@mixin common-button-types() { @each $type, $value in $button-types { &.#{$type} { @include common-button-style($type); } } }

Die Arbeit mit Symbolstilen ist ähnlich aufgebaut.

Button-Styling mit Strich für alle ZuständeButton-Styling mit Strich für alle Zustände

Dieser Ansatz ermöglicht es Ihnen, Blockstile mit unabhängigen Generatorfunktionen zu sammeln, was die Organisation einer großen Anzahl von Optionen erheblich vereinfacht. Optionen für neue Seiten und Anpassungen bestehender Seiten werden von Content Managern ohne Beteiligung von Entwicklern durchgeführt. Die Anwendung dieser Methode ist jedoch nur möglich, wenn ein detailliertes Designsystem vorhanden ist, in dem jede der möglichen Optionen zur Gestaltung von Blöcken und Seiten so genau und detailliert wie möglich beschrieben wird. Dadurch verfügen wir über eine seriöse Ressource mit einer gut ausgebauten Informationsstruktur, komfortablen Services und einer hochwertigen Visualisierung.

Similar Posts

Leave a Reply

Your email address will not be published.