Ответы пользователя по тегу Вёрстка
  • Как правильно верстать письма для рассылки (пример или шаблон)?

    LucasKane
    @LucasKane
    Front-end Developer
    Можно так же воспользоваться фреймворком, например - https://mjml.io/
    Польза в том, что разметка проще чем теги таблицы, плюс автоматическое добавление костылей под разные сервисы.
    Ответ написан
    6 комментариев
  • Подготовка к верстке, чеклист. Что еще?

    LucasKane
    @LucasKane
    Front-end Developer
    Господи пусть такие дизайнеры плодятся и размножаются!

    А теперь по сути.

    1) Названия лучше давать на английском.
    2) Не злоупотреблять количеством шрифтов - вполне хватит двух или трех (Шрифт для текст, шрифт для заголовков, хитросделанный шрифт для подписи под лого или других декораций)
    3) Хоть немного быть в курсе того, что можно сверстать, а что нет - например цвет заголовков градиентом или картинкой - можно реализовать на css, но работать это будет разве что в Chrome.
    4) Не обрезать картинки делая их круглыми - используйте маски перекрытия или как то так, в верстке нет кругов только прямоугольники и квадрат как частный случай прямоугольника, но визуально сделать картинку круглой и скажем с бордером можно стилями - при этом исходник картинки будет квадратом или прямоугольником.
    5) Используя тени делать их отдельно от изображений.
    6) Элементы форм рисовать без фанатизма и стараться оставлять их такими какие отрисовываются браузером, в основном это касается чекбоксов/радиокнопок выпадающих списков, их можно стилизовать, но до сих пор это такие костыли и гемор, что аж горит, а потом горит у бекэндщиков, так как им все это реализовывать через задницу приходится.
    7) Прежде чем нарисовать какую то супермега крутую красивую вещицу, спросить верстальщика (если есть возможность) сможет он это реализовать.
    Ответ написан
    4 комментария
  • Хочу собрать нормальный gulpfile.js, какие плагины вы используете?

    LucasKane
    @LucasKane
    Front-end Developer
    Вот еще вариант
    "devDependencies": {
            "gulp": "^3.9.1",
            "gulp-bower": "^0.0.13",
            "gulp-postcss": "^6.0.0",
            "gulp-clean-css": "^2.0.7",
            "gulp-rigger": "^0.5.8",
            "gulp-sass": "^2.3.1",
            "gulp-watch": "^4.3.5",
            "gulp-filter": "^4.0.0",
            "gulp-csscomb": "^3.0.8",
            "gulp-plumber": "^1.1.0",
            "gulp-util": "^3.0.8",
            "gulp-zip": "^4.0.0",
            "gulp-posthtml": "^2.0.0",
            "autoprefixer": "^6.0.0",
            "browser-sync": "^2.12.5",
            "rimraf": "^2.5.2",
            "eslint": "^3.9.1",
            "eslint-config-yandex": "^1.0.6",
            "posthtml-attrs-sorter": "^1.1.0"
        }
    Ответ написан
    Комментировать
  • Можно ли назвать данную верстку адаптивной?

    LucasKane
    @LucasKane
    Front-end Developer
    c14c65abb8a244cd9ac3a2f6acbfbf86.png
    И после исправления:
    050188851b7948189362ea3c25ccfcd7.png
    Чуть чуть подправить.

    А Проверить еще можно переполнением контента, текст скажем не две три строки, а 5-6. Еще можно в браузере размерами шрифта поиграть, если конечно шрифт не px.
    Ответ написан
  • Как задать размер шрифта на весь екран?

    LucasKane
    @LucasKane
    Front-end Developer
    В CSS для шрифта указать letter-spacing в em.
    Ответ написан
    Комментировать
  • Как правильно сверстать такой блок?

    LucasKane
    @LucasKane
    Front-end Developer
    Ответ написан
    Комментировать