mhulse / waffle

Waffle Grid System
1 stars 0 forks source link

Add 24ths #1

Open mhulse opened 9 years ago

mhulse commented 9 years ago

Once I get this 5ths grid figured out, add 24ths:

// 24ths-based units:
[wg-col ~= "1/24"] {
    flex-basis: 1/24 * 100%;
    max-width: 1/24 * 100%;
}
[wg-col ~= "1/12"],
[wg-col ~= "2/24"] {
    flex-basis: 1/12 * 100%;
    max-width: 1/12 * 100%;
}
[wg-col ~= "1/8"],
[wg-col ~= "3/24"] {
    flex-basis: 1/8 * 100%;
    max-width: 1/8 * 100%;
}
[wg-col ~= "1/6"],
[wg-col ~= "4/24"] {
    flex-basis: 1/6 * 100%;
    max-width: 1/6 * 100%;
}
[wg-col ~= "5/24"] {
    flex-basis: 5/24 * 100%;
    max-width: 5/24 * 100%;
}
[wg-col ~= "1/4"],
[wg-col ~= "6/24"] {
    flex-basis: 1/4 * 100%;
    max-width: 1/4 * 100%;
}
[wg-col ~= "7/24"] {
    flex-basis: 7/24 * 100%;
    max-width: 7/24 * 100%;
}
[wg-col ~= "1/3"],
[wg-col ~= "8/24"] {
    flex-basis: 1/3 * 100%;
    max-width: 1/3 * 100%;
}
[wg-col ~= "3/8"],
[wg-col ~= "9/24"] {
    flex-basis: 3/8 * 100%;
    max-width: 3/8 * 100%;
}
[wg-col ~= "5/12"],
[wg-col ~= "10/24"] {
    flex-basis: 5/12 * 100%;
    max-width: 5/12 * 100%;
}
[wg-col ~= "11/24"] {
    flex-basis: 11/24 * 100%;
    max-width: 11/24 * 100%;
}
[wg-col ~= "1/2"],
[wg-col ~= "12/24"] {
    flex-basis: 1/2 * 100%;
    max-width: 1/2 * 100%;
}
[wg-col ~= "13/24"] {
    flex-basis: 13/24 * 100%;
    max-width: 13/24 * 100%;
}
[wg-col ~= "7/12"],
[wg-col ~= "14/24"] {
    flex-basis: 7/12 * 100%;
    max-width: 7/12 * 100%;
}
[wg-col ~= "5/8"] {
    flex-basis: 5/8 * 100%;
    max-width: 5/8 * 100%;
}
[wg-col ~= "5/8"],
[wg-col ~= "15/24"] {
    flex-basis: 5/8 * 100%;
    max-width: 5/8 * 100%;
}
[wg-col ~= "2/3"],
[wg-col ~= "16/24"] {
    flex-basis: 2/3 * 100%;
    max-width: 2/3 * 100%;
}
[wg-col ~= "17/24"] {
    flex-basis: 17/24 * 100%;
    max-width: 17/24 * 100%;
}
[wg-col ~= "3/4"],
[wg-col ~= "18/24"] {
    flex-basis: 3/4 * 100%;
    max-width: 3/4 * 100%;
}
[wg-col ~= "19/24"] {
    flex-basis: 19/24 * 100%;
    max-width: 19/24 * 100%;
}
[wg-col ~= "5/6"],
[wg-col ~= "20/24"] {
    flex-basis: 5/6 * 100%;
    max-width: 5/6 * 100%;
}
[wg-col ~= "7/8"],
[wg-col ~= "21/24"] {
    flex-basis: 7/8 * 100%;
    max-width: 7/8 * 100%;
}
[wg-col ~= "11/12"],
[wg-col ~= "22/24"] {
    flex-basis: 11/12 * 100%;
    max-width: 11/12 * 100%;
}
[wg-col ~= "23/24"] {
    flex-basis: 23/24 * 100%;
    max-width: 23/24 * 100%;
}