Als je het werk hebt bijgehouden waar ZURB mee bezig was met Foundation for Apps, dan heb je misschien gemerkt dat de meeste van hun demo-sjablonen een aantal behoorlijk handige schuifbare panelen bevatten.

Deze zijn eigenlijk best geweldig, vooral voor hybride apps. Weet je nog hoe handig frames waren voordat ze uit de mode raakten? Welnu, nu kunt u die functionaliteit terug krijgen, maar dan op een responsieve manier.

Na wat sleutelen kon ik de basisfunctionaliteit van deze panelen verwijderen en dat zullen we vandaag leren herscheppen.

1. Begin bij het begin

We beginnen met een aantal vrij eenvoudige markeringen. Het belangrijkste onderdeel is een verpakkingscontainer om uw hele pagina in te pakken.

 
  
 
Inhoud
 
 lipsum ... 
 
 
 

2. CSS

Dingen worden snel interessant in de CSS. Ten eerste willen we onze html en lichaam selectors te zijn hoogte: 100%. We doen dit om de .wikkelen element waar we naartoe gaan hoogte: 100vh. Met de vh-eenheid bedoelen we dat we willen dat deze app de volledige hoogte van het kijkvenster opneemt, zodat de elementen in het venster gedwongen worden om te scrollen. 

We zullen ook instellen .wikkelen zijn weergave: flex zodat we kinderen elementen kunnen geven buigen eigendom.

html, body height: 100%; . wrap height: 100vh; weergave: flex; 

Notitie: Probeer Autoprefixer te gebruiken in plaats van alle verschillende syntaxes voor Flexbox in de loop der jaren te onthouden. Dan moet je gewoon de W3C spec-syntaxis gebruiken en het doet de rest om zoveel mogelijk browsers te ondersteunen.

3. Flexibel worden

Nu we deze "shell" -set-up hebben kunnen we beginnen met het stylen van zeer standaard flex-elementen erin. De enige truc is om ervoor te zorgen dat je deze kinderen-elementen instelt overflow-y: scrollen om een ​​schuifbalk af te dwingen.

hoofd flex: 1; weergave: flex;  terzijde, artikel overflow-y: scroll; opvulling: 2em;  opzij flex: 1;  artikel flex: 2; 

4. Responsief worden

Laten we een stap verder gaan en onze site responsive maken door de zijbalk boven op het inhoudsgebied te stapelen voor kleinere apparaten. Het is net zo eenvoudig als het toevoegen van één CSS-regel in een mediaquery.

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

Conclusie

Deze stappen moeten voldoende zijn om u op weg te helpen deze techniek op uw websites te gebruiken. Nu ik weet hoe ik het moet doen, vind ik allerlei plaatsen om deze schuifbare panelen te plaatsen.

Om dit goed in actie te zien, bekijk de demo op Codepen. Kijk ook eens naar het onofficiële Stylus-herontwerp dat ik met deze techniek heb gemaakt.

Hoe zie je jezelf gebruiken?