Hvis du har fulgt opp med det arbeidet ZURB har gjort med Foundation for Apps, har du kanskje lagt merke til at de fleste av demo-malene har noen ganske nifty, rullbare paneler.

Disse er faktisk ganske fantastiske - spesielt for hybrid apps. Husk hvordan praktiske rammer var før de gikk ut av stil? Nå, nå kan du få den funksjonaliteten tilbake, men på en responsiv måte.

Etter litt tinkering klarte jeg å trekke ut basisfunksjonaliteten til disse panelene, og det er det vi lærer å gjenskape i dag.

1. Begynn ved begynnelsen

Vi starter med litt ganske grunnleggende oppslag. Den viktigste delen er en innpakningsbeholder for å pakke hele siden.

 
  
 
Innhold
 
 lipsum ... 
 
 
 

2. CSS

Ting blir interessant i CSS ganske raskt. Først vil vi ha vår html og kropp selektorer å være høyde: 100%. Vi gjør dette for å sette opp .pakke inn element som vi skal sette til høyde: 100vh. Med vh-enheten sier vi at vi vil at denne appen skal ta opp hele høyden på visningsporten, slik at elementene i den blir tvunget til å bla. 

Vi vil også sette .pakke inn å være skjerm: flex slik at vi kan gi barn elementer a flex eiendom.

html, kropp høyde: 100%;  .wrap høyde: 100vh; display: flex; 

Merk: I stedet for å huske alle de forskjellige syntaksene for Flexbox gjennom årene, prøv å bruke Autoprefixer. Da trenger du bare å bruke W3C-spesifikksyntaxen, og det vil gjøre resten for å støtte så mange nettlesere som mulig.

3. Bli fleksibel

Nå som vi har dette "skallet" satt opp, kan vi begynne å utforme svært vanlige flexelementer i den. Det eneste trikset er å sørge for at du stiller disse barna til elementene overløp-y: bla å håndheve en rullefelt.

main flex: 1; display: flex;  til side, artikkel overflow-y: scroll; polstring: 2em;  til side flex: 1;  artikkel flex: 2; 

4. Bli Responsive

La oss ta det et skritt videre og gjøre vårt nettsted lydhørt ved å stable sidefeltet på toppen av innholdsområdet for mindre enheter. Det er like enkelt som å legge til en CSS-regel i en medieforespørsel.

@media (maksimal bredde: 800px) main flex-direction: column; 

Konklusjon

Disse trinnene bør være nok til å komme i gang med å bruke denne teknikken i hele nettstedene dine. Nå som jeg vet hvordan jeg gjør det, finner jeg alle slags steder å sette disse rullbare panelene.

For å se dette på riktig måte, sjekk demoen på Codepen. Ta også en titt på det uoffisielle Stylus redesignet jeg bygde med denne teknikken.

Hvordan ser du deg selv ved å bruke den?