Responsive lister

 

En praktisk guide for deg som lager responsive lister

 

Mediaqueries blir ofte nevnt i samme setning som responsivt design. Er de den beste løsningen for responsive lister? Her er en annen løsning i javascript.

 

Har du identisk høyde og bredde på alle listeelementene kan det gjøres enkelt ved å angi en float-verdi. Husk at parent-elementet vil kollapse, så vurder å bruke en clearfix. Se under hvordan innhold kan tilpasse seg dynamisk fra en størrelse til en annen.

 

Nettleser x
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 

CSS mediaqueries kan bruke høyden eller bredden på hele vinduet

Vi kan bruke mediaqueries til å lese bredden til nettleservinduet med mediaquery. Slik ser det ut når en overskrift endrer skrift-størrelse basert på vinduets bredde:

h1{
font-size: 40px;
}
@media (max-width: 800px){
h1{
font-size: 27px;
}
}


Nettleser x

Min overskrift

 

Et problem i 120 deler

Vår oppgave er å plassere en responsiv ansattliste i layoutsystemet. Vi bruker Bootstrap sitt layoutsystem i Solve CMS. Dette systemet er basert på at HTMLelementer på siden får CSSklasser. Disse CSSklassene bestemmer hvor mange deler av 12 et element tar opp, så et element tar en 3del ved å legge til klassen .col-sm-4. Under kombinerer vi mediaqueries og bootstrap-klassene:

.col-sm-12 .col-sm-6 .ansattliste > li{
float: left;
width: 25%;
}
@media (min-width: 551px) and (max-width: 992px){
.col-sm-12 .col-sm-6 .ansattliste > li{
width: 50%;
}
}

 

Eksemplet over repeteres for alle kombinasjoner av layout-klasser og skjerm-bredder. Grid-systemet er delt i 12 deler som har 2 nivåer. Da ganger vi 12 med 2. Vi deler skjermbredder i 5 kategorier som også må ganges med antall kombinasjoner vi allerede har. Vi har nå 120 variabler. Vi kan gruppere mange av disse selektorene, men løsningen har for mange variabler for å bli regnet som elegant eller intuitiv.

 

Javascript kan spørre etter bredden til enkeltelementer

Siden javascript er nettleserens programmeringsspråk, er det langt mer fleksibelt enn CSS alene. CSS kan vite hvor stort hele vinduet til nettleseren er, mens javascript kan lese av størrelsen til elementer på siden. Akuratt nå er det plass til 800 pixler i bredden til innhold i boksen der teksten er plassert. Snu på telefonen eller endre størrelsen på vinduet til nettleseren din for å endre dette tallet.

Vi spør etter tilgjengelig bredde med javascript og grupperer svaret i 5 kategorier (xxl, xl, l, m, s og xs), og gir elementet en klasse for den gruppa slik:

var currentTarget = $('.ansattliste'),
xl = 1140,
l = 940,
m = 720,
s = 550,
xs = 320;

function parentWidth(target){
var $pw = $(target).parent().width();

function reassignClass(newClass){
$(target)
.removeClass('xxl xl l m s xs')
.addClass(newClass);
}

if($pw >= xl){
reassignClass('xxl');
} else if($pw >= l){
reassignClass('xl');
} else if($pw >= m){
reassignClass('l');
} else if($pw >= s){
reassignClass('m');
} else if($pw > xs){
reassignClass('s');
} else{
reassignClass('xs');
}
}

$(document).ready(function() {
parentWidth(currentTarget);
});
$(window).on('resize', function(){
parentWidth(currentTarget);
});

 

Vi bruker Less CSS for å skrive en funksjon for å regne ut bredden i prosent et element trenger, basert på hvor mange elementer vi ønsker i hver rad. Hvis vi ønsker ett element i bredden, tar dette elementet 100%. Ønsker vi to elementer i bredden tar de 50% minus eventuelle marginer. I tillegg kan vi nå sette clear på det første elementet på hver linje. Dette er nyttig hvis elementene i en liste har forskjellig høyde, og vil gi en feil hvis clear ikke er satt på rett element.

.row-machine(@numPerRow, @margin) {
width: ((100% - ((@numPerRow - 1) * @margin)) / @numPerRow);
float: left;
margin-right: @margin;
&:nth-child(@{numPerRow}n) {
margin-right: 0;
}
&:nth-child(@{numPerRow}n+1) {
clear: left;
}
}

 

Når vi kaller funksjonen row-machine er den første verdien antall elementer vi ønsker i bredden. Den andre verdien er marginen mellom elementene. Nå kan vi skrive et kortfattet og forutsigbar stilark basert på javascriptklassene:

.ansattliste{
&.xxl > li{
.row-machine(5, 1.3%);
}
&.xl > li{
.row-machine(4, 1.5%);
}
&.l > li{
.row-machine(4, 2%);
}
&.m > li{
.row-machine(3, 2%);
}
&.s > li{
.row-machine(2, 3%);
}
&.xs > li{
width: 100%;
margin-bottom: 10px;
}
}



Konklusjon

Mediaqueries er blitt en standard teknikk på nettet i etterkant av blogginnlegget til Ethan Marcotte i 2010. Konseptet er svært enkelt og har gjort det lettere for designere å lage responsive nettsider. Teknikken jeg har presentert her krever å bruke både CSS og javascript sammen, men når den brukes i en liste i et uforutsigbart layout har jeg forsøkt å vise at denne teknikken gir mer forutsigbarhet enn å kun bruke CSS. 

 

Rolf Hammerstad

Dato skrevet 09.09.2015 11:22 . Endret 15.11.2016 10:31 .