HT17 - DA156A - CSS, Layout 2
- 1. CSS – Layout (2) Tips & trix, samt nya tekniker
- 2. Dagens föreläsning • Tips och trix kring CSS • CSS reset • Repetition av arv (och viktighet av CSS-regler) • ”Nya” CSS 3-egenskaper • CSS-animationer • Layout med Flexbox • Layout med Grids • Demos! =)
- 3. Förinställda CSS-regler för webbläsaren
- 4. Förinställda CSS-regler för webbläsaren
- 5. Att skriva över webbläsarens evenskaper?
- 6. Men detta är ju jobbigt – hur vet jag alla webbläsarens förinställda CSS-egenskaper? … och hur ändrar jag dessa?
- 10. CSS reset Fördelar • Full kontroll över sin CSS-kod • Tar bort ev. skillnader mellan webbläsare Nackdelar • Mer kod att skriva, då vi ej använder den ”färdiga” koden webbläsaren • Man måste tänka på att formge alla element som ska formges. • <strong> är nu inte fetstilt, t.ex. • Listor har inga nummer/punkter • Etc.
- 11. Att hålla koll på vilka egenskaper som gäller Inte alltid så enkelt som man tror!
- 12. Ju mer specifik en seletor är, ju högre prioriteras den Tumregel
- 22. Demo Rundade hörn, skugga, animationer, etc. + CSS reset
- 25. Vad är flexbox? • Ett sätt att positionera ut element på en webbsida • Ett alternativ till att använda t.ex. float för att bygga layouter • Flexbox utgår från att positionerna ut barn-element i en ”container” på olika sätt.
- 26. Om Flexbox Fördelar • Enkelt att anpassa elements storlek efter dess innehåll • Enkelt att centrera element (vertikalt & horisontellt) • Enkelt att sätta i vilken ordning som element ska visas • Dåligt stöd för äldre webbläsare, även ”nyare” versioner av IE (IE 11 har stöd) • Svårt att bygga ”bra” layouter, mer för att strukturera innehåll • Nackdelar
- 28. Vårt upplägg
- 29. #container flex-direction • flex-direction: row; (standard) • flex-direction: row-reverse;
- 31. #container flex-wrap • flex-wrap: nowrap; (standard) – Allt på samma rad • flex-wrap: wrap; • flex-wrap: wrap-reverse;
- 32. #container justify-content • justify-content: flex-start; • justify-content: flex-end; • justify-content: center;
- 33. #container justify-content • justify-content: space-between; • justify-content: space-around;
- 34. #container align-items • align-items: flex-start; (standard) • align-items: flex-end; • align-items: center;
- 35. #container align-items • align-items: baseline; • align-items: stretch;
- 36. #container align-content • Används bara vid flera rader .container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- 37. Hur man positionerar .item https://css-tricks.com/snippets/css/a-guide-to-flexbox/