You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been working on a Photoshop starter template for Bootstrap 4 with column guides, and I've noticed that not all column widths are divisible by twelve, which results in oddly sized column widths.
In alpha 2 this only affects "Large":
940px - 360px (gutter) / 12 = 48.33333...px
As a result, some columns are rendered with 48px width and others with 49px width.
This makes working with graphic tools harder and more cumbersome. For example, Photoshop has a "Guide Layout" functionality that would work well if columns were evenly sized:
Is there a good reason for this that I am unaware of? I initially assumed this was a trade-off related to using rem, but now that this was ditched, I don't quite understand why the containers are not made so they divide evenly.
PS: I've published my Photoshop template here, if you want to take a look. It includes test renderings that I've made in Firefox in order to get the column widths exactly right.
The text was updated successfully, but these errors were encountered:
Thanks @bassjobsen. I've looked at the SCSS and I think I understand why it's done with %-values. However:
or set the width of your large container to 936px
My point is, why isn't this (or 948px) set by default? I'm convinced that 99% of Bootstrap end-users will not customize Bootstrap through recompilation of the SCSS source, so why not have sane defaults that do not result in half-pixels in the column width?
cvrebert
changed the title
Not all container widths are divisible by twelve
Not all .container widths are divisible by 12
Dec 9, 2015
I've been working on a Photoshop starter template for Bootstrap 4 with column guides, and I've noticed that not all column widths are divisible by twelve, which results in oddly sized column widths.
In alpha 2 this only affects "Large":
940px - 360px (gutter) / 12 = 48.33333...px
As a result, some columns are rendered with
48px
width and others with49px
width.This makes working with graphic tools harder and more cumbersome. For example, Photoshop has a "Guide Layout" functionality that would work well if columns were evenly sized:
Is there a good reason for this that I am unaware of? I initially assumed this was a trade-off related to using rem, but now that this was ditched, I don't quite understand why the containers are not made so they divide evenly.
PS: I've published my Photoshop template here, if you want to take a look. It includes test renderings that I've made in Firefox in order to get the column widths exactly right.
The text was updated successfully, but these errors were encountered: