Разбор таска по верстке (sass, pug, gulp, bem)

Скрипты и советы | 6 декабря 2018

Уроки CSS на Хабрахабре, habrahabr.ru, CSS

Для Junior’ов, для junior’ов… а то начнут тут… да мы, да это…

Доделал проект(сайт) pug+sass+es6+gulp+BEM. Во время разработки столкнулся со многими трудностями. Эта статья рассчитана на новичков, на тех, кто не знает об отрицательных маржинах, слышали о методологии именования БЭМ, но не пробовали ее, для тех, кто не имеет огромного опыта в разработке. Надеюсь, вам здесь будет интересно. Если же вы читаете это на работе, сидя у 4-ех мониторов и одной рукой пишите код для ИИ, а второй листаете хабр, то я бы хотел у вас услышать конструктивную критику о методах, которые были использованы здесь.

Отрицательные margin и width 110%

Про такой фокус я знаю давно, но на практики применял лишь впервые. В макете было ограничение(wrapper = width: 1170px, красная граница). Справа контент соответствовал ограничению и прилегал к границе, а вот слева картинка вылезала за границу. Сначала это может пугать, но стоит подробней узнать о работе margin-letf: -100px и вы уже знаете, как решить поставленную задачу. К слову, это flex и желтым я отметил границы объектов.

Мы привыкли использовать width, height как 100%, и это понятно, все для адаптива, с помощью width, можно добиться схожего результата как и с отрицательными маржинами. Просто дайте размер потомку больше своего родителя(например, width: 130%)

Читать дальше →
PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм

Современная веб разработка не стоит на месте, и с каждым днем сложность проектов только растет. Постоянно выходят новые...

Подробнее
[Из песочницы] 15 ошибок или советов HTML и CSS

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать...

Подробнее
Каскадные Таблицы Стилей / Вкусный CSS: Sass + Compass

Что такое Haml/Sass? Haml (xHTML Abstraction Markup Language) это язык разметки для упрощённой генерации xHTML. В свою...

Подробнее
[Из песочницы] Организация кнопок на сайте с помощью Sass

Довольно часто наши любимые дизайнеры делают в макетах кнопки разных размеров и величин, некоторые из которых...

Подробнее
[Из песочницы] Адаптивная верстка с помощью SCSS и Gulp

Доброго времени суток, коллеги! Давно задавался вопросом, как оптимизировать и сделать более удобным код используя...

Подробнее
[Из песочницы] Прогулка с динозаврами: как я адаптировал веб-приложение под IE 7

Недавно я решил отправить свой проект, над которым работал в свободное время последние несколько лет, на конкурс в одну...

Подробнее

Написать комментарий

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги