Scherm­vul­len­de responsive lay-outs met Flex­box

Met de krach­ti­ge mo­ge­lijk­he­den van Flex­box maak je een responsive kaart die al­tijd mid­den op het scherm staat

Web Designer Magazine - - Inhoud - Au­teur Ste­ven Ro­berts

Met de krach­ti­ge mo­ge­lijk­he­den van Flex­box maak je een responsive kaart die al­tijd mid­den op het scherm staat.

We ma­ken een lay-out met een gro­te scherm­vul­len­de ach­ter­gron­da beel­ding die ge­dimd wordt. In het mid­den van dat ontwerp staat een recht­hoe­ki­ge kaart met de­zelf­de – on­ge­dim­de – a beel­ding en tekst.

Het dim­men van de ach­ter­gron­da beel­ding ge­beurt met blend-mo­des in brow­sers die het on­der­steu­nen. Voor brow­sers die blend niet on­der­steu­nen (waar­on­der Ed­ge), ge­brui­ken we trans­pa­ran­tie. Op de ach­ter­grond leg­gen we een kaart die al­tijd in het mid­den staat, on­ge­acht hoe groot of klein het ven­ster is.

De kaart past zich aan het ven­ster aan. Op mo­bie­le ap­pa­ra­ten en klei­ne­re ta­blets staat de a beel­ding bo­ven in de kaart en de tekst er­on­der. Op gro­te­re scher­men staat de a beel­ding links en de tekst rechts er­naast. De so­ci­a­le­me­diak­nop­pen staan al­tijd on­der in de kaart.

De hoog­te van de kaart is ook a han­ke­lijk van zijn in­houd. Als er meer con­tent is dan er op de kaart past, ver­schij­nen er au­to­ma­tisch scrol­bal­ken. Als het ven­ster gro­ter wordt, ver­schuift de a beel­ding naar links van de con­tent en wordt die zo ge­schaald dat hij de vol­le­di­ge lin­ker­kant van de kaart be­dekt. Het mees­te werk wordt ge­daan met Flex­box. Voor de ge­he­le lay-out heb je niet meer dan 200 re­gels Css-co­de no­dig.

De­ze work­shop is ge­schikt voor Ed­ge en de mees­te mo­der­ne brow­ser. Als je het e ect in In­ter­net Ex­plo­rer 10 wilt be­kij­ken, moet je wat min- en max-waar­den van de ixed units wij­zi­gen met Au­topre ixer van http://srt.lt/tf1a5b.

1. Be­stands- en map­pen­struc­tuur

Maak eerst een pro­ject­map met twee sub­map­pen, de een voor de CSS en de an­der voor a beel­din­gen. Daar­na maak je een in­dex.html-be­stand dat je in de root van de pro­ject­map op­slaat. In de map CSS komt straks de sty­les­heet main.css. Ver­der moet je nog een a beel­ding in de map ‘ima­ges’ zet­ten die voor het splashs­creen ge­bruikt wordt.

2. De Html-head

Be­gin in het be­stand in­dex.html met het ty­pen van het Ht­ml5-doctype en de Html-ope­ningstag, ge­volgd door de head- en bo­dy-tags, de ti­tel van het do­cu­ment en daar­na me­ta­tags voor de ka­rak­ter­set en de vie­w­port-sca­ling (zo­dat de lay-out er op mo­bie­le ap­pa­ra­ten goed uit­ziet). Daar­na link je naar de sty­les­heet main.css. Op http://srt.lt/ J4f7ex staat een struc­tuur waar­mee je kunt star­ten. <head>

<me­ta http-equiv=”con­tent-ty­pe” con­tent=”text/html; char­set=utf-8”/> <tit­le>flex­box Lay­out Tu­to­ri­al</tit­le> <me­ta na­me=”vie­w­port” con­tent=” width=de­vi­ce-width,ini­ti­al-sca­le=1“>

<link rel=”sty­les­heet” href=”css/main. css”> </head>

3. Ver­der met de bo­dy

In de bo­dy-tag zet je een aan­tal ele­men­ten. Maak de kaart aan als een ar­ti­cle-ele­ment met daar­in weer de a beel­ding als een asi­de-ele­ment en een sec­ti­on-ele­ment dat de in­houd van het ar­ti­kel zal be­vat­ten. <ar­ti­cle class=”card”> <asi­de class=”car­d__ima­ge-con­tai­ner”> </asi­de> <sec­ti­on class=”car­d__­con­tents”> </sec­ti­on> </ar­ti­cle>

4. Be­gin met de CSS

Open het be­stand main.css. Be­gin met een brow­ser-re­set met be­hulp van sa­ni­ti­ze.css van http:// srt.lt/t9f­ht. Daar­na im­por­teer je de fonts Ro­bo­to en Ro­bo­to-slab van Goog­le (fonts.goog­le.com). @im­port url(‘http://srt.lt/q6p0­ny’); @im­port url(‘http://srt.lt/b4ty7’); *, *::be­fo­re, *::af­ter {

box-si­zing: bor­der-box; }

5. Fullscreen ach­ter­gron­da beel­ding

Door­dat de bo­dy-tag als ach­ter­grond wordt op­ge­maakt, heb je geen con­tai­ners no­dig. Voor het ma­ken van de lay-out gebruik je meer­de­re ach­ter­gron­da beel­din­gen en Flex­box. Im­por­teer het font en wat an­de­re ba­sa­le op­maak­ei­gen­schap­pen. Po­si­ti­o­neer de ach­ter­grond, stel de groot­te er­van in en gebruik ‘cen­ter’ en ‘co­ver’ als ei­gen­schap­pen. bo­dy { dis­play: flex; align-items: cen­ter; jus­ti­fy-con­tent: cen­ter; min-height: 100vh; back­ground-ima­ge: li­near-gra­dient(rg­ba(0,0,0,0.8), rg­ba(0,0,0,0.6)), url(‘../ima­ges/splash.jpg’)

}

6. Blen­ding en @sup­ports

Met de ei­gen­schap back­ground-blend-mo­de pas je een an­der ver­loop toe, dat je mengt met de ach­ter­gron­da beel­ding. Om­dat Ed­ge geen blen­ding on­der­steunt, zorg je er met een truc voor dat de brow­ser niet al­leen een don­ke­re over­gang als ach­ter­grond krijgt. @sup­ports(back­ground-blend-mo­de: mul­ti­ply) { bo­dy {

back­ground-ima­ge: li­near-gra­dient (#4A4A4A, #212121), url(‘../ima­ges/

splash.jpg’); back­ground-blend-mo­de: mul­ti­ply; } }

7. Maak de kaart op

Om­dat de kaart zich aan de vie­w­port moet aan­pas­sen, gebruik je voor de op­maak er­van ook een lex­con­tai­ner. Stel een maxi­ma­le breed­te en een mi­ni­ma­le hoog­te in, sa­men met wat ba­sa­le cos­me­ti­sche ei­gen­schap­pen. Om­dat de kaart (nog) geen con­tent heeft, ver­schijnt er niets op het scherm. .card { dis­play: flex; flex-di­rec­ti­on: co­lumn; max-width: 62rem; min-height: 75vh; back­ground-co­lor: whi­te; box-sha­dow: 0 2px 4px rg­ba(0, 0, 0, 0.5); }

8. In­houd en struc­tuur van de kaart

Ver­vol­gens voeg je de a beel­ding aan de kaart toe en maak je de struc­tuur voor de in­houd van de kaart in HTML. Die be­staat uit een he­a­der, bo­dy en foo­ter. Splits de con­tent in die drie de­len, zo­dat je de voet­tekst al­tijd on­der in de kaart kunt plaat­sen. Voeg ook wat con­tent aan die nieu­we ele­men­ten toe. <asi­de class=”car­d__ima­ge-con­tai­ner”>

<img class=”car­d__ima­ge” src=”ima­ges/ splash.jpg”> </asi­de> <sec­ti­on class=”car­d__­con­tents”>

<he­a­der class=”car­d__he­a­der”><h1>... </h1></he­a­der> <sec­ti­on class=”car­d__­bo­dy”>...</sec­ti­on> <foo­ter class=”car­d__­foo­ter”>...</foo­ter> </sec­ti­on>

9. Flex de kaart-con­tent

Om­dat de in­houd van de kaart – he­a­der, foo­ter en bo­dy – al­tijd in de­zelf­de volg­or­de bo­ven el­kaar staan, veran­der je de as van de lex-con­tai­ner en gebruik je daar­na de short­hand ‘ lex:’ om de bo­dy gro­ter en klei­ner te la­ten wor­den en er­voor te zor­gen dat de he­a­der en foo­ter niet meer ruim­te in­ne­men dan ze no­dig heb­ben. .car­d__­con­tents { dis­play: flex; flex-di­rec­ti­on: co­lumn; } .car­d__he­a­der, .car­d__­foo­ter {

flex: 0 0 au­to; } .car­d__­bo­dy {

flex: 1 1 au­to; }

10. Maak de a beel­ding van de kaart op

Als de con­tai­ner de in­houd over­schrijdt, maak je de a beel­ding on­zicht­baar en stop je de se­lec­tie. Dan pas je met de ei­gen­schap ‘co­ver’ de a beel­ding op de con­tai­ner van de kaart toe om de con­tai­ner te vul­len. .car­d__ima­ge-con­tai­ner { max-height: 15rem; back­ground: url(‘../ima­ges/splash.jpg’) no-re­peat cen­ter cen­ter/co­ver; } .car­d__ima­ge { opa­ci­ty: 0; poin­ter-events: no­ne; }

11. Beet­je op­rui­men

Voeg een mar­ge bo­ven­aan de foo­ter van de kaart toe en lijn de in­houd daar­van rechts uit. Om­dat het h1-ele­ment ge­bruikt wordt, ver­wij­der je daar­na de mar­ge die au­to­ma­tisch bo­ven­aan de ti­tel wordt toe­ge­voegd. .car­d__­foo­ter { mar­gin-top: 2rem; text-align: right; } .car­d__­tit­le {

mar­gin-top: 0; } .car­d__­con­tents {

pad­ding: 2rem; }

12. Veran­der de rich­ting met me­diaquery’s

Je lay-out werkt goed voor klei­ne scher­men, maar ge­bruikt de be­schik­ba­re ruim­te op gro­te­re scher­men nog niet zo goed. Om dat te ver­be­te­ren, veran­der je de rich­ting van de as met een me­diaquery. Om­dat het scherm nu gro­ter is, kun je het je ver­oor­lo­ven de mi­ni­ma­le hoog­te klei­ner te ma­ken. @me­dia on­ly screen and (min-width: 53rem) { .card { flex-di­rec­ti­on: row; min-height: 60vh; } }

13. Voor­gaan­de max-height op­he fen

Nu de in­houd van de kaart op gro­te­re scher­men over de ho­ri­zon­ta­le as ver­deeld is, be­dekt de af­beel­ding de vol­le­di­ge ruim­te die in de ko­lom be­schik­baar is niet meer. Dat komt door de ei­gen­schap ‘max-height’ die je eer­der hebt in­ge­steld. Die moet je in de me­diaquery nu op­he en. @me­dia on­ly screen and (min-width: 53rem) { .car­d__ima­ge-con­tai­ner {

max-height: in­herit; } }

14. Vol­le­di­ge con­tro­le

Mo­men­teel han­de­len de ver­schil­len­de brow­sers het split­sen van de in­houd van de kaart ver­schil­lend (en au­to­ma­tisch) af. Om een vol­le­di­ge con­tro­le over de lay-out te krij­gen, spe­ci iceer je hoe

groot of klein de kaart mag wor­den en stel je een paar ba­sis­ei­gen­schap­pen in. Bin­nen de me­diaquery laat je de in­houd zo­veel ruim­te in ne­men als no­dig is, ter­wijl je de a beel­ding dan klei­ner maakt. .car­d__ima­ge-con­tai­ner { flex: 0 1 45%; max-height: in­herit; } .car­d__­con­tents { flex: 1 0 55%; pad­ding: 3rem; }

15. Ti­tel op­ma­ken

Gebruik een twee­de let­ter­ty­pe voor de ti­tel en maak die veel gro­ter om een dui­de­lijk ver­schil tus­sen de ti­tel en de bo­dy­tekst te krij­gen. Om­dat er rem-een­he­den voor de font­groot­te ge­bruikt wor­den, is die al­tijd re­la­tief ten op­zich­te van de ba­sis let­ter­groot­te. Zo­als je ziet, heeft de waar­de li­ne­height geen maat­een­heid no­dig. h1 { font-fa­mi­ly: ‘Ro­bo­to Slab’, se­rif; font-weight: 700; font-si­ze: 2.25rem; li­ne-height: 1.3333; }

16. HTML voor so­ci­a­le­me­diak­nop­pen

Maak een link­ele­ment voor elk van de so­ci­a­le pic­to­gram­men en gebruik het i-ele­ment om de Fa­cebook-, Twit­ter- of Pin­trest-si­te in een nieuw tab­blad te ope­nen wan­neer er op een pic­to­gram ge­klikt wordt. Zet de so­ci­a­le­me­diak­nop­pen in de voet­tekst van de in­houd van de kaart. Je kunt daar heel mak­ke­lijk sha­re-knop­pen van ma­ken, maar nu maak je er er links naar je so­ci­a­le pro ie­len mee. <a tar­get=”_blank” href=”... ” class=”so­ci­al-but­ton--twit­ter”>

<i class=”icon--twit­ter”></i> </a>

17. Im­por­teer een pic­to­gram­men­let­ter­ty­pe

Ver­vol­gens im­por­teer je Font Aweso­me van een CDN (http://srt. lt/p2b4) en maak je een klas­se voor elk pic­to­gram. Veran­der el­ke el­ke so­ci­a­le­me­diak­nop in een lex-con­tai­ner, zo­dat je het pic­to­gram mak­ke­lijk op de knop kunt cen­tre­ren. Je kunt de pic­to­gram­men ook down­lo­a­den en lo­kaal im­por­te­ren. Daar voor­kom je cross-ori­gin-pro­ble­men mee. @im­port url(‘http://srt.lt/p2b4’); [class^=”icon--”] { font-fa­mi­ly: ‘Fon­ta­weso­me’; font-sty­le: nor­mal; li­ne-height: 1; } [class^=”so­ci­al-but­ton”] { dis­play: in­li­ne-flex; mar­gin-right: 0.1rem; }

18. Maak elk pic­to­gram

Het pic­to­gram­men­let­ter­ty­pe Font Aweso­me is geim­por­teerd. Maak nu elk pic­to­gram door een uni­co­de-waar­de als de in­houd van het pseu­do-ele­ment ‘be­fo­re’ in te stel­len. Je vindt de no­di­ge uni­co­de-waar­den op de Font Aweso­me Che­ats­heet op http://srt.lt/gfxow. .icon--twit­ter::be­fo­re {

con­tent: ‘\f099’; } .icon--fa­cebook::be­fo­re {

con­tent: ‘\f09a’; } .icon--pin­trest::be­fo­re {

con­tent: ‘\f231’; }

19. Maak de so­ci­a­le­me­diak­nop­pen

Nu je de juis­te pic­to­gram­men voor Fa­cebook, Twit­ter en Pin­trest hebt, maak je de ba­sis­op­maak voor el­ke knop. Net als eer­der gebruik je de Css3-se­lec­tor [at­tri­bu­te^=va­lue]. Daar­mee vind je al­le ele­men­ten die met een be­paal­de string be­gin­nen en kun­nen je daar klas­sen aan toe­ken­nen. Daar­na moet je wat meer ei­gen­schap­pen voor de so­ci­a­le­me­diak­nop­pen in­stel­len. [class^=”so­ci­al-but­ton”] { dis­play: in­li­ne-flex; align-items: cen­ter; jus­ti­fy-con­tent: cen­ter; width: 3rem; height: 3rem; font-si­ze: 1.4rem; bor­der-ra­di­us: 50%; text-de­co­ra­ti­on: no­ne; }

20. Geef de knop­pen een kleur

Het eni­ge wat nog aan de knop­pen ont­breekt, is kleur. Maak voor el­ke knop een klas­se en geef die de ach­ter­grond­kleur van het be­tre en­de so­ci­a­le­me­di­a­net­werk. Gebruik de Co­de­pen http://srt.lt/ obdd1 om de juis­te kleu­ren te krij­gen. .so­ci­al-but­ton--twit­ter {

back­ground-co­lor: #32b9e7; } .so­ci­al-but­ton--fa­cebook {

back­ground-co­lor: #4b70ab; } .so­ci­al-but­ton--pin­trest {

back­ground-co­lor: #d63533; }

21. Tot slot

Als laat­ste maak je de pic­to­gram­men op de knop­pen wit en voeg je een tran­si­tie voor de ach­ter­grond­kleur op de so­ci­a­le­me­diak­nop­pen toe. Stel daar ook een iets don­ker­de­re ach­ter­grond­kleur voor in, voor als je er met de muis over be­weegt. Ook daar kun je Co­de­pen (http://srt.lt/obdd1) als re­fe­ren­tie voor ge­brui­ken. [class^=”so­ci­al-but­ton”] { co­lor: whi­te; tran­si­ti­on: back­ground-co­lor 150ms ea­se-in-out; } .so­ci­al-but­ton--twit­ter:hover {

back­ground-co­lor: #2a9dc4; }

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.