dudeonthehorse / kilogram

Email Development Framework
504 stars 94 forks source link

Предлагаю в исходное письмо добавить ещё варианты колонок #44

Closed LanKing closed 7 years ago

LanKing commented 7 years ago

А именно: 2 1 и 1 2

2 1 интересно для прехедера: image

LanKing commented 7 years ago

На всякий случай, реализация того о чём сказано выше для 2 1

columns.less:

/* Columns CSS */

.one-column, .two-columns, .three-columns, .four-columns, .two-plus-one-columns {
    text-align: center;
    font-size: 0;
}
.two-columns, .three-columns, .four-columns, .two-plus-one-columns {
    /* padding-left: 10px;
    padding-right: 10px;
    */
}
.column, .column-small {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    text-align: left;
}

.one-column .column {
    max-width: 600px;
}
.two-columns .column {
    max-width: 300px;
}
.three-columns .column {
    max-width: 193px;
}
.four-columns .column {
    max-width: 300px;
}

.two-plus-one-columns .column{
    max-width: 450px;
}

.two-plus-one-columns .column-small{
    max-width: 150px;
}

media.less:

@media only screen and (max-width: 400px) {
    .two-columns .column {
        max-width: 100% !important;
    }
    .three-columns .column {
        max-width: 49.9% !important;
    }
    .four-columns .column {
        max-width: 100% !important;
    }

    .two-plus-one-columns .column{
        max-width: 74.9% !important;
    }

    .two-plus-one-columns .column-small{
        max-width: 25% !important;
    }

}
@media screen and (min-width: 401px) and (max-width: 635px) {
    .two-columns .column {
        max-width: 50% !important;
    }
    .three-columns .column {
        max-width: 33.33% !important;
    }
    .four-columns .column {
        max-width: 100% !important;
    }

    .two-plus-one-columns .column{
        max-width: 66.66% !important;
    }

    .two-plus-one-columns .column-small{
        max-width: 33.33% !important;
    }
}

html:

        <tr>
            <td class="two-plus-one-columns">
                <!--[if (gte mso 9)|(IE)]>
                <table width="100%">
                <tr>
                <td width="75%" valign="top">
                <![endif]-->
                <div class="column">
                        <table width="100%" cellpadding="10">
                            <tr>
                                <td>
                                    <p>column1</p>
                                </td>
                            </tr>
                        </table>

                </div>
                <!--[if (gte mso 9)|(IE)]>
                </td><td width="25%" valign="top">
                <![endif]-->
                <div class="column-small">
                        <table width="100%" cellpadding="10">
                            <tr>
                                <td>
                                    <p>column2</p>
                                </td>
                            </tr>
                        </table>
                </div>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
dudeonthehorse commented 7 years ago

Готовлю новый шаблон

LanKing commented 7 years ago

Интересно посмотреть. Я код запилил из вашего 2-колоночного. Спасибо!

LanKing commented 7 years ago

Да и вообще, спасибо, мужчина, за отличное решение! Я про килограм.

dudeonthehorse commented 7 years ago

Это - всегда пожалуйста