Voor grafisch ontwerpers: De BNF Bootstrap stramienen

Het grafisch ontwerpen van een goede website die aan alle moderne eisen voldoet is niet eenvoudig. Om in ieder geval meteen goed te beginnen hebben wij van BrandNewFresh ‘De BNF Bootstrap stramienen’ gemaakt.

Voor grafisch ontwerpers is het namelijk niet eenvoudig om een goed stramien te vinden dat als basis kan dienen om een website te ontwerpen. Welke breedte neem je als uitgangspunt voor de breedte van de nieuwe Bootstrap website? Wat is de breedte van een 1/3 kolom op een website die met Bootstrap is gemaakt? Dat los je in een keer op met deze stramienen.

Wij van BrandNewFresh hebben we een drietal voorbeelden gemaakt van kolommen in verschillende Bootstrap breedtes.

  1. Bootstrap Stramien 1 is een overzicht van alle standaard kolombreedtes van Bootstrap
  2. Bootstrap Stramien 2 is een overzicht van de meest gebruikte kolombreedtes van Bootstrap
  3. Bootstrap Stramien 3 is een stramien met 12 kolommen met een 1/12 kolombreedtes van Bootstrap

Van alle stramienen hebben we een .eps, een .pdf en vaak ook een .psd file gemaakt. Bovendien kun je ook van alle stramienen een responsive online voorbeeld bekijken om precies te kunnen zien wat Bootstrap (met standaard instellingen) doet met de breedte van kolommen in verschillende browser breedtes. De breedtes worden automatisch in het aantal pixels getoond in elke kolommen.

Klik hier als u meer informatie wilt over het omzetten van uw grafisch ontwerp naar een ‘Pixel Perfect’ responsive website

Vooral Bootstrap Stramien 3 is erg handig omdat daar alle 12 Bootstrap kolommen inclusief padding tot op halve pixel nauwkeurig zijn neergezet en voorzien van hulplijnen.

Door het .eps (Illustrator) bestand of .psd (Photoshop) bestand te downloaden en de inhoud te verwijderen, hou je een prachtig grid van verticale hulplijnen over waarmee je eenvoudig je nieuwe website in de standaard Bootstrap breedtes kan ontwerpen.