Bootstrap
For fun and profit
Jag är
-Marcus
Vilka är ni?
Jag tror att ni kan
- Html
- CSS
- Javascript
Html
- HyperText Markup Language
- Dokumentets struktur & innehåll
CSS
- Cascading Style Sheets
- Dokumentets utseende & presentation
- Animationer
Javascript
- Beteenden
- Animationer
- Interaktivitet
Praktiskt Exempel!
(inte med i presentationen)
Underbart!
Men vad är Bootstrap?
Bootstrap är ett ramverk för
- Html
- CSS
- Javascript
- Mobile first
Kort historik
- Började som internt projekt på Twitter
- Första versionen släpptes augusti 2010
- Populäraste projektet på Github sedan 2012
Bootstrap Html
- Förslag på grundläggande semantisk html-struktur
- Html-komponenter
- Html-struktur har responsivitet i åtanke
Bootstrap CSS
- No style left behind
- Komponentbaserad
- Glyph-ikoner
- Avancerat grid-system
Bootstrap Javascript
- Animationer
- Interaktioner
- Bildspel
Hur kan vi använda det?
Finns ett antal olika sätt
- Ladda ner standardvarianten
- Sätta upp utvecklingsvarianten
- Sätta ihop din egen variant via deras nedladdningssida
Scenario 1
Ni behöver slänga ihop ett admininterface men har inte tid/pengar att lägga på design
Scenario 2
Uppdragets huvudfokus är inte design/utseende men ni vill ändå presentera något som ser professionellt ut
Scenario 3
Det behöver göras en snabb interaktiv prototyp som antingen skall visas upp internt eller för kund
Scenario 4
Ni har haft Bootstrap i åtanke från början och har låtit det genomsyra hela processen
Vad betyder det?
- Tänk komponentbaserat redan i wireframes/design
- Designa med en grid i åtanke
- Behåll komponenttänket även i er egen html/css/js
- Ta fram en style guide i html
- Lär er Bootstraps grundläggande design & layoutspråk - inte bara utvecklare