FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH [email protected] . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS

MARIA KERN | SENIOR FRONTEND ARCHITECT

Schwierigkeiten im Frontend?!


MANGELNDER ÜBERBLICK SCHWIERIGKEITEN IM FRONTEND?!

netz98 new media GmbH www.netz98.de [email protected] 3 |





TEAM-ARBEIT KONFLIKTE SCHWIERIGKEITEN IM FRONTEND?!


Gleichzeitig an einem Frontend arbeiten?

Internes Beispiel: diese Überschrift wurde im Projektverlauf 3 mal gestylt…

• Die Frage am Anfang: Welche Styles werden verwendet? Wie gehe ich ran?

• Laden und Überschreiben der Magento-Styles?

• Nur eigene Styles?

• Kopieren und Ändern der Magento-Styles? seit RWD-Theme und in Magento 2 nun besser möglich

• Enormer Umfang an Seiten im Frontend bleibt nichts beim „Standard“ – anders als im Backend

• […] Content-Pflege, Inline-Javascripts, Übersetzungen

SPEZIELL IN MAGENTO


SCHWIERIGKEITEN IM FRONTEND?!

Jeder Shop ist individuell. Im Frontend hängt vieles seitenübergreifend zusammen. Wie kann man so arbeiten, dass man projektübergreifend immer effektiver wird?

Herausforderung: Wiederverwendbarkeit!


MAGENTO ALS FE-FRAMEWORK


HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!

Herangehensweise: Magento als Frontend-Framework

Als solches nutzen

Weiter-entwickeln




Im Backend ist die Modul-Entwicklung alltäglich

Zend Framework Magento Eigene

Module

Wenn möglich: Unabhängige Module!

Übernahme in anderem Projekt

Beispiel: N98_InfoFiles




Module auch im Frontend!

• Problem: Jeder Shop hat individuelles Aussehen

• Abstraktes Denken – was von diesem Modul ist allgemein gültig, was ist kunden- oder projektspezifisch?

• Nutzen der Präprozessoren

• Styling-Bausteine durch Variablen/Mixins abstrakt halten (Erst das Einsetzen der Werte machen diese individuell)

• Klassen-Namen, Funktions-Namen, Variablen-Namen

• Denkweise immer auf Wiederverwendbarkeit gepolt







Search Navigation Hero List of links Highlight

http://daverupert.com/2013/04/responsive-deliverables/




Voraussetzung: Materie genau kennen und verstehen!

„Frontend-Module“ von Magento erkennen und als solche nutzen




Voraussetzung: Materie genau kennen und verstehen!

„Frontend-Module“ von Magento erkennen und als solche nutzen




• Styles-Verteilung:

• Gemeinsamkeiten, Positionierung, Abstände: .add-to-links li

• Farbe: a

• Icon: .link-wishlist:before

• Der Wishlist-Link muss auch außerhalb der Liste funktionieren




Vorgeschmack auf Magento 2

• Modularer Aufbau zieht sich komplett durch

• Es ist unerlässlich, das System zu verstehen und damit zu arbeiten

• Proaktives Nutzen der Variablen und Mixins

• Initial hoher Aufwand, aber langfristiger Nutzen




Eigenes „Framework“ wiederverwenden?

Als Framework nutzen

Und Weiter-entwickeln

Composer Paket

Beispiel für ein eigenes Frontend-Boilerplate

Projektübergreifende Styles – Modul-Styles werden im Boilerplate hinzugefügt und können im nächsten Projekt verwendet werden


MAGENTO ALS FE-FRAMEWORK HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!

Magento Templates (RWD-Theme)

Twitter Bootstrap

Boilerplate

Projekt-Styles

Ähnlicher Ansatz von Webcomm : https://github.com/webcomm/magento-boilerplate



netz98 Standard Style Definitionen

kundenspezifische Style Definitionen

Bootstrap (und andere Frameworks)



Einbindung der Bootstrap Dateien

• Einige Dateien nur als „Referenz“

• Styles und Mixins nur zur Verwendung innerhalb von Less

• Keine Einbindung in CSS-Datei

• „(reference)“ gibt es in SASS nicht




Es geht nicht darum, ein fertiges Theme zu erstellen, sondern sich eine wiederverwendbare Arbeitsgrundlage zu schaffen

Themes gibt es genug…

Bootstrap Theme Beispiele:

http://magenticians.com/7-magento-bootstrap-themes

http://www.magentocommerce.com/magento-

connect/bootstrap-responsive-theme.html

Werkzeuge: Präprozessoren Sass / Less


HILFSMITTEL NUTZEN


WERKZEUGE: PRÄPROZESSOREN SASS / LESS

Grunt

• Generieren der CSS-Datei aus Sass oder Less (minifiziert + development mode mit map Datei)

• Separate Datei für ältere IE + Bless Task (wegen Rules Limit)

• Autom. Generieren von Image Sprites (inkl. Mixins)

• JS-Files zusammenfassen und minifizieren

• File Watcher

• Livereload + Cache Flush bei bestimmten Dateien n98-magerun Compass

Task Runner / CLI Tools

HILFSMITTEL NUTZEN



Emmet Plugin

Text-Editor Plugins

HILFSMITTEL NUTZEN



http://sassmeister.com/ http://lesscssismore.com/

Vorschau Präprozessoren in CSS

FALLSTRICKE VON SASS / LESS



http://lesscssismore.com/

nicht gewollt

KONVENTIONEN EINFÜHREN



Zur eigenen Sicherheit, Sauberkeit und für bessere Teamarbeit

• Namenskonventionen (siehe Magento 2)

• prefix .abs- (from abstract) für Extend class names

• '@' + '_' + 'object' + '-' + 'property' + '-' + 'state' = @_object-property-state @_link-color-hover

• Frontend-Styleguide erstellen • Module außerhalb der Shopseiten auflisten greifen die Styles überall?

• Zur Kontrolle aber auch zum Nachschlagen für andere Entwickler • Wird während oder sogar vor der Umsetzung erstellt • Man „zwingt“ sich, modular zu Denken

• Dateiablagen / -Gruppierungen / Dateinamen

• Magento 2 UI Library

NACHLESEN



Weiterführende Links

• Magento 2

• http://devdocs.magento.com/

• http://devdocs.magento.com/guides/v1.0/frontend-dev-guide/css-topics/theme-ui-lib.html

• https://github.com/magento/magento2

• http://magerun.net/

• http://sassmeister.com/

• http://lesscssismore.com/

• http://gruntjs.com/getting-started

• http://docs.emmet.io/cheat-sheet/

• http://styletil.es/

VIELEN DANK!



?

FRAGEN

Documents

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH [email protected] . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch