Twitterin kehittämä Bootstrap ja ZURB:n kehittämä Foundation ovat responsiivisen web-suunnittelun ohjelmistoalustoja. Niiden välillä on merkittäviä eroja käyttöliittymäelementtien, mittayksilöiden, ruudukkojen, mobiilisuunnittelun ja yhteisön osalta.

ZURB ja Twitter ovat nimenneet ohjelmistoalustansa kuvaavilla nimillä. Bootstap tarjoaa kaikki mahdolliset käyttöliittymäelementit mitä projekteissa voidaan tarvita. Foundation puolestaan tarjoaa pelkän rungon.

Käyttöliittymäelementit

Foundation tarjoaa hyvin vähän käyttöliittymäelementtejä. ZURB:n tarkoituksena ei ollut, että koko web käyttäisi samoja esimääriteltyjä käyttöliittymäelementtejä. Bootstap tarjoaa käytännössä kaikki mahdolliset käyttöliittymäelementit

REM:it vs pikselit

Foundation käyttää REM:jä ja Bootstrap pikseleitä.

Pikseleiden käyttäminen tarkoittaa, että elementin korkeus, leveys, marginaali ja täyte joudutaan määrittelemään jokaiselle laitetyypille. Foundation 5 käyttää REM:iä EM:n sijaan, jotta vältetään EM:n periytymisongelma.

Joskus EM:n käyttäminen on hyödyllistä. Oletetaan fontin koon olevan 80%, kaikki EM:iä käyttämien elementtien koko kutistuu 20%.

Foundation antaa mahdollisuuden konvertoida pikseleitä REM:ksi.

Joustava ja / tai esimääritelty ruudukko

Molempien ohjelmistoalustojen ruudukot ovat aika samanlaisia, tarjoavat oletusruudukon, mutta antavat mahdollisuuden räätälöidä Sass (Foundation) tai Less (Bootstrap).

Bootstrapin oletusruudukko on sidottu raja-arvoihin, mikä tarkoittaa kiinteän leveyden vähenemistä näyttöalueen (viewport) saavuttaessa huippunsa. Käyttämällä luokkaa .row fluid leveys määritellään prosenteissa, jolloin toimii kuten Foundationin ruudukko.

Foundationilla on 3 ruudukon luokkaa: small, medium ja large. Bootstrapilla on 4: small, medium, large ja extra large. Sarakkeita voidaan räätälöimällä yhdistämällä luokkien nimiä.

Mobiili ensin vs myös mobiili

Foundation kannustaa mobiili ensin –suunnitteluun yksinkertaisella säännöllä, kaikki mikä ei ole erikseen määritelty, katsotaan kuuluvan mobiililaitteille. Jos halutaan tabletille tai pc:lle eri ulkoasun, ne pitää määritellä erikseen ko. laitetyypeille.

Bootstrap tekee asiat toisin. Jos halutaan asiat mobiilille, pitää yksilöidä sille mediakysely. Jos jostain syystä unohdetaan mobiili ensin –suunnittelu, mobiilikäyttäjät näkevät työasemille tarkoitetun suunnittelun. Suunnittelemalla web-sivusto ensin työasemille saattaa tulla ongelmia sovittaa sisältö pienelle näytölle. Mobiili ensin –suunnittelu auttaa keskittymään käyttäjien kannalta olennaiseen sisältöön.

Yhteisö

Bootstrapissa on hyvää suuri yhteisö. Se on suuri ja kaikkialta löytyy Bootstrapille tehtyjä komponentteja.

Foundationia käytettäessä joudutaan likaamaan kädet. Melkein kaikki ratkaisut ovat Bootstrapille, joten joudutaan rakentamaan ne itse.