Video van 5 minuten waarin de DXPR-themafuncties worden geïntroduceerd

Invoering

DXPR-thema is ons premium Drupal-thema. Het is een subthema van het Bootstrap-basisthema en maakt gebruik van het Bootstrap 3-framework . Iets dat misschien niet duidelijk is voor nieuwe potentiële klanten is dat het DXPR-thema geen DXPR Builder bevat. DXPR Builder is een aparte module. Het DXPR-thema en de DXPR Builder kunnen onafhankelijk van elkaar worden gebruikt.

We noemen het DXPR-thema een "Framework-thema" omdat het dankzij de meer dan 200 instellingen voor lay-out, menu, typografie, blokken en meer kan worden gebruikt als platform om een aangepast uiterlijk voor uw website te ontwerpen zonder dat u hoeft te coderen.

1. Bootstrap-basisthema en DXPR-thema

We hebben besloten om het Bootstrap-basisthema te gebruiken omdat het een erg populair en bekend Drupal-project is. Een van de leuke dingen van dit basisthema is dat het alle formulieren, berichten, tabbladen en andere kerncomponenten van Drupal in Bootstrap HTML kan maken. Dit helpt bij het creëren van een holistisch, consistent ontwerp, zelfs als u nieuwe modules aan uw site toevoegt die niet zijn gemaakt om met Bootstrap 3 te werken. Er zijn ook enkele nadelen aan het gebruik van dit basisthema: het is overontwikkeld en wordt zelfs geleverd met een eigen API voor thema-instellingen. De ontwikkelaar heeft heel hard gewerkt om dit beest van een basisthema te creëren, maar nu is de ontwikkeling gespreid en niemand doet een stap om dit beest naar Bootstrap 4 te migreren: https://www.drupal.org/project/bootstrap/issues/ 2554199 .

Sjablonen

Omdat het DXPR-thema een Bootstrap-basisthema met een subthema is, moet u elke keer dat u een nieuwe sjabloon maakt, deze vanuit het bootstrap-basisthema kopiëren en vervolgens wijzigen.

2. Javascript-ontwikkeling in DXPR-thema

In het DXPR-thema gebruiken we veel jQuery, maar op bepaalde plaatsen waar prestaties van cruciaal belang zijn, vervangen we jQuery door gewone Javascript-code.

DXPR-thema gebruikt Grunt.js als taakloper. Grunt voert de volgende taken uit:

  1. Kijk Grunt let op veranderingen en voert taken uit
  2. Compileer Sass-bestanden in gecomprimeerde CSS
  3. Postcss om leveranciersvoorvoegsels toe te voegen, ter ondersteuning van oudere browsers (laatste 2 versies van elke browser en dat wil zeggen 9)
  4. Lelijk (comprimeer) alle javascript-bestanden

JavaScript-prestaties

jQuery is langzamer dan puur JavaScript. Voorbeelden van waar we jQuery verwijderen en extra functies gebruiken om prestatieredenen, deze callback voor het wijzigen van het venster en deze callback voor het scrollen van vensters. In beide gevallen zijn prestaties uiterst belangrijk omdat de scroll- en resize-gebeurtenissen tot duizenden keren per seconde worden geactiveerd. Wat nog belangrijker is, is dat ze op zwakkere systemen en browsers minder vaak zullen worden geactiveerd vanwege prestatiebeperkingen. Dit betekent dat u het systeem van de gebruiker maximaal benut en dat de website traag kan worden of kan crashen.

  • De functie _.debounce in het resize callback-voorbeeld hierboven voert de code slechts één keer uit, nadat de gebruiker klaar is met het wijzigen van de grootte van de viewport.
  • De _.throttle- functie in de scroll-callback met een parameter van 100 ms zal onze code maximaal 10 keer per seconde uitvoeren, terwijl de gebruiker aan het scrollen is.

De bovenstaande 2 functies maken deel uit van de onderstrepingsbibliotheek . Underscore is opgenomen in DXPR Builder, maar niet in het DXPR-thema . Daarom detecteren we in het DXPR-thema of deze functies bestaan en creëren we ze wanneer dat nodig is. Undercsore is ook opgenomen in Drupal 8 core, maar niet in Drupal 7 core.

Voor meer informatie over Javascript-prestaties kunt u onze Javascript Development Guide raadplegen.

3. CSS & SASS in DXPR-thema

In het DXPR-thema maken we gebruik van SASS om efficiënter te coderen. In plaats van zeer lange selectors te schrijven, kunnen we geneste selectors hebben die een visueel intuïtieve hiërarchie in onze sass-code creëren. We hebben onze sass-codein opgesplitst in 4 mappen:

  1. basis (lay-out en ontwerpcode voor de hele site)
  2. componenten (elementen die niet op elke pagina verschijnen)
  3. helpers (utiliteitsklassen, snelkoppelingen naar merkkleuren enz.)
  4. leveranciersextensies (overschrijvingen of extensies van CSS-bestanden die zijn opgenomen in softwarecomponenten van derden, zoals het Bootstrap-framework, jQuery UI en alle Drupal-modules en -thema's die overschrijvingen nodig hebben)

We hebben onze CSS in veel bestanden opgesplitst, zodat de bestanden gemakkelijk kunnen worden gescand, gelezen en begrepen. Een ander voordeel van deze architectuur is dat ontwikkelaars die aan verschillende CSS-componenten werken pull-requests kunnen indienen zonder merge-conflicten. We streven ernaar om alle .scss-bestanden kleiner dan 300 regels te houden.

Klassenamen

Helaas gebruikt het bootstrap 3-basisthema geen zeer gestructureerde klassennamen. In het DXPR-thema proberen we meer gestructureerde klassennamen te gebruiken. We volgen geen enkele naamgevingsconventie volledig, zoals SMACSS of BEM , maar we halen inspiratie uit deze raamwerken en passen structuur toe waar we dat nodig achten. Voorbeeld klassen:

 .body-beglaasde navigatie-desktop
.geglazuurde kop
.geglazuurde kop - vast
.geglazuurde kop--overlay
.beglaasd hoofdmenu 
.geglazuurde-megamenu__kop
.dxpr-thema-util-float-left

Zoals je kunt zien in de bovenstaande klassen, geven we onze klassennamen een naamruimte met de themanaam, en vervolgens hebben we elementnamen met - tekens die woorden scheiden. We gebruiken dubbele streepjes om de status van een element aan te geven.

Heel spaarzaam gebruiken we dubbele onderstrepingstekens om meer context aan een klassenaam toe te voegen, in de vorm van een glassed-parent-element__child-element, maar we willen dit niet overal toepassen om te voorkomen dat onze code te veel opzwelt.

4. Integratie van kleurenmodules

De kleurmodules zijn een complexe module met veel mogelijkheden. Het kan bijvoorbeeld afbeeldingen genereren met een transparante overlay en de achtergrond van de afbeelding vervangen door een effen kleur of zelfs gradiënten, waardoor de afbeeldingen opnieuw worden gekleurd. Het heeft ook de mogelijkheid om uw CSS-bestand te scannen op kleurcodes, en het zal niet alleen kleuren vervangen, maar ook proberen kleuren te vinden die niet in het palet staan, maar wel dicht bij de kleuren in het palet liggen. Vervolgens zal het proberen deze kleuren in de HSL-kleurruimte te verschuiven en terug te vertalen naar de RGB-kleurruimte. Het idee achter deze functie is dat je een palet met vijf kleuren kunt maken, en dat je met CSS tientallen kleuren kunt maken die lichter, donkerder of anderszins nauwe tinten van deze vijf kleuren zijn. De kleurenmodule zal deze kleuren vervolgens op intelligente wijze samen met uw palet verschuiven.

Kleurverschuiving

Helaas is dit kleurverschuivingssysteem gebrekkig. Soms komt het overeen met kleuren die u niet wilt verschuiven. Maar nog vervelender is dat het algoritme afrondingsfouten vertoont die ervoor zorgen dat grijze kleuren naar roze, groen of blauw verschuiven. Om dit probleem te omzeilen, hebben we alle HEX-kleurwaarden in onze CSS in ons palet verwerkt :

https://github.com/jjroelofs/glazed/blob/8.x-1.1.3/color/color.inc#L39

Dit zorgt ervoor dat alle kleuren exact op elkaar afgestemd zijn en dat de kleurenmodule niet zal proberen kleuren in de HSL-kleurruimte te verschuiven. Het is mogelijk om kleuren toe te voegen die u niet in het palet wilt opnemen, de kleurenmodule pikt bijvoorbeeld de kleurwaarden van rgba() niet op.

Belangrijk: de kleurenmodule zal uw CSS-bestanden in de cache opslaan

Als u CSS-bestanden met DXPR-thema bewerkt en u zich afvraagt waarom de wijzigingen niet worden weergegeven, komt dit waarschijnlijk omdat de kleurenmodule een kopie van opnieuw gekleurde CSS-bestanden in de map Bestanden bewaart. Om deze bestanden opnieuw te genereren, moet u het thema-instellingenformulier opslaan. Het wissen van caches heeft nu geen invloed op deze bestanden.

U zult merken dat alle themademo's de DXPR CSS-bestanden uit de bestandsmap laden, behalve de hoofddemo. Dit komt omdat de hoofddemo het standaardkleurenpalet gebruikt en de kleurenmodule dus de CSS-bestanden niet zal herschrijven en in de cache opslaan. Dit maakt de Main-demo het meest aantrekkelijk voor CSS-ontwikkeling .

5. Thema-instellingen en het thema-instellingenformulier

Met het thema-instellingenformulier in het DXPR-thema kunt u meer dan 200 thema-instellingen beheren. We vragen gebruikers om ook de DXPR Helper-module te installeren. Deze module schakelt het DXPR-thema in op de thema-instellingsformulierpagina, in plaats van het beheerthema. Op die manier kunnen we ons thema gebruiken om het ontwerp en de ervaring van ons thema-instellingenformulier volledig te bepalen. We maken ook uitgebreid gebruik van grafische schakelaars en schuifregelaars om hier een meer intuïtieve, ontworpen ervaring te creëren.

De thema-instellingen zijn ingewikkeld, dit is geen plaats voor niet-technische gebruikers. Het is een plek waar sitebouwers en webmasters grote controle kunnen hebben over het uiterlijk van hun website, zonder codering of met minimale codering.

Architectuur voor thema-instellingen

Omdat we zoveel thema-instellingen hebben in het DXPR-thema, splitsen we onze code op in bestanden en splitsen we die bestanden op in "feature"-mappen. De volgende featuremappen zijn te vinden in glassed/features:

  • sooper-block-ontwerp
  • sooper-custom-css
  • sooper-lettertypen
  • sooper-header
  • sooper-indeling
  • sooper-pagina-titel
  • sooper-portfolio
  • sooper-vorigevolgende
  • sooper-typografie

Elk van deze mappen kan een of meer van de volgende 3 bestanden bevatten:

  • feature -theme-settings.inc (code genererende formulierelementen in het thema-instellingenformulier)
  • feature -theme-settings-controller.inc (deze bestanden worden in een lus aangeroepen in template.php (D7) en in DXPR.theme (D8)
  • feature -theme-settings-css.inc (code die CSS-code bouwt op basis van thema-instellingen)

Hoe de thema-instellingen van kracht worden

Er zijn verschillende mechanismen waarmee thema-instellingen van kracht kunnen worden:

  1. Gegenereerde CSS-code
  2. Logica in thema-voorbewerkingsfuncties of twig-bestanden
  3. Logica in Javascript-code

Gegenereerde CSS-code

Wanneer het thema-instellingenformulier wordt opgeslagen, doorloopt een lus alle *-theme-settings-css.inc-bestanden en verzamelt alle CSS-uitvoer. Deze uitvoer wordt opgeslagen in een bestand in de map Bestanden. Dit mechanisme wordt gebruikt waar alleen het wisselen van klasse niet alle opties kan dekken, bijvoorbeeld wanneer thema-instellingen numerieke waarden aannemen (lay-outbreedte, lettergrootte, enz.).

Deze functie wordt opgeslagen in een apart bestand, omdat we deze ook moeten aanroepen tijdens het installatieproces van de site van Drupal, wanneer we een distributie installeren die aangepaste DXPR-thema-instellingen bevat:

voorbeeld

Logica in thema-voorbewerkingsfuncties of twig-bestanden

We brengen veel themawijzigingen door door eenvoudigweg van klas te wisselen. In Drupal 7 moet de logica die HTML-klassen bestuurt in de regel bestaan in preprocess-functies en zullen de sjabloonbestanden vrij zijn van logica. In Drupal 8 is dit veranderd en zal de logica in twig-bestanden gaan.

Drupal 7 voorbeeld | Drupal 8 voorbeeld

Logica in Javascript-code

Dit wordt zeer spaarzaam gebruikt omdat het over het algemeen beter presteert om dingen in de backend-code af te handelen.

Drupal 7-voorbeeld in admin js | Drupal 8 voorbeeld

In Drupal 7 slaan we de geglazuurde instellingen op in drupal.settings.glazed en in Drupal 8 in Drupalsettings.glazed. In Drupal 8 koppelen we instellingen aan elementen met behulp van de eigenschap #attached. In Drupal 7 gebruiken we de drupal_add_js functie.

Drupal 7 voorbeeld:

 drupal_add_js(array('geglazuurd' => array('palet' => thema_get_setting('palet', 'geglazuurd'))), 'instelling');

Drupal 8 voorbeeld:

 $form['#attached']['drupalSettings']['glazedSettings'] = ['palette' => $palette];

7. Browserondersteuning

Ik denk dat het ongeveer vier jaar geleden is dat ik voor het laatst een klacht had over een ernstig browserprobleem. Gelukkig zijn de dagen dat internet explorer ondersteund werd voorbij. Er is natuurlijk een nieuwe uitdaging in het ondersteunen van mobiele apparaten, tablets, televisies en wie weet wat nog meer in de toekomst, maar tot nu toe was browserondersteuning geen groot probleem voor DXPR Theme. In onze PostCSS-configuratie in GruntJS ondersteunen we IE9, maar we testen het nooit.

8. Het menusysteem

@Te doen

9. Glazuur_starterkit bijwerken

Elke keer dat u een update uitvoert in dxpr.css, ons belangrijkste css-bestand, moet een kopie van dxpr.css worden gekloond naar de map glassed_starterkit. Dit is nodig vanwege een bug in de kleurenmodule, die het bestand van daaruit kopieert in plaats van uit de geglazuurde themamap.