Voor een hobby webshop project zit ik erover te denken om voor het eerst gebruik te gaan maken van het Bootstrap v3 grid systeem.
Tot op heden bouwde ik m'n websites volgens het 960 grid systeem en maakte ik gebruik van een blank thema. Van daaruit ging ik dan de responsive layout opbouwen met behulp van CSS media queries. In mijn ogen teveel overbodig werk dat enkele systemen als Bootstrap al voor mij doen?
Nu ben ik mij aan het verdiepen in het Bootstrap v3 grid systeem en wat mij wel aanspreekt is de manier waarop dit grid systeem is opgebouwd, namelijk percentages in plaats van px. Dit thema is out of the box al responsive (zie demo: http://magentoboilerplate.webcomm.com.au/). Dit geeft mij de mogelijkheid een website in 1170px, 970px, 750px, en full width te tonen.
Het Magento Boilerplate thema maakt gebruik van dit grid systeem. Het probleem is echter dat ik de gutter afstanden te groot vindt tussen de columns (15px aan elke zijde, dus 30px in totaal). Voor de website die ik heb ontworpen zijn deze gutter afstanden te groot. Een gutter van 20px in totaal past beter bij het ontwerp dat ik voor ogen heb (klinkt als een klein verschil maar 30px doet in dit specifieke geval afbreuk aan het ontwerp).
Zijn deze gutter afstanden makkelijk aan te passen? Is het niet meer dan het aanpassen van de left en right margin voor de columns of moet ik dit dan ook per media query gaan doorberekenen in de percentages voor elke column?
Klik hier voor een linkje naar de css file op github van het Magento Boilerplate thema (vanaf regel 1176)
De verwarring bij mij ontstaat bij de percentages die in die css file zijn gedefinieerd. Als ik in totaal 10px van de padding bij een block afhaal zou ik die 10px normaal aan de column breedte toekennen. Nu kan dit echter niet zonder alle percentages te herberekenen?
Denk ik nu te moeilijk?
Tot op heden bouwde ik m'n websites volgens het 960 grid systeem en maakte ik gebruik van een blank thema. Van daaruit ging ik dan de responsive layout opbouwen met behulp van CSS media queries. In mijn ogen teveel overbodig werk dat enkele systemen als Bootstrap al voor mij doen?
Nu ben ik mij aan het verdiepen in het Bootstrap v3 grid systeem en wat mij wel aanspreekt is de manier waarop dit grid systeem is opgebouwd, namelijk percentages in plaats van px. Dit thema is out of the box al responsive (zie demo: http://magentoboilerplate.webcomm.com.au/). Dit geeft mij de mogelijkheid een website in 1170px, 970px, 750px, en full width te tonen.
Het Magento Boilerplate thema maakt gebruik van dit grid systeem. Het probleem is echter dat ik de gutter afstanden te groot vindt tussen de columns (15px aan elke zijde, dus 30px in totaal). Voor de website die ik heb ontworpen zijn deze gutter afstanden te groot. Een gutter van 20px in totaal past beter bij het ontwerp dat ik voor ogen heb (klinkt als een klein verschil maar 30px doet in dit specifieke geval afbreuk aan het ontwerp).
Zijn deze gutter afstanden makkelijk aan te passen? Is het niet meer dan het aanpassen van de left en right margin voor de columns of moet ik dit dan ook per media query gaan doorberekenen in de percentages voor elke column?
Klik hier voor een linkje naar de css file op github van het Magento Boilerplate thema (vanaf regel 1176)
De verwarring bij mij ontstaat bij de percentages die in die css file zijn gedefinieerd. Als ik in totaal 10px van de padding bij een block afhaal zou ik die 10px normaal aan de column breedte toekennen. Nu kan dit echter niet zonder alle percentages te herberekenen?
Denk ik nu te moeilijk?
:strip_icc():strip_exif()/u/86599/crop681cb5088171b_cropped.jpg?f=community)
:strip_exif()/u/140080/103314.gif?f=community)