Scratch, a responsive theme starter

mobile-first-theme-starter-drupal7

Een eenvoudige theme starter voor drupal7 "Scratch"

Scratch is een drupal 7 theme met minimale middelen en tegelijk voldoende volledig om een site uitstraling te geven. Scratch kan gebruikt worden als voorbeeld, als parent theme of als template.
https://github.com/FlorisVedder/scratch

Start Klaar

Standaard heeft drupal als voorbeeld voor een minimaal theme stark. Het nadeel van stark is dat het technisch wel een theme is maar estetisch nog niet. Scratch ziet er uit als een theme en is daarmee direct bruikbaar. Basis theme instellingen zoals een bruikbare layout en vormgeving van de header zijn aanwezig. Andere instellingen zoals een slideshow of een button design voor links in het hoofdmenu zijn weggelaten zodat deze niet overschreven hoeven te worden en de code leesbaar blijft.

Mobile First

Scratch is mobile first responsive. In css/layout.css en css/style-regions.css is een eenvoudige mediaquery opgenomen.
In scripts/layout.js is een functie opgenomen die naast elkaar gelegen content kan controleren op hoogte en zijn siblings en parent de gelijke hoogte geeft. Deze kan aangeroepen worden wanneer de positionering er voor zorgt dat de parent niet de hoogte van de children volgt (position absolute) of wanneer de siblings gelijke hoogte moeten hebben. Bijvoorbeeld voor de main wrapper met daarin de children; content, sidebar_first en sidebar second. Ten behoeve van de mobile first layout komen sidebar first en sidebar second in de html na de content. De layout.css en layout.js zorgen op bredere schermen ervoor dat de sidebars aan weerszijden van de content komt te staan.

Default Drupal7 regio's

Scratch gebruikt de standaard Drupal7 regio's.

Templates en Theme functions

Er wordt slechts één template overschreven: page.tpl.php
Er wordt slechts één theme function overschreven: theme_breadcrumb($variables);
Bijde aanpassingen zijn minimaal en kunnen indien gewenst eenvoudig verwijderd of aangepast worden.

CSS benadering

Bij de CSS is gekozen voor een onderscheid tussen element specifieke benadering en benadering vanaf een hoger niveau om op deze manier de css duidelijk leesbaar en makkelijk aanpasbaar te houden. Deze benadering is een uitgangspunt geweest bij het opzetten van scratch maar hoeft niet noodzakelijk gevolgd te worden.

Zoveel mogelijk CSS is op een hoger niveau gethemed. Bijvoorbeeld #header h1, #content h1,
#header h2, #header h2 a{
  color: #4D0005;
}

In plaats van:
#site-name a{
  color: #4D0005;
}

Zo blijft de vormgeving voor de header uniform, ook bij andere h2 elementen in de header. Html is op deze manier aan te passen zonder dat we rekening met de css hoeven te houden. Als we nu een ander h2 element in de header plaatsen neemt deze keurig dezelfde styling aan.
De uitzondering:
Stel dat we de site-name een vormgeving willen geven die specifiek is voor de site-name en onafhankelijk moet zijn van een hoger gelegen container, zoals header of sidebar. Dan zouden we de sitename juist wel met zijn element specifieke selector moeten benaderen. In dit geval zou die selector dan kunnen zijn: #site-name a. Bijvoorbeeld met een rode achtergrond en zwarte rand.
#site-name a{
  border: 2px solid black;
  background-color: #FF0000;
  padding: 4px;
}

Op deze manier blijft de #site-name overal op de site gelijk ook als we hem in de footer of sidebar terug laten komen. Een dergelijke element specifieke benadering in zinvol voor bijvoorbeeld call to action buttons, logo's en inschrijfbuttons. In het algemeen voor elementen met een specifieke styling die over de hele site gelijk is, onafhankelijk van de container waarin ze zich bevinden.
Wat we willen voorkomen is een mix van globale en element spefieke selectie, bijvoorbeeld:
header h2#site-name a{
  // theming
}

Een dergelijke selectie volgt nog een herbruikbare vormgeving voor de header nog een herbruikbare vormgeving voor de titel. Een andere h2 in de header moet dan opnieuw geselecteerd worden. Bij het verplaatsen of kopieren van de site-name naar een andere regio moet de styling worden aangepast of gekopieerd. Hierdoor wordt de css minder goed leesbaar en kan het lastiger zijn om aanpassingen door te voeren. Bijvoorbeeld wanneer de header van de site van vormgeving moet veranderen.

In style-regions.css is de theming voor de grotere containers in de site opgenomen bijvoorbeeld:
#header a:hover{
  text-decoration: underline;
}

In style.css is de globale theming opgenomen bijvoorbeeld:
H1, H2, H3, H4, H5, H6, p, a, span, div {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

In style.css is ook de voor de hele site van toepassing zijnde element specifieke theming opgenomen bijvoorbeeld:
.feed-icon{
  padding-top: 2em;
  float: right;
}

Themen op veld, node of views niveau

Het kan ook zijn dat theming kenmerkend is voor elementen van veld, node of views niveau. Om de theming op dit niveau bij elkaar te houden zijn hier aparte .css bestanden voor gemaakt. Bijvoorbeeld css/style-elements-views.css met:
.views-row:last-child{
  margin-bottom: 0rem;
}

CSS en JS aggregatie

Omdat het theme stimuleerd tot meerdere css en js bestanden is het aan te bevelen om op een productie site de CSS en JS aggregatie in drupal aan te zetten. Als deze uit blijft staan gaat het ten kostte van de snelheid van de site.

WIP

Het theme is (en blijft waarschijnlijk nog wel even) een Work in Progress. Het is duidelijk en voldoende gedocumenteerd om mee aan de slag te gaan. Tegelijk kunnen er nog kleine foutjes in zitten en heb ik nog een paar to do's die op de planning staan. Omdat ik op dit moment nog met Drupal7 werk heb ik het theme eerst op de Drupal7 manier op gezet. Waarschijnlijk volgt er in de loop van 2016 een variant op een Drupal8 en Twig basis.

Samenvatting


Scratch is een responsive theme dat direct bruikbaar en toonbaar is zonder verdere toeters en bellen. Scratch is volledig en tegelijk minimaal zodat er alle vrijheid is voor verdere aanpassingen en uitbreidingen. Voor de css is een handreiking geboden om slim om te gaan met selectors zodat code compact blijft en aanpassingen in de HTML geen ongewenste resultaten opleveren.