Add n/12 width fractions and add all fraction values

[SjorsO]

This PR adds n/12 fractions to the available width values. They come in handy when making grids with more than 6 columns, or when you want more control over the width of columns. They might also make life easier for people familiar to Bootstrap's 12 column grid when they are trying out Tailwind.

This PR also adds the fractions that were missing because they can be normalized. I assume they were missing because they are technically duplicates (2/4 = 1/2), but I've found it very convenient to have all of them available. Especially when working with the new n/12 fractions, having all fractions available looks nicer, prevents having to do math, and it makes it easier to quickly change around column sizes, for example:

<!-- 
with all fractions available changing the width of two columns
is easy, you only have to change the fraction numerators
-->
<div>
    <div class="w-1/12"></div>
    <div class="w-3/12"></div>
    <div class="w-4/12"></div>
    <div class="w-2/12"></div>
    <div class="w-2/12"></div>
</div>

<!-- 
with only normalized fractions changing the width of two columns is relatively 
difficult, you have to change both the fraction numerators and denominators
-->
<div>
    <div class="w-1/12"></div>
    <div class="w-1/4"></div>
    <div class="w-1/3"></div>
    <div class="w-1/6"></div>
    <div class="w-1/6"></div>
</div>

I've targeted this PR to the "next" branch, if you want it on a different branch instead let me know.

[hacknug]

Plugin territory.

[aparajita]

Yeah, this is the exact reason Tailwind has plugins: so you can extend its built in classes. It's a great idea, and if it really works you should publish it to npm.

[benface]

Personally, I think this deserves to be in the core. The Bootstrap argument is good, and the extra classes probably add less than 1 kb to the generated CSS (non-gzipped). Add PurgeCSS to the mix (which most people should do IMO) and this is a moot point. I think not having to remember when changing 1/6 to 2/6 that 2/6 doesn't exist and it's actually 1/3 is worth this negligible change to the CSS file size.

[aparajita]

Let's see what @adamwathan says.

[hacknug]

I agree with everything @SjorsO exposed (I've done it myself in a few sites) but still would find this more useful as a plugin that would generate widths for an array of column counts. That way the plugin could be used in any project regardless of the number of columns on the design and it would also work for websites with different numbers of columns in different sections/pages.

Looks like there's already a plugin that does what I described. Link in case it helps anyone: https://github.com/buz-zard/tailwind-bootstrap-grid

[adamwathan]

I would be open to adding the */12 variants that aren't duplicates, but don't really want to add values like 2/12, 6/12, etc, even though I agree doing the math is annoying.

Long term I think all of that stuff will be better solved with CSS Grid utilities, just need to wait for IE11 to die.

[benface]

just need to wait for IE11 to die

Just 6 more years!

[SjorsO]

These are the only */12 variants that are not duplicates:

'1/12': '8.33333%',
'5/12': '41.66667%',
'7/12': '58.33333%',
'11/12': '91.66667%',

I don't think adding */12 variants without duplicates is a good idea, there is way too much math involved if you want to use them.

I think the duplicate values are a great addition to Tailwinds defaults. It makes using the width fractions more user friendly, especially for new users (less math, less remembering, no more "huh? oh 2/6 doesn't exist"). It also makes the html markup cleaner and more symmetric (see the example in my first comment). Including duplicate values gives users a choice, if they want they can just choose to use the normalized fractions, purgecss will remove all the duplicate ones they don't use.

Let me know what you think, and i'll change the PR accordingly.

[florianbouvot]

I'm not in favor of adding n/12 fractions to default widths. I prefer to add this settings at projet level (or use a plugin).

Bootstrap users argument seems wrong: we need to help users thinking in fractions instead in columns => docs, tutorial, example ...

[sandren]

I think it would be very helpful to have all */2, */3, */4, */5, */6, */8, and */12 values available by default (even the redundant and whole number values). As @benface suggested elsewhere, the impact on Tailwind's file size would be negligible, but the benefit to developer workflows would be considerable.

For example if one is using an 8 column grid under this new system and have starting values of 2/8, 1/8, and 5/8, they can raise 2/8 to 3/8 and drop 5/8 to 4/8 very quickly. However in the current system they would be changing 1/4 to 3/8 and 5/8 to 1/2. The end result may be the same, but the new system is much faster for rapid prototyping and therefore very much in line with the spirit of the framework. While we have made a deliberate effort to avoid duplication elsewhere, I feel that the gains to productivity make a single exception worthwhile.

I also think it would help with the wider adoption of Tailwind because it makes the switch from other common frameworks much easier. One can continue to use the grid system with which they are already familiar, but without constantly doing quick math or accidentally trying to use classes that don't exist.

[adamwathan]

Changed my mind on this and I'm okay accepting it with all of the combinations added and the x/12 values added as well. Feel free to fix the conflicts and update the test fixtures so the tests pass and I'll merge, or I will add it myself next week if you don't have time. Thanks!

[devcircus]

We’re maintaining the existing widths though, right?

[adamwathan]

Yeah we should keep everything if only to avoid the BC break.

…

On Apr 26, 2019, 4:25 PM -0400, Clayton Stone ***@***.***>, wrote: We’re maintaining the existing widths though, right? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[SjorsO]

@adamwathan I've fixed the conflicts.

Is it documented somewhere how to generate new fixtures? I gave it a try, but they were missing the .example class and they had a bunch of css properties (such as -o-object-position: left bottom) that the old fixtures didn't have.

[adamwathan]

@SjorsO Thanks! We actually don't generate them except as a last resort, updating by hand is safer because if you generate them you can't be sure you didn't create a bug that you are no longer testing for by baking the bug into the test fixture. I'll update the tests though no problem.

Thanks again!

[garygreen]

I know this has already been merged but this is a big 👍 from me.

I've personally wrestled with the tailwind grid system a number of times and it's never quite felt "right" coming from Bootstrap's 12-column grid system. Maybe it's my small brain that struggles to grasp fractions, I don't know, it's just always seemed a bit fiddly. The small sacrifice in file size more than makes up for developer experience. Plus I've finally managed to get PurgeCSS working nicely with Webpack so filesize is no longer an issue 😁