En ny måde at anskue mit CSS og Drupal theming arbejde på - "New approach - Drupal theming"
Når jeg har modtaget et design fra en webdesigner, har jeg indtil nu kastet mig over at lave en perfekt XHTML og CSS fil. Bagefter har jeg konverteret XHTML filen til et Drupal theme og brugt lang tid på at rydde op i Drupal's kode. Mine krav er altid, at html strukturen skal være så simple som mulig. Let og overskuelig. Denne fremgangs måde virker og har vist sit værd! Men nu har jeg vendt processen om. I stedet for at rydde op i Drupal's koder så min kode står tilbage, benytter jeg Drupal's html struktur til at design/kode på. I det arbejde har jeg lavet et simpelt Drupal 7 theme som virker som udgangspunkt. En ny approach for mig og nogle helt andre strukturer på theme filerne.
page.tpl.php
... mere simpelt bliver det nok ikke!
<div id="wrap">
<?php
print render($page['header']);
print render($page['sidebar_second']);
print render($page['sidebar_first']);
print render($page['highlighted']);
print render($page['help']);
print render($page['content']);
print render($tabs);
print render($page['footer']);
?>
</divregion.tpl.php
Denne fil er pludselig blevet meget vigtig da det er den der skaber hele designet. Hvor jeg før kun printede
<?php print $content; ?>er det nu default region.tpl.php
<?php if ($content): ?>
<div class="<?php print $classes; ?>">
<?php print $content; ?>
</div>
<?php endif; ?>... med dens div classes der strukturere designet.
Body classes - designerens bedste ven!
<body class="<?php print $classes; ?>" <?php print $attributes;?>>I html.tpl.php printes Body classes og med et lille simpelt style.css deles siden op i en, to eller tre spalter, alt afhængig af hvilke og hvor mange sidebar's der benyttes på den pågældende side.
Et godt udgangspunkt for 90% af de webdesign der laves i dag!
Ipad & Iphone ... og alle de andre små!
Ved hjælp af media queries som:
@media screen and (max-device-width: 768px) { ... }... skubbes højre spalte altid nederst i designet som en ekstra footer, da læsbarheden forringes mærkbart, hvis webdesignet er i tre spalter på Ipad og IPhone. Samtidig giver det mening at ændre lidt på tekst- og linje-størrelserne på disse små skærme.