VT2019 - DA355A - CSS Grid & Webbramverk

1. Ramverk för webbutveckling

3. Dagens föreläsning
• Hur har vi arbetat tidigare?
• Hur brukar man arbeta?
• Praktiska exempel på ramverk

4. Nytt projekt, nya möjligheter!

12. Hmm… en ganska lång bit kvar…

14. Sakta men säkert…

16. Sen CSS, JS, och finlir!

19. Kan vi inte vara effektivare?

21. Ramverk – färdig kod att använda

23. De grundläggande tankarna bakom ramverk är
enkla: Samla fungerande kod och gör den
återanvändbar. Passa samtidigt på att presentera
ett enhetligt sätt att skriva kod.
http://computersweden.idg.se/2.2683/1.606077/ramverk-eller-inte-ramverk--det-ar-fragan

24. Fördelar med ramverk
• Utvecklare slipper skriva kod för grundläggande uppgifter själva
• Koden i ett ramverk kan antas vara testad och tämligen felfri
• Det blir enklare att få en struktur för hur kod ska skrivas
• Medlemmar i utvecklarorganisationer och projekt kan enklare
anamma ett enhetligt arbetssätt

25. Exempel på ramverk för
webbdesign

29. Får vi använda koden?
Vilken licens använder sig ramverken av?
Tips: http://choosealicense.com/

31. Dokumentation?
Ett sätt att lära sig hur andras mjukvara fungerar!

35. Hur använder man ett ramverk?

37. Dags att kolla in ramverk!
- Bootstrap
https://getbootstrap.com

42. Vad ingår i Bootstrap?

43. Vad ingår i Bootstrap?
• Layout
• Responsiv layout genom ”grids” (ej samma som CSS grids)
• Grundläggande CSS
• Typografi
• Tabeller
• Figurer
• Bilder
• Etc.
• Komponenter
• Olika visuella / funktionella komponenter så som menyer/knappar/bildspel/etc.
• Hjälpmedel för att skräddarsy sin webbsida

44. What is Grid in web design?

45. What is Grid in web design?
1 2 3 4 5 6 7 8 9 10 11 12
12 Grid

46. What is Grid in web design?
1 2 3 4 5 6 7 8 9 10 11 12
4 Grids x 3 Columns
= 12 Grids
4 Grid 4 Grid 4 Grid

47. Bootstrap Grid
12 Responsive Grid

48. Bootstrap Grid

49. Bootstrap Grid Example
http://bit.ly/bs-agency
How many grids in each box?

50. Bootstrap Grid Example
4 grids x 3 Columns

51. Bootstrap Grid Example

52. Bootstrap Grid Example

53. Bootstrap Grid Example 2
How many grids in each box?

54. Bootstrap Grid Example 2
6 grids x 2 Columns

55. Bootstrap Grid Example 2

56. Bootstrap Grid Example 2

57. Bootstrap Row
1 Row = 12 Grids

58. Bootstrap Row
3 Rows

59. Bootstrap Row Example

60. Bootstrap Row Example

61. Bootstrap Responsive Grid
Columns will stack when responsive

62. Bootstrap Responsive Grid
1 2 3 1
2Columns stack on mobile

63. Bootstrap Grid Workshop
3 Easy Steps:
1. Add container
2. Add row
3. Add columns

64. Låt oss ta en närmre titt! =)
https://getbootstrap.com