Om du har hållit på med det arbete som ZURB har gjort med Foundation for Apps kan du ha märkt att de flesta av demomallarna har några snygga, rullbara paneler.

Dessa är faktiskt ganska fantastiska, speciellt för hybrid apps. Kom ihåg hur praktiska ramar var innan de gick ut ur stil? Nå, nu kan du få den funktionen tillbaka, men på ett lyhörd sätt.

Efter lite tinkning kunde jag dra ut basfunktionaliteten hos dessa paneler och det är vad vi ska lära oss hur vi återskapar idag.

1. Börja vid början

Vi börjar med några ganska grundläggande markup. Den viktigaste delen är en förpackningsbehållare för att paketera hela din sida.

 
  
 
Innehåll
 
 Lipsum ... 
 
 
 

2. CSS

Saker blir intressanta i CSS ganska snabbt. Först vill vi ha vår html och kropp väljare att vara höjd: 100%. Vi gör det här för att ställa in .slå in element som vi ska sätta på höjd: 100vh. Med vh-enheten säger vi att vi vill att den här appen ska ta upp hela höjden på visningsporten så att elementen i den kommer att tvingas att bläddra. 

Vi ställer också in .slå in att vara display: flex så vi kan ge barnelement a böja fast egendom.

html, kropp höjd: 100%;  .wrap höjd: 100vh; display: flex; 

Notera: Istället för att komma ihåg alla de olika syntaxerna för Flexbox genom åren, försök använda Autoprefixer. Då behöver du bara använda W3C-specifiksyntaxen och det kommer att göra resten för att stödja så många webbläsare som möjligt.

3. Att bli flexibel

Nu när vi har det här "skalet" kan vi börja med att utforma mycket vanliga flex-element i det. Det enda tricket är att se till att du ställer in dessa barns element överflöde-y: rulla att genomdriva en rullningsrad.

huvud flex: 1; display: flex;  åt sidan, artikel overflow-y: scroll; vaddering: 2em;  åt sidan flex: 1;  artikel flex: 2; 

4. Att bli responsiv

Låt oss ta det ett steg längre och göra vår webbplats mottaglig genom att stapla sidfältet ovanför innehållsområdet för mindre enheter. Det är lika enkelt som att lägga till en CSS-regel inom en mediefråga.

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

Slutsats

Dessa steg bör räcka för att komma igång med att använda denna teknik i hela dina webbplatser. Nu när jag vet hur jag gör det, hittar jag alla typer av platser för att placera dessa rullbara paneler.

För att se detta på ett korrekt sätt, kolla in demo på Codepen. Titta också på den inofficiella Stylus redesign som jag byggt med den här tekniken.

Hur ser du dig själv med hjälp av den?