Foundation
Foundation är ett responsivt CSS-ramverk som innehåller bland annat ett gridsystem, navigationskomponenter, formulär och knappar. Ramverket bygger på ett mobile first-tänk och ger utvecklaren möjlighet att anpassa både layout och utseende efter egna behov.
Foundation erbjuder färdiga komponenter, men ger också stort utrymme för egen styling och anpassning.
Läs mer på Foundations officiella webbplats .
Fördelar och nackdelar
Fördelar
- Flexibelt gridsystem: Enkelt att skapa responsiva layouter med hjälp av rader, kolumner och brytpunkter.
- Stor frihet att anpassa: Ramverket ger en bra grund för den som vill skapa en egen design och ha större kontroll över utseendet.
- Responsiva tabeller: Stack-funktionen är en riktig favorit! Den gör att tabellens innehåll staplas på mindre skärmar i stället för att kräva horisontell scrollning. En enkel och smidig lösning som faktiskt får mig att vilja använda Foundation igen.
Nackdelar
- Begränsad färdig styling: Jämfört med t.ex. Bootstrap upplevde jag att Foundation erbjöd betydligt färre enkla möjligheter att styla komponenterna direkt med klasser.
- Stort behov av egen CSS: Jag behövde själv anpassa bland annat navigation, färger och andra detaljer för att få det utseende jag ville ha.
- Mindre smidigt för den här uppgiften: Eftersom målet var att använda ramverkets egna stylingmöjligheter blev det frustrerande att behöva komplettera med så mycket egen CSS.
Utvärdering av Foundation
| Funktion | Betyg | Svårighetsgrad | Kommentar |
|---|---|---|---|
| Navigation | 3/5 | Medel | Fungerar responsivt, men krävde en hel del egen anpassning. |
| Gridsystem | 5/5 | Medel | Flexibelt och användbart när man förstår strukturen. |
| Callout | 4/5 | Lätt | Enkelt sätt att rama in innehåll, men ganska begränsat utseende. |
| Tabeller | 5/5 | Lätt | Stack-funktionen gör att tabellen staplas på mindre skärmar - mycket smidigt. |
| Styling | 2/5 | Svår | Saknade enkla hjälpklasser och fick ofta skriva egen CSS. |