Drupal theming met Chrome DevTools Autosave en Mothership als responsive HTML5 base theme

Ingediend door Donny op do, 26/07/2012 - 06:48

Tijdens het themen van een website verlies je redelijk wat tijd bij het overschakelen tussen je editor en je browser. Natuurlijk kan je dit verlies beperken door gebruik te maken van shortcuts voor het switchen tussen programma's maar er bestaan ook handigere oplossingen voor.

Iedereen heeft wel een persoonlijke voorkeur voor welke zijn default browser is en welke de beste is voor te themen, die discussie wil ik hier niet beginnen. Voor mij persoonlijk is dit Google Chrome dus zal ik in deze post verder in gaan op Chrome DevTools Autosave.

Na het installeren en configureren van Autosave kan je gerust je CSS en JS verder typen en aanpassen in het Developer Panel van Chrome en wordt dit op de achtergrond opgeslagen in de bestaande bestanden, je zal dus niet langer moeten overschakelen tussen je editor en browser.

Firefox gebruikers kunnen hiervoor een kijkje nemen naar https://addons.mozilla.org/nl/firefox/addon/firefile 
Deze zou ook live op je webserver de CSS bestanden kunnen wijzigen, maar dit heb ik echter nog niet uitgetest. Voor Chrome DevTools Autosave zou dit trouwens ook mogelijk moeten zijn, lees er meer over op Running on a remote host.

Installeren van de DevTools Autosave extensie in Chrome

Een uitgebreide uitleg kan je ook terug vinden op: https://github.com/NV/chrome-devtools-autosave

Om er voor te zorgen dat de bestanden opgeslagen geraken dienen we ook nog node.js server bij te installeren

Installeren van Autosave Server

  • Installatie instructies kan je terug vinden op http://nodejs.org
  • Na installatie open je Terminal (Mac) of cmd.exe (Windows) en geef je het volgende commando in: npm install -g autosave
    Indien je op een Mac zit kan het ook nodig zijn sudo toe te voegen indien jouw gebruiker niet voldoende rechten heeft: sudo npm install -g autosave

Localhost of virtuele hosts toevoegen

  • Open de settings pagina voor DevTools Autosave, je kan deze bereiken op het adres chrome://settings/extensions
  • Druk bij DevTools Autosave op opties
  • Standaard zal hier enkel de regel staan om te zoeken naar bestanden die starten met file://
    Voeg hier de gewenste regels aan toe, afhankelijk van jouw lokale setup.
    Als voorbeeld heb ik hier bij mij localhost, carettedonny.dev en demo.local aan toegevoegd.

Chrome DevTools Autosave settings

Je kan de Autosave server nu opstarten door in je Terminal (Command line) het commando autosave in te geven.

Enige puntje waar je wel mee moet uitkijken is dat je niet start met het overschrijven van stylesheets uit de Drupal Core of afkomstig van contributed modules. Daarvoor raad ik aan op voorhand een stylesheet aan te maken waarin je de onderdelen opneemt die je wenst te stylen. In het Chrome Developer panel kan je naast elke CSS eigenschap ook zien in welke stylesheet deze is opgenomen.

In eerdere versies kon het zijn dat je nog problemen had bij het opslaan van de gewijzigde bestanden, dit kon je oplossen door een route.js configuratie bestand aan te maken en deze mee te geven als optie bij het opstarten van de server. Deze heb je dus enkel nodig indien je werkt met een oudere versie van Autosave.

Route.js (Enkel nodig bij oudere versies)

  • Je kan dit bestand toevoegen waar je zelf wenst, vergeet enkel de locatie niet want indien je wenst dat de server hier gebruik van maakt dien je de locatie hiervoor op te geven bij het opstarten van je Autosave server. In mijn geval heb ik dit in de map bij mijn gebruikersaccount opgegeven dus /Users/Donny/route.js
  • Route.js ziet er bij mij als volgt uit en zal er dus voor zorgen dat bestanden voor carettedonny.dev en alles onder localhost kunnen worden terug gevonden

exports.routes = [{
  from: new RegExp('^http://www\.carettedonny\.dev/'),
  to: '/Users/Donny/Sites/carettedonny/'
},
{
  from: /^http:\/\/localhost\//,
  to: '/Users/Donny/Sites/'
}];

Indien we deze route.js zouden willen laden dienen we de Autosave server op te starten vanuit onze gebruikers locatie en met het commando autoSave --config routes.js

Als je de laatste versie van Autosave hebt gekozen kan je gewoon starten met het commando autosave

Om even te demonstreren hoe gemakkelijk het werken is met deze extensie ingeschakeld heb ik even een standaard Drupal installatie opgezet en hier bij een korte demo video opgenomen.

Stappen in de video

  • Downloaden Mothership en aanmaken subtheme Cow Invasion
  • Overnemen van stylesheet style.css met op voorhand ingevulde waardes voor deze te kunnen stylen met Autosave, zodat we zeker geen Drupal Core stylesheet overschrijven.
  • Styling van de responsive Drupal theme met Chrome Autosave

Reden waarom ik gekozen heb voor Mothership als responsive base theme is door zijn cleane output. Deze maakt het ook mogelijk om zelf te kiezen welke Drupal Core of Contributed CSS en JS bestanden mogen geladen worden en welke niet. Daarnaast geeft deze ook een extra handige Drush optie mee om in geen tijd een sub theme aan te maken, zodat je niet zelf de nodige stappen hiervoor hoeft te doen.

De demo theme uit de video is natuurlijk vrij beperkt maar geeft toch aan hoe je in geen tijd een responsive theme voor je Drupal site kan aanmaken. (Video best Full HD te bekijken rechtstreeks op Vimeo.com)

Video