Før sommerferien begynte, jobbet jeg med layout, HTML og CSS til resultatsidene til NRKs valgdekning på nett. Siden valgresultatene stort sett består av talldata, egner det seg godt å bruke tabeller. Min kunnskap om tabeller var litt rusten, så arbeidet med resultatsidene var en ypperlig anledning til å friske opp både HTML og CSS. I tillegg til oppfriskingen, brukte jeg litt jQuery til å forbedre det visuelle og øke brukervennligheten.

Siden sommerværet ikke har vært supert de siste ukene, har jeg lekt litt mer med tabeller og jQuery. Resultatet av lekingen er altså min første jQuery plugin. Den legger til en rekke CSS-klasser for å utvide mulighetene for visuell utforming og brukervennlighet.

Slik aktiveres pluginen (jQuery biblioteket og pluginfilen må være lagt til):

jQuery(function($){
  $('table').tableTweaks();
});

Her er klassene som legges til:

.tt-alt

Klassen legges på annehver <tr> i <tbody>

.tt-first

Klassen legges på første <tr> og <th> eller <td>

.tt-last

Klassen legges på siste <tr> og <th> eller <td>

.tt-trace

Klassen legges på <th> i samme rad som musepekeren holdes over og på samsvarende <th> i <thead>

.tt-over-row

Klassen legges på <tr> som musepeker holdes over

.tt-over-col

Klassen legges på <td> med samme index som den musepeker holdes over i alle <tr> i <tbody>

.tt-over-cell

Klassen legges på <td> som musepeker holdes over

Hvis det er ønskelig å sette egne klassenavn, kan det gjøres slik:

jQuery(function($){
  $('table').tableTweaks({
    oddClass: 'dittklassenavn',
    firstClass: 'dittklassenavn',
    lastClass: 'dittklassenavn',
    highlightHeaders: 'dittklassenavn',
    overRow: 'dittklassenavn',
    overCol: 'dittklassenavn',
    overCell: 'dittklassenavn'
  });
});

Her finner du et eksempel og her er selve pluginfilen.

De store nettavisene har systemer som gjør det enkelt å oppnå den rette layouten. På mindre sider, der publiseringssystemet for eksempel er WordPress, er det ikke like lett å løse alt på like elegante måter. Kanskje tittelen ikke blir så fin, når toppsaken hopper ned til neste posisjon, men beholder sin formatering.

Jeg har lekt med en ide som jeg ønsker deres innspill på.

La oss si alle saker, uansett bredde, har samme HTML-grunnlag. Det eneste som skiller fullbreddesaker fra halvbreddesaker er en CSS-klasse og bildenes høyde og bredde. I CSSen definerer vi en standardstørrelse på tittelen i fullbreddesaker og en standardstørrelse i halvbreddesaker. Det er en fordel om halvbreddesaker har halvparten så stor tittelstørrelse. Ord(ene) vi ønsker å utheve eller forminske, pakker vi inn i en <span>. På denne taggen kan vi enten sette en klasse eller skrive inline CSS. Tekststørrelsen, innenfor <span>, definerer vi i prosent. Det gjør at tittelen på fullbredde- eller halvbreddesaken vil ha et fast forhold mellom standardstørrelsen på tittel, og prosentverdien på <span>.

Skjermdump av toppsak på VG.no - 19.06.2009

Nettlesere er spesielt ulike i sin behandling av tekst. Det skal ikke mange pixler til, før teksten bryter i en nettleser, mens andre nettlesere viser teksten slik den var tenkt. Derfor er det viktig å ikke finjustere titler for mye. Titlene på VG.no faller stadig fra hverandre i min standard nettleser (Safari).

Hva synes dere om løsningen?

Hva slags CSS-rammeverk bruker jeg?

Selve prinsippet i 960 Grid System passer meg utmerket, men det inneholder litt mer enn jeg trenger. Derfor har jeg trukket ut selve kjernen og ender opp med dette CSS-rammeverket:

.wrapper { width: 960px; }
.col01, .col02, .col03, .col04, .col05, .col06, .col07, .col08, .col09, .col10, .col11, .col12 {
  display: inline;
  margin: 0 10px;
  float: left;
}
.col01 { width:  60px; }
.col02 { width: 140px; }
.col03 { width: 220px; }
.col04 { width: 300px; }
.col05 { width: 380px; }
.col06 { width: 460px; }
.col07 { width: 540px; }
.col08 { width: 620px; }
.col09 { width: 700px; }
.col10 { width: 780px; }
.col11 { width: 860px; }
.col12 { width: 940px; }
.first { margin-left: 0; }
.last { margin-right: 0; }
.clearfix:after {
  height: 0;
  clear: both;
  content: '.';
  display: block;
  visibility: hidden;
}
.clearfix { display:inline-block ;}
* html .clearfix { height:1%; }
.clearfix { display:block ;}

Ukomprimert, utgjør de 30 linjene 0.7 KB. I tillegg synes jeg det fungerer bra å bruke Eric Meyers reset.css.

Hvordan bruker jeg CSS-rammeverk?

Ved å huske og respektere det jeg har skrevet i CSS-rammeverket kan jeg enkelt og kjapt sette sammen layouter som stort sett fungerer i alle de mest kjente og brukte nettleserne. Her er et lite eksempel:

<div class="wrapper">
  <!-- Hovedspalte -->
  <div class="col06 first"></div>
  <!-- Sidespalte -->
  <div class="col06 last">
    <!-- halvbredde kolonne -->
    <div class="col03 first"></div>
    <!-- halvbredde kolonne -->
    <div class="col03 last"></div>
    <!-- fullbredde kolonne -->
    <div class="col06 first last"></div>
  </div>
</div>

Koden over gir meg denne layouten:

Outline, bakgrunnsfarge og høyde er lagt til for visuell effekt.

Alle kolonneklassene har 10px margin på høyre og venstre side. For å putte nye kolonner inn i eksisterende kolonner, trenger jeg å nullstille marginen til første og siste kolonne. Det sørger klassene .first og .last for. I tillegg til klassene som utgjør CSS-rammeverket, er det viktig at jeg legger til semantiske (meningsbærende) klasser som jeg kan skrive min egen CSS til.

Når bruker jeg CSS-rammeverk?

Denne bloggen bruker ikke noe CSS-rammeverk. Layouten er for enkel, så gevinsten blir minimal. Uansett hvilke prosjekter jeg jobber med, er det en vurderingssak om CSS-rammeverk egner seg eller ikke.

Det finnes en mengde artikler om positive og negative sider ved CSS-rammeverk, men jeg er mer interessert i å høre hva dere mener om tema?

Da jeg lagde designet for denne bloggen, prøvde jeg å legge til noen slike detaljer. Se for eksempel på effekten i bakgrunnen, som ikke synes før man endrer størrelsen på nettleservinduet.

En annen detalj er muligheten for å skjule sidespalten ved å klikke på riktig sted. Jeg har ikke automagisk fått et supert design på grunn av disse småtingene, men det er morro med detaljer

Her er kodesnuttene som gjør det mulig:

jQuery

jQuery(function($) {
  $('body').prepend('<div class="showhide"></div>');
  $('.showhide').toggle(
    function() {
      $('#side').animate({ opacity: '0' }, 750, function() {
        $('#container').animate({ width: '560px' }, 250, function() {
          $('body').toggleClass('narrow');
        });
        $('#side').hide();
      });
    }, function() {
      $('#container').animate({ width: '840px' }, 250, function() {
        $('#side').animate({ opacity: '1' }, 750).show();
          $('body').toggleClass('narrow');
        });
      }
    );
  $('#about .showhide').click();
});

CSS

.showhide {
  position: absolute;
  margin-left: -13px;
  cursor: pointer;
  display: block;
  height: 10px;
  z-index: 99;
  width: 26px;
  left:50%;
}

Hvilke nettsider og detaljer synes dere er tøffe?