{"id":9253,"title":"\u0427\u0442\u043e \u0434\u0430\u0440\u0438\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0432\u0440\u0435\u0434\u0438\u0442\u044c \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0440\u0435\u0434\u0435","url":"\/redirect?component=advertising&id=9253&url=https:\/\/vc.ru\/mos.ecology\/322605-chto-darit-klientam-sotrudnikam-i-partneram-chtoby-ne-navredit-okruzhayushchey-srede&placeBit=1&hash=f7f2e59c93d6bf99b4de7eb426299419c5e5dc01833ead4a2d9b746713d07b81","isPaidAndBannersEnabled":false}
Дизайн
Женя Иванов

Перестань рисовать ячейки — большой гайд по Figma Auto Layout

За последние года полтора я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новую функциональность на изучение. В этой статье я покажу хардкорное применение последнего нововведения в Figma — Auto layout.

Экраны «Яндекс.Музыки» на одном компоненте​

Три явных плюса от ультимейт-компонента

  1. Не нужно собирать компонент ячейки в каждом проекте заново.
  2. UIkit получается компактным, но при этом легко кастомизируемым.
  3. Ускоряет создание диза… Ой ладно, это просто круто!

Вот такие штуки можно делать после этого гайда. Если хочешь так же, открывай фигму, сейчас научу :)

Это и есть наша ячейка, разложенная по частям:

  • Какие-то форматы картинок слева.
  • Текст по центру.
  • Различные контролы справа.

Сейчас объясню, за что отвечает каждый из чёрных квадратов и почему их столько.

Ссылка на этот Figma-проект есть в Telegram-канале. Там я всё аккуратно разложил по полочкам и добавил подсказки, а то когда я пришёл к такой ячейке в первый раз, было примерно так :D

Ну вот и гайд

Рисуем Frame и включаем вертикальный Auto layout с фиксированной шириной, которая тебе нужна в дизайне, — это контейнер ячейки, в котором кроме слоя с контентом и Padding’ов больше ничего не будет.

Примечание 1: в компонентах на лэйаутах часто получается много «пустых» слоёв, не паникуй, они все чуть-чуть влияют на компонент.

Примечание 2: каждый нарисованный шаг заводи в компонент, чтобы в дальнейшем можно было всё кастомизировать по отдельности, не затрагивая всю ячейку.

Следующий этап — слой с контентом. В этом артборде настрой только Spacing между частями ячейки, разумеется, переключи лэйаут по горизонтали, это же горизонтальный компонент.

Теперь переходим к самим деталям ячейки, но через несколько шагов вернемся к «пустым» контейнерам.

Это детальки, которые я использовал для демо, у тебя их может быть гораздо больше (помнишь скриншот моей первой ячейки? :). Естественно заведи все эти детали в компоненты. У текстового компонента обязательно включи лэйаут c Fixed width, потом нам это понадобится.

Начинается самое интересное

Чтобы ячейка была гибкой и при этом растягивалась от контента внутри, нужно правильно настроить контейнеры деталей, которые ты сделал на предыдущем шаге, тут и кроются мелкие фишечки. Есть масса механик ячейки, описать все не получится, но, думаю, этой основной механики будет достаточно на первое время.

С левой частью всё легко. Просто группируем и включаем лейаут.

С текстовыми контейнерами дела обстоят поинтереснее, их нужно сделать столько, сколько у нас размерностей левой части. В моей демке есть маленькая иконка, средняя картинка и большая картинка, поэтому я сделал три контейнера, обычно больше и не требуется.

Сделать такие контейнеры не сложно, если ты включил Fixed width для текстовой детали (text root component) несколько шагов назад, просто растяни его на нужную ширину (вычти из ширины ячейки ширину левой и правой части ячейки).

Когда делаешь правую часть, закинь в неё все контролы, что тебе нужны, отключи Clip content у компонента и поставь фиксированную ширину, размером самой часто используемой детали, например иконки.

Это нужно, чтобы ячейка не разъезжалась при переключении деталей внутри правой части, если они разной длины. Обсуди этот момент с разработчиками, чтобы предотвратить различные вопросы :)

Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты. Для левой части — горизонтальный Auto height (в продвинутом mode закидывай туда систему отступов), для центральной — вертикальный Auto width, а для правой части — горизонтальный Fixed height, размер которой поставь по высоте средней левой части, в моём случае — 48 pt.

Правую часть делаем так специально, чтобы ваши контролы не ехали вслед за растягивающимся текстом. В таком способе есть мини-костыль, в маленькой ячейке нужно будет переключить правую часть с Fixed на Auto height либо сделать несколько контейнеров, для маленькой ячейки и для ячеек размером побольше, но в 95% случаев моего способа будет достаточно, чтобы покрыть все кейсы.

Теперь закидываем все три слоя Left, Center и Right part в наш компонент Content — и наша ячейка готова…

Почему это последняя в твоей жизни ячейка?

Это базовый компонент кита, который покрывает большинство кейсов. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента — и вуаля.

Пример кастомайза из начала статьи​

По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение.

Окей, круто! А как перенести компонент в другой проект-то?

Если у вас платная версия Figma, то всё легче некуда, ну а если бесплатная, то придётся потратить минуты две… О нет…

Принцип простейший:

  • Копируешь инстанс cell component в новый проект, он должен стать детачнутым.
  • Идёшь в самый низкоуровневый слой и делаешь из него компонент.
  • Формируешь компонент из слоя уровнем выше, что заставит нижнеуровневый компонент выпрыгнуть рядом, оставив внутри свой инстанс.
  • Profit!

Гайд закончился

Надеюсь, ты понял, что я тут наворотил. Если что-то не получилось, чекай Figma-файл в Telegram-канале, ну а если и это не помогло, задавай вопросы в комментарии или мне в личку (Telegram, «ВКонтакте»).

Спасибо, что дочитал. Если интересно, в следующей статье, я разберу не менее важную тему — неправильного использования стилей в дизайн-системе и как настроить их супер гибко, bye :)

0
64 комментария
Популярные
По порядку
Написать комментарий...

Из-за этих авто-лейаутов я пришёл к наплевательству на сетку 

5

Квадратные сетки и не нужны)

0

давно от них отказался, как и от колонок. Перешел сначала на 8рх линейки горизонтальные, а потом на 4рх линейки.

Счас думаю да пошло оно всё нахуй

–1

Пользуюсь готовой системой отступов (2 4 8 12 16 18 24 34 48 68 96 134 188) - это кайф. Ну, в новом проекте понадобилось ещё 6px. Такие системы сразу несколько проблем решают:
1. Не надо подгонять интерлиньяж под сетку
2. Не надо думать какой отступ выбирать, когда шаг 8px.

0

А что именно за отступы, хде? чёт не понял

можно скрин?

0

Это готовый список отступов, которые я использую в проектах сейчас. 2px, 4px и т.д

Вот представь что у тебя теперь есть вот этот список с отступами и никакие другие тебе использовать нельзя)

P.S Идея не моя, но мне максимально удобно.

3

Тэк-с... Всё еще до конца непонятно. Как заготовки из квадратиков избавляют от необходимости подгонять интерлиньяж под сетку?

0

Нет необходимости подгонять, потому что нет сетки) Вот просто нет клеточной сетки и всё) Ты её не используешь. А пользуешься исключительно готовыми отступами и делаешь из них красивый макет.

1

Выше мой коммент затрагивает эти квадратики)

0

Пхах, ничего себе у тебя заготовочка, не путаешься в таком количестве отступов? Ты их как-то системно используешь или «на глаз» где квадратик 16px заходит, туда и ставишь? ред.

0

Это только кажется, что их много) Их абсолютно достаточно, чтобы не думать, какой отступ выбирать в этот раз.

Конечно же ты делаешь макет так, чтобы тебя визуально устраивало. Дополнительный бонус - легко соблюдать правило внешнего и внутреннего.

0

правило внешнего и внутреннего.

Уведу дискуссию в это русло.

Это правило абсолютно нестрогое. Наоборот, если ему безукоснительно следовать - получается в лучшем случае неудобный интерфейс, а в худшем - еще и к тому же некрасивый. 

0

В дизайне можно всё. Нужно здравым смыслом руководствоваться. Но группировать элементы по смыслу это основы дизайна и психофизиология, как никак. ред.

2

Просто тоже эту тему с системой отступов сейчас активно использую, но немного сдерживаю себя с их количеством, чтобы не жестить для разработчиков

0

чтобы не жестить для разработчиков

Вот-вот. Еще поди вдолби это им в голову, про отступы-хуётступы. Покрутят пальцем у виска и сделают как получается, а не как надо.

0

Ты усложняешь всё)

Разрабу не надо знать ни про какие системы отступов. Он просто верстает макет, а макет (его элементы) имеют заданные отступы по системе.

Кстати, одно дело делать отступы в шотике на дрибле, а другое в большом проекте. Как будешь соблюдать отступы тогда? На каждой странице новые придумывать? Или запоминать те, которые ты придумал на первом странице?)

Эту проблему решает система. Тебе не надо придумывать и выбирать отступы.

0

Запоминать. 

Система отступов не всегда работает без осечек. Я бы даже сказал, что она настолько часто даёт осечку, что руки чешутся ее выкинуть. Например, в одном окружении заданные отступы работают хорошо, а в другом - не работают. Проблема именно в окружении, оно слишком сильно влияет на вроде бы уже отлаженные и отдизайненные объекты. И приходится выковыривать из мозгов нативное чувство прекрасного, чтобы собрать экран так, как будет удобно юзеру, а не дизайнеру или фронту. Да, на гомогенизации экранов можно ставить крест. Зато на выходе получаем реально удобный инструмент, а не шотик в дрибл) 

0

Система отступов не всегда работает без осечек. Я бы даже сказал, что она настолько часто даёт осечку, что руки чешутся ее выкинуть.

Эх, наглядные примеры бы...

Системы-то можно разные делать. Под стандартную верстку, под воздушную и т.д. 

0

Напиши свой набор.

0

Похоже свой новый коммент нужно было адресовать тебе: https://vc.ru/design/111631-perestan-risovat-yacheyki-bolshoy-gayd-po-figma-auto-layout?comment=1775472

))

0

Почему?))

0

Тяжело уложить все базовые линии текстов на определенную сетку если верстать авто-лейаутом. Приходится костылить прозрачными распорками, чтоб базовые линии дотягивали до линеек

0

Ааа, ну эт да)) Я не так давно перешёл на продвинутую систему отступов, всё благодаря тем же лейаутам, вроде как лечится нормально. Попробуй паддинги и марджины сделать компонентами и раскидывать во все компоненты

0

Попробуй паддинги и марджины сделать компонентами и раскидывать во все компоненты

Да в пизду) Надоела эта мышинная возня. Решил, что новые проекты буду делать полностью бессистемно, полагаясь исключительно на глазомер.

0

Пхах, ну если ты дизайнер различных промо страниц и прочего рекламного, то я всеми руками и ногами за, но не трогай святые интерфейсы))

1

Именно их я и собираюсь трогать. Не бойся, больно не будет 

}:-)

Кроме шуток, у меня давно зреет желание накатать статью, почему любые сетки и системы в макетах - это скрытое зло. При этом, я не топлю за хаос. Но истинная красота не рождается в оковах.

1

Ну мы с фронтом сейчас определили, что вот так ему будет удобно. То есть левый экран у меня полностью на лэйаутах и засунут в компонент, чтобы его можно было положить рядом и раскрыть сами отступы. Разраб просто пробегает по ним глазами и на раз-два вставляет условный padding-blue

1

Хэй, я в итоге пришёл к твоим квадратикам.

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

Очень удобным оказалось построить вообще ВСЁ на автолейаутах. И вот здесь я споткнулся об спейсинг в АЛ - он равен между любыми объектами. Выхода два: 

1) загонять объекты в компоненты, внутри которых отступаешь от краёв как тебе нужно,

2) сделать спейсинг в АЛ равным нулю и отбивать объекты прозрачными плашками (или непрозрачными, но цветом фона, короч чтоб их не было видно).

Выбрал второй путь.

Всего спустя неделю я поймал себя на том, что использую плашки размером в 4, 8, 12, 16, 20, 24, 28 и т.п.

Вспомнил тебя, побежал писать сей коммент. Сейчас планирую закомпонентить эти плашки-отступы, потому что вижу в этом потрясающую возможность контролировать макет: всего лишь с помощью настройки стилей шрифта и размеров этих плашек я могу тотально менять вёрстку сразу везде.

Правда показывать я их собираюсь не цветом, а нумерацией или литерацией, типа так:

A = 4 px
B = 8 px
и т.п.

По-любому споткнусь ещё обо что-нибудь, так что было бы прикольно если б ты разродился статьёй про этот плашечно-автолейаутный подход :)

1

Привет. Круто, что у тебя получается то, что ты описал. Тема системы отступов одна из самых сложных, потому что она затрагивает сразу множество элементов и легко ошибиться, поэтому её я оставил напоследок, после разбора всех хардкорных компонентов. Но если есть спрос, возможно я начну готовить эту тему пораньше, следи за обновлениями в телеге)

0

Спрос есть - на спектруме давно уже видел кривотолки про отступы в АЛ, люди сходятся во мнении что нужны вот эти вот плашечки искусственные :)

Прямо щас переделываю весь проект, ну то есть убираю автоматические отступы и внедряю компонентные.

Пока что столкнулся со следующим: если АЛ состоит из абсолютно однородных объектов, то внедрять туда компонентные отступы бессмысленно. Например, обычный список гиперссылок - вертикальный или горизонтальный. Или галерея карточек. 

А вот если АЛ состоит из объектов различной природы - иконки, тексты, кнопки - вот там да, компонентные отступы рулят.

Еще сходу напоролся на оформление самих компонентов для отступов. Решил не делать нумерацию, потому что легко спутать номер и размер самого компонента (например из имени indent-04 можно ошибочно сделать вывод, что он равен 4 рх, а он просто четвертый по счёту)

Поэтому дал им буквенные имена: indent-a, -b, -c и т.п.

Красить их в различные цвета тоже не рискнул, так как цвета тоже легко спутать, да и не напасёшься цветов.

Тут кстати небольшой лайфхак: делать индент без заливки неудобно, так как его невозможно выделить. А с заливкой делать - замучаешься подстраивать цвет под фон в различных контекстах. Поэтому я залил их чёрным цветом и присвоил режим смешения Lighten - вуаля, инденты теперь не видны на любом фоне.

Так вот, про имена опять таки. У меня щас так:

a = 4 px
b = 6 px
c = 8 px
... после 'e' увеличение идёт на 4 рх, после 'h' - на 8, и вот тут заковыра: что, если мне понадобится некое промежуточное значение? Получать его суммируя имеющиеся? Тупо как-то. Внедрять новый компонент? Тогда как его называть, если пространство имён уже определено? Добавлять еще один суффикс? Какой? тоже буквенный? Запутанно. Числовой? типа indent-i-01 - ну, можно конечно, но выглядит не оч

Напрашивается полная независимость имени не только от размера индента, но и от его места в последовательности всей линейки индентов. Тут на помощь могут прийти эмодзи (см. скрин) 

Однако и тут трабла - фигма почему-то не все эмодзи отображает. И, подозреваю, на разных компах и браузерах закономерность в глюках отображения тоже будет разная.

Короче! Охуенно много деталей всплывает.

0

Если честно, то я не совсем понял что ты делаешь. Но то, что от пиксельной сетки отказался - хорошо.

Не надо никакие цветные плашки подставлять вручную в макеты, это тратит огромное количество времени, а пользы нет.

У тебя есть к примеру заголовок, подзаголовок и картинка. От бокса заголовка до бокса подзаголовка делаешь отступ, и между боксом подзаголовка и картинкой делаешь отступ. Просто чтобы отступ по альту был, не надо туда подставлять компоненты и плашки какие-то)

И ещё. Если ты делаешь систему отступов, то шаг +4 или +8 пикселей приведет к тому, что на высоких значениях у тебя будут практически одинаковые отступы и ты снова начнешь тратить время на обдумывание, какой отступ выбрать в этот раз. Идеально, когда у отступов есть прогрессия, и каждый последующий отступ больше предыдущего настолько, чтобы была видна разница.

Как получить отступы? 

Есть Columns Grid, между колонками всегда задают отступ. Вот ты берешь этот отступ, делишь на 1,4 и умножаешь на 1,4 (1,4 это множитель). Проворачиваешь с получившимися значениями тоже самое, пока в конечном итоге у тебя не получится набор отступов от 2 до максимальных значений, которые тебе нужны. Желательно их округлять, чтобы они были кратны 2, так их удобнее использовать (чтобы были отступы не 2 и 3, а 2 и 4). Чем больше отступ между колонками берешь за основу, тем «воздушнее» макет получится с системой отступов.

Ну и стоит сказать, что это не я придумал. Я лишь понял и использую)

0

Колонки я не юзаю теперь =) Я отмеряю объектам ровно столько пространства, сколько они требуют для себя, не стесняя их колонками.

Но я примерно понял. Другое дело, что не обязательно брать что-то за основу, имхо.

Просто чтобы отступ по альту был, не надо туда подставлять компоненты и плашки какие-то)

Речь про AL. Автолейаутом оч удобно всякие длинные портянки дизайнить, нашпигованные элементами разной природы. Идеальный пример - дизайн статьи. В ней может быть всё что угодно: текст, цитаты, дивайдеры, картинки, кэпшены, многоуровневые заголовки, твиты и т.п. Но чтобы задавать разные отступы между элементами потребуется задать спейсинг внутри АЛ равным нулю и отбивать элементы плашками.

Думаю ты с этим тоже когда-нибудь столкнёшься)

0

Все равно не понял) Ты типа все элементы в один автолэйаут собираешь и потом ставишь прозрачные фреймы (выключая их видимость), чтобы отступы разные делать?)

Ты из заголовка и подзаголовка создаешь автолэйаут. А потом из картинки и этого автолэйаута делаешь ещё один автолэйаут. И так далее. У тебя вложенность получается, с разными отступами.

Прикрепил пример как это выглядит. Для наглядности наложил отступы поверх этого блока. ред.

0

У тебя вложенность получается, с разными отступами.

С такой вложенностью тяжеловато работать, имхо. Опять таки, рассмотрим дизайн статьи (это то над чем я работаю конкретно щас) - статья это гигантский такой макет, который хоть и выглядит просто и минималистично, но содержит миллиард нюансов. Ориентироваться в структуре статьи будет тем сложнее, чем больше уровней вложенности в ней будет. Даже мне, дизайнеру

ы типа все элементы в один автолэйаут собираешь и потом ставишь прозрачные фреймы

ага. тут преимущество в том, что во-первых структура макета становится абсолютно плоской. В нём конечно могут быть сложносоставные карточки со своими автолейаутами - и вот кстати чем больше там фарша, тем сложнее его править (это в дополнение к предыщему абзацу о вложенности). Во-вторых, со временем ты образуешь некую систему отступов, потому что используются +- одни и те же - и их уже удобно загонять в компоненты, на перспективу

См. скрин. В таком подходе очень легко внедрять новые элементы и переставлять их местами, да и банально менять отступы.

Плашки я "подсветил" чёрным для наглядности ред.

0

Осталось только ответить на вопрос зачем в фигме дизайнить статьи) Ну ок, тебе нужно для макета. Но зачем тебе её по десять раз редактировать? Вместо добавления этих квадратов можно было сесть и один раз нормально отредактировать статью, а потом заказать в автолэйаута.

Со вложенностями никаких проблем нет, удобно выделять блоки и менять отступ. Ну и да, ничего страшного в том, что единственная статья в макете получится с таким количеством автолэйаутов, нет. Проблема надуманная)

P.S Редактирование статей происходит на уровне движка сайта, поэтому статьи нет необходимости дизайнить в фигме миллион раз)

0

зачем в фигме дизайнить статьи

Я не дизайню статьИ, я дизайню статьЮ) Это часть дизайна интерфейса сайта. Это шаблон, по которому будут верстаться ВСЕ статьи на сайте.

Вместо добавления этих квадратов можно было сесть и один раз нормально отредактировать статью, а потом заказать в автолэйаута.

пока не попробуешь - не поймешь) Оч удобно дизайнить сразу в автолейауте. 

Проблема надуманная)

Да нет никакой проблемы))) Наоборот - я просто делюсь охуенно удобным способом делать дизайн. 

Редактирование статей происходит на уровне движка сайта

Ты непонел - см. первый абзац :)

0

Если ты шаблон делаешь, тогда имеет место наверное. Но для остального использовать такой подход это костыли конечно дикие, которые только время отнимают)

0

Это ж сколько дополнительной работы... 

Эх, всё это прокатывает когда тебя еще не заебали твердолобые упрямые фронты, и есть силы как-то им объяснять что-то. Я занимаюсь интерфейсами 6 лет, вроде недолго, а устал смертельно именно из-за наплевательства фронтов. 

0

Не, кстати, вообще работы не прибавилось, экраны наоборот на системе отступов проще собирать, они же там сами разлетаются, если лэйауты юзаешь. А насчёт последнего... может проблема тогда в конкретных фронтах, с кем ты работаешь, я про своего не могу так сказать, как ты про своего))

0

может проблема тогда в конкретных фронтах, с кем ты работаешь, я про своего не могу так сказать, как ты про своего

Проблема в 99% фронтов. Тебе реально повезло, если твой - адекватный и умный. Люби его. Однако он не всегда будет с тобой, будут и другие фронты :С И вот когда ты познаешь их - приходи, братан, выпьем с тобой, посетуем на долю нашу дизайнерскую)

0

С этим фронтом мы пилим совместные проекте (на скрине один из них), а так на работе у меня полно других обычных коллег, но они тоже вроде нормально относятся к таким нововведениям, типа системы отступов и остального, может я просто везучий на команду. Но твоё предложение запомню, если что напишу))

0

Не надо их пугать такими словами как система отступов. Надо просто говорить: «Солнышко, верстай пиксель-перфект» :D

2

Ахахаха, возьму на заметку :D

1

Не вздумай!

2

Солнышко, верстай пиксель-перфект

...иначе уволим нахуй

0

Это ж сколько дополнительной работы...

Вообще нисколько. Он просто знает что у него есть отступ 12px, например, и юзает его.

0

Ну мы тупо цвета юзаем. То есть условный отступ 16px - синий. Фронту остаётся указать, что сюда вставляем синий паддинг, а цифровое значение подставляется из заранее заготовленных переменных

0

А почему бы канал в телеграмме не записать видеоурок?

2

Ты думаешь, видео зашло бы? Посёчил ю туб на предмет дизайнерских видео, мало просмотров собирают, подумал, что нецелесообразно тратить время на видео. Если бы были gif вставки в статью, тебе легче читался бы гайд?

0

В новых статьях уже начал вставлять gif, а пак видеогайдов готовится к выпуску ;)

0

Вау, огромное мерси)

0

Может быть я тупой, но в целом, я неплохо понимаю логику фигмы, и мне пришлось раза три перечитывать статью, чтобы понять твой замысел.
Написано нечитабельно.

1

Согласен, это была проба пера. Сейчас стараюсь писать короче и добавлять гифки, чтобы было понятнее что и как я делаю. Есть идеи, как можно улучшить ситуацию?)

0

Ну вот вторая часть хорошая, потому что есть гифки, и замысел проясняется)

0

Хех, спасибо, что оценил)

0

не устаете скрывать/проявлять слои постоянно? я бы лично разбил на еще пару компонентов для четкого деления по функциям и ускорения работы

0

Конкретно в этой демке больше и нет смысла делать доп.компоненты, но если у вас будет использоваться часто другая комбинация, например, средняя картинка + кнопка справа, то согласен, можно сделать ещё один компонент средней ячейки с кнопкой👌

2

Из текста ничего не понял) но посмотрел компонент и все понял. Ничего нового для себя не открыл. Только лишь интересно зачем ты сделал сначала компонент Left Content, а потом из него же Left Part, с другой ориентацией автолейаута, для быстрого масштабирования на других разрешениях?

0

Привет. Это была дебютная статья, по высказыванию мыслей, всё было плохо))) В последних статьях пишу намного лучше.

Насчёт твоего вопроса: left part нужен для того, чтобы в горизонтальный лейаут можно было засунуть отступ, если ты делаешь систему отступов через квадратные компоненты. Если нет, то можешь просто оставить лефт контент и не парься)

1

Понял, спасибо) 

0

Хм, универсальненько...

0

\промахнулся\

0

Видео более приоритетно именно в полезности для пользователей. Больше бы благодарностей было бы, шаринга и т.д

0
Читать все 64 комментария
re:Store продал Macbook Pro с раскладкой azerty и серийный номер ноутбка не совпадает с серийным номером на коробке
Продавец eBay из Кургана стала победителем в финале Всероссийского конкурса «Молодой предприниматель России 2021»

27 ноября в Москве состоялся финал ежегодного конкурса «Молодой предприниматель России 2021». В нём приняли участие предприниматели и самозанятые в возрасте до 35 лет. Всего было подано более 300 заявок из 43 регионов страны.

Откуда берут взрослые деревья для парков и улиц

А также сколько они стоят и почему выращивать их — неплохой бизнес.

SkillFactory раздает подарки: повышенная ставка и новогодний марафон для вебмастеров

В преддверии Нового года мы решили порадовать своих настоящих и будущих партнеров — участников партнерской программы школ Skillfactory, Contented и Product LIVE. Это возможность получить денежный бонус и заодно увеличить прибыль от продажи наших курсов.

И сотрудников тоже касается: кибербуллинг на рабочем месте
Design vector created by pikisuperstar - www.freepik.com
Доказал, что миллиардеры не видят разницы между вином за $500 и $10 тысяч: история Руди Курниавана Статьи редакции

Курниаван продавал подделки под видом редких вин предпринимателям, генеральным директорам и голливудским продюсерам и обманул их более чем на $35 млн.

Руди Курниаван LA Times
Хоум кредит про меня забыли. Долг с 2009года

Решил я значит проверить свою кредитную историю на одном из известных ресурсах. И что я обнаружил? Действующий долг в #хоум_кредит с 2009 года и как следствие краснющую историю! Я конечно же позвонил в эту контору, говорю каким образом банк забыл про меня? - а вы знаете? Мы вам звонили звонили... но не дозвонились ... Так же как и вашим…

Агрегатор "Яндекс.Еда" не возвращают оплату за заказ, которого не было

Здравствуйте! Ситуация следующая, 22.10.2021 г. я сделала заказ у агрегатора доставки "Яндекс.Еда". Доставка из Магазина "Магнит". В момент списания оплаты с банковской карты за заказ заметила, что адрес доставки товара указан с ошибкой. В заказ проставился рабочий адрес, а не домашний, ехать на автомобиле от дома до работы мне 10 минут, пешком…

«Неслучайная случайность», или как рождаются крипто стартапы на примере Freya

Статья носит сугубо ознакомительный характер и не призывает к инвестированию в какие либо активы.

Дайджест новостей Сбера: сайт Digital Пётр, сценарии для умного дома и платина от Forbes

Прошлый дайджест мы целиком посвятили 180-летию Сбера, поэтому новостей накопилось много. Среди них — запуск сайта по распознаванию рукописей Петра I, большое обновление на платформе умного дома Sber и другие. Рассказываем всё самое интересное.

Картинка, сгенерированная ruDALL-E по запросу «рыжий котик»
Яндекс плюс снимают деньги и не оформляют возврат.Сотрудники компании не отвечают

Произошла неприятная ситуация с Яндекс плюс,причём во второй раз.С банковского счёта было списано 299₽,в самом профиле никакой подписки нет,тогда вопрос,за что снимали?Обратилась в поддержку ,заполнила форму-отказ ,хотя я приложила все доказательства и чек.Написала в чат ,попросили выслать номер карты,со второго числа никто не отвечает,писала уже…

null