[3.2.x] SassySilver - [ALPHA]

Antworten
Benutzeravatar
Melmac
Administrator
Beiträge: 8
Registriert: 28.07.2017, 20:37

[3.2.x] SassySilver - [ALPHA]

Beitrag von Melmac » 21.08.2017, 00:09

Name des Styles: Sassysilver
Autor: Melmac
Ideengeber: Artys Styles
Danke an: alle, die Ideen, Kritik & Verbesserungsvorschläge einbringen und sich die Mühe des Testens machen! (Talk19zehn, Joyce&Luna, Kirk ...)

Beschreibung des Styles:
  • Sassysilver ist eine Ableitung von und basiert auf prosilver (Template-Inheritance; neu: weitestgehende Style-"Inheritance").
  • Anpassungen an den Template-Dateien sind auf ein Minimum beschränkt: vorhandener Code wird stellenweise aus funktionalen Gründen gesplittet oder in neue HTML-Dateien "ausgelagert", bleibt aber in sich soweit als möglich unverändert.
  • Im Bereich der Stylesheets, insbesondere in den neuen Konfigurationsdateien, wird SASS/SCSS eingesetzt.
  • Für den Anwender vereinfachte Anpassungs- und Gestaltungsmöglichkeiten durch "Konfigurationsschalter".
    Soweit sinnvoll umsetzbar erfolgt das Umschalten zwischen den einzelnen Layoutoptionen rein über CSS/SCSS, um die Anpassungen der Templatedateien so gering als möglich zu halten

    Wichtig: Sassysilver befindet sich aktuell noch in einem relativ frühen Entwicklungsstadium - die bisher implementierten Features sind zwar funktional, es können sich aber noch Ergänzungen und/oder Umcodierungen als erforderlich erweisen.

    Style-Version: [ALPHA] 0.5.0 pre
    phpBB-Version: 3.2.2
    Basierend auf: prosilver, Template-Inheritance, SASS
    Sprache: de, en

    Screenshots:
    *** demnächst gibt es neue - bitte noch etwas Geduld haben :wink: ***


    Demo: => hier in diesem Board :wink:

    Downloads: Issues:
    Fehlermeldungen, Änderungswünsche etc.: https://github.com/DistantSun/sassysilver/issues oder hier im Topic.


    Zusätzliche Anforderungen: SASS-Pre-Compiler (Vorschläge hierfür sie hier)
    Damit Änderungen an den Stylesheets wirksam werden, muss die Datei stylesheet.css neu erstellt werden. Diese Datei enthält nach dem Kompilieren sämtlichen aufbereiteten und in reguläre CSS-Syntax "übersetzten" Code der einzelnen *.scss-Files, auf den dann beim Formatieren zugegriffen wird.

    Wichtig: Die Datei stylesheet.css darf nicht editiert werden, da ansonsten im nächsten Compilerlauf die vorgenommenen Änderungen überschrieben werden!]
    Für eigene Codeanpassungen sind entsprechende Konfigurationsdateien vorgesehen und vorbereitet.


    -------------------------------------

    Changelog:
    • 0.5.0 pre (w.i.p) -- größere strukturelle Änderungen
      • Überarbeitete Gliederung der Stylesheets und Verlagerung in die zugehörenden Ordner: /core => Kerndateien des Styles; /customer_files => alle der individuellen Anpassung dienenden Dateien
      • Komponenten- und Modulstylesheets => modularer Aufbau des Codes
      • Neues (Farb-)Schemasystem implementiert: jedes Schema in einem eigenen, separaten Stylesheet zusammengefasst; automatisierte Umsetzung im Hintergrund bei Schemawechsel
      • Boardhintergrund (body) umschaltbar zwischen: Farbe/Farbverlauf, Textur (grafikbasiert), CSS-gesteuerte SVG-Textur, Hintergrundbild (vollflächig)
      • uvm ;)
    • 0.4.1 (28.03.2018) -- u.a. Wahlmöglichkeit zwischen verschiedenen Iconsets, neue Headerbar (responsiv) mit neuem Default-Logo (Positionierung umschaltbar: link / mittig /rechts), Bugfixes; weitere Details siehe hier => https://www.phpbb.de/community/viewtopi ... 5#p1381155
    • 0.4.0 (08.01.18) -- Update auf phpBB 3.2.2
    • 0.3.0 (19.12.17) -- Umbau der Dateistruktur =>
      • Neue Unterordner im /theme-Verzeichnis
        • /assets: enthält die für den Basisstyle erforderlichen Komponenten, aufgeteilt in weitere Unterordner:
        • /assets/parent: enthält alle Stylesheets, die in prosilver via stylesheet.css werden im Original (einziger Unterschied: die Namen wurden gemäß der SASS Konvention umbenannt, um sie in den Kompilierungslauf mit einbeziehen zu können).
        • assets/bourbon: enthält die Files der Bourbon-Bibliothek
        • assets/functions: enthält zusätzliche SASS-Funktionen in separaten Dateien
        • assets/mixins: enthält zusätzliche SASS-Mixins in separaten Dateien
        • assets/modules: enthält die Formatierungsregeln für die einzelnen "Modulblöcke", getrennt nach den jeweiligen Objekten (z.B. eine Datei mit den Formatierungen für Beiträge)
      • stylesheet.scss an die neue Dateistruktur angepasst; eine dedizierte _assets_base.scss hinzugefügt, die die Dateien im /assets-Verzeichnis einbindet
      • SASS-Funktionen und -Mixins aus den bisherigen Stylesheets herausgezogen und auf die o.g. Ordner/Dateien verteilt
      • Code für die Anzeige der Beiträge und die Anzeige des Postprofiles rechts/links bzw. der optionalen getrennten Anzeige von Postprofile und Postbody neu geschrieben
      • Fehler in der responsiven Ansicht korrigiert
      • Code aufgräumt und vereinfacht
      • Für Koala-Benutzer: eine angepasste Konfigurationsdatei für Koala => koala-config.json ist im Archiv enthalten.
    • 0.2.1.1 (02.08.17) -- Bugfix => Reihenfolge der @import Regeln geändert
    • 0.2.1 (29.07.17) -- Aktualisiert für phpBB 3.2.1; Bereinigungen und Bugfixes
    • 0.2.0 (23.07.17) -- Erste ALPHA Version des Styles :grin:
      Kompletter Umbau der Stylesheet Struktur; Codebereinigungen; Bugfixes;
    • 0.1.4.1 (25.06.17) -- Layout-Anpassungen, Code-Bereinigungen, Bug Fixes
    • 0.1.3 (25.06.17) -- Mini-Profil in Beiträgen umschaltbar rechts <-> links; Begrenzung der Anzeigebreite des Mini-Profils bei Auflösungen >= 1100px; Codebereinigungen; Bug Fixes
    • 0.1.2 (18.06.17) -- Headerbar "klassisch"/eigener Block u. Postprofile rechts/links jeweils umschaltbar; Codebereinigungen
    • 0.1.1 (07.06.17) -- Mapping erweitert auf Navbar und Headerbar, Farbkorrekturen in den Maps
    • 0.1.0 (05.06.17) -- erste DEV-Version
-------------------------------------

Da es sich um einen Konzeptstyle handelt, bin ich für jede Anregung und Kritik (Meckern über vorhandene Fehler eingeschlossen :wink: ) dankbar - Tester sind immer willkommen!
Zuletzt geändert von Melmac am 02.08.2018, 09:16, insgesamt 1-mal geändert.

Benutzeravatar
Melmac
Administrator
Beiträge: 8
Registriert: 28.07.2017, 20:37

Re: SassySilver

Beitrag von Melmac » 21.08.2017, 00:10

Infos & How To's
  1. Warum wird ein SASS-Compiler benötigt?
    In den stylespezifischen Stylesheets kommt SASS/SCSS zum Einsatz. SASS stellt eine (Syntax-)Erweiterung für CSS dar, die die Möglichkeiten beim Schreiben von CSS-Code stark erweitert.
    Ein SASS-Compiler übersetzt diese Syntax beim Kompilieren wieder zurück in "herkömmliches" CSS, das von jedem Browser verarbeitet werden kann.

  2. Eigenes (Farb-)Schema-Stylesheet erstellen und einbinden
    Im Verzeichnis /theme/core/schemes/ liegt eine Musterdatei _sample.scss => diese kopieren und unter einem neuen Namen im Verzeichnis /theme/custom_files/colour_schemes/ speichern. Beispiel: unter _meins.scss.

    Die Datei danach öffnen und alle Vorkommen von $sample durch $meins ersetzen - dies ist erforderlich, um später die Variablen in ihr gezielt ansprechen zu können.

    In der /theme/_framework.scss unter dem Abschnitt 5.2 Import custom colour schemes die Datei importieren

    Ein letzter Schritt noch: sie muss dem die Umschaltung zwischen den Schemadateien steuernden Code "bekanntgemacht" werden =>
    In der /theme/core/configuration/_scheme_configuration.scss nach der Map suchen, die alle auswählbaren Schemadateien mit ihren jeweils spezifischen/eindeutigen Variablen-"Vornamen" verknüft =>

    Code: Alles auswählen

    $colour-maps: (
    Dort am Ende der Liste der vorhandenen Einträgen für die enthaltenen Beispielschemata einen neuen hinzufügen, am Beispiel hier also meins: $meins,

    Das neue Schema ist damit rein technisch "betriebsbereit", was noch fehlt sind die eigenen Farbanpassungen.

  3. (Farb-)Schema definieren
    Das Schema-Stylesheet enthält zwei Abschnitte:
    • 1. Basic colours:
      Hier werden die Werte für einige Basisvariablen definiert, die dann im folgenden Abschnitt dazu weiterverwendet werden können, um z.B. Abhängigkeiten ableiten zu lassen.
    • 2. Map of secondary colour definitions
      Eine Map ist imgrunde genommen eine Art Tabelle, die eine Liste von Schlüssel->Wert Paaren enthält, nach denen dann gezielt selektiert werden kann.
      ("Nehme aus der Map mit dem Namen X den Wert, der beim Schlüssel Y steht")

      Hier sind alle Variablen aufgeführt, deren Werte dann am Ende des Prozesses im Style zum Tragen kommen können.
      Die Werte können beliebig angepasst werden: es funktionieren "feste" Werte (z.B. #123456, Variablen, die im Abschnitt (1) definiert wurden und auch Funktionen, mit denen diese manipuliert werden können.

      Wichtig: nur die Werte anpassen, nicht den Namen der Variablen (z.B. button-icon-hover) ändern! Die Variablennamen werden als Auswahlschlüssel verwendet und müssen daher in allen Schemadateien identisch sein!
      Variablen. deren Werte nicht angepasst werden müssen/sollen: einfach so stehen lassen, wie sie vordefiniert sind.
    Zum Abschluss wieder alles neu kompilieren

  4. Farbschemata wechseln
    Zum Umschalten zwischen den vorhandenen Schematas: in der theme/custom_files/_custom_configuration.scss nach

    Code: Alles auswählen

    $switch-col-scheme:               default;
    suchen und default durch den Namen des gewünschten Schemas ersetzen, z.B.

    Code: Alles auswählen

    $switch-col-scheme:               meins;
    und neu kompilieren.
    Danach wird der Style im neuen Schema-Design angezeigt.

Antworten