Спасибо, конечно, за комментарий, но думаю что он крайне неудачный и не содержит никакой полезной информации или адекватной критики. Давайте проведем небольшой разбор, чтобы была понятна такая моя реакция: коментарий состоит из двух предельно общих мыслей [еще и высказанных неоправданно резко]. В первой части вы, видимо, "открываете мне глаза" на то, что, подозреваю, спроецировали на меня и мою работу - "а я и не претендую" - ну совсем. В моем тексте разве есть хотя бы намек на то, что я считаю свою разработку какой-то особенной, уникальной, прорывной, передовой и так далее? Обычный "отчет о проблемах с которыми столкнулся, и о том как их решал"... Вторая часть еще более некорректные "домыслы". Кажется весь код примеров в открытом доступе - читайте, разворачивайте, тестируйте? В технической дискуссии так нельзя - сделать предположение что что-то не оптимально, "что-то не то импортируется", и что нечто - "плохая практика" - совершенно без пояснения и аргументации почему именно.
Здраствуйте, Дмитрий! Первый каммент под статьей от Вас это уже приятно! Говорю это без всякого сарказма [который может кому-то показаться], совершенно серьезно - я вами восхищаюсь как, имхо, самым ярким персонажем по больнице в теме. Первые две ссылки совершенно адекватные и вы правы - спорить с вами о терминах и теории очевидно глупо с моей стороны, только смиренно внимать - глубина ваших знаний и понимания несоизмерима с моей. В первом общении под моей самой первой статьей мы уже об этом говорили: я же больше "дизайнер" и практик - приходится много работать, даже читать все что хочется и нужно - некогда, выспаться бы иногда...
Но, все-таки, позволю себе пару возражений. 1) Тем кому может быть полезна эта статья, скорее всего, будет понятнее, ближе, как вы говорите - такая "неправильная" терминология - "модуль/компонент". 2) "То к чему я стремлюсь" - кажется, мне и самому не до конца понятно... "Работу лучше работать" - все мои статьи и примеры (кроме статьи про Three) - это некие, можно сказать, "полевые заметки" на основе будничного рабочего опыта. Ну тоесть - выстраданные реальной конкретной практикой на рабочем месте. А там все такое - не будем...
Ммм... Ну, во-первых: "не используйте React", прежде всего. )))) Шутка, конечно, но вот мое отношение к этому фреймворку именно такое. ))) Ну а если серьезно, в случае если мы имеем некоторое легаси и на React и Vue, видимо, придется построить две "одинаковых кастомных библиотеки" для обоих фреймворков - с одинаковой номенклатурой компонент и полностью идентичным препроцессором (для гаджетов, наверняка, также можно построить библиотеку со схожим набором компонент и оформлением в фирменном стиле, но - с учетом особенностей этих сред и технологий). То о чем я пишу выше совсем не о конкретной технологии, а скорее о том, что очень многие разработчики не хотят ничего знать про дизайн или мощь препроцессоров, сильно противяться любой унификации и стандартизации, имеют мало опыта в создании качественной кастомной вьюхи, верят в то что "бутсрап им поможет" и так далее... Вот таких разработчиков очень полезно "оградить" от того что они не умеют и знать не хотят - просто выдав им готовую реализацию кита, компоненты, обязательно - документацию к ним и несколько перечней переменных и миксинов - атомов (если это веб - React, Vue, Svelte и тд) - для крайних случаев когда им все-таки нужно что-то "поверстать" на видах. Упрощая: будет очень эффективно если над написанием подобных библиотек, визуальными решениями будут трудиться разработчики с хорошей версткой, "лирики", а "физики" - работать на конечных видах - pages - с данными. Это в идеальном случае, конечно.
Но! В реальности все бывает не так идеально. Вот тут, как мне кажется - "ручной атомарный препроцессор" - как раз и будет очень эффективен. Так как научиться считывать из Фигмы маркер для цвета или гарнитуры шрифта - это вопрос минимальной дисциплины и контроля за кодом приходящим в репозиторий. Библиотека и ее готовые решения все равно никогда не покроют все случаи и далеко не каждое исключение дизайнеры захотят сводить к правилу и распрастранять на всю систему. Клиенты капризные, проекты разные, иногда (и даже очень иногда) бывает нужно чточто "вчера". Показанный выше "ручной подход", если ему аккуратно следовать - гарантирует что "исключительных стилей" на видах или "специфических компонентах проекта" - будет ну совсем немного и они будут "точно по киту". Их всегда можно будет быстро и легко отрефакторить при необходимости.
Ого, офигенно, просто - давайте общаться? Да, можно было бы и в личку задать вопрос, но пусть здесь будет... Да, я по поводу https://habr.com/ru/post/556238/ - ну и там совсем простые минимальные фичи нужны, но которые могут быть интересны соответствующему спецу "для творчества-тренировки"... И я, при этом, даже готов платить чтото адекватное - как договоримся... Технологически в контексте "фронта" тот проект уже не особо актуален - я тут стал на Vue3 + TypeScript - стратегию писать - вот задумал ремейк на Dune 2/2000 "из детства"... Но просто даже - найти выход на человека который может простые модельки красивые делать и анимации для них прописать - это очень ценно - я сам уже давно "не дизайнер" уже похоже совсем! Давайте на днях в телеграм свяжемся - мой ник @ushliypakostnik - напишите мне? Ни по знакомым, ни под статьей о первом эксперименте - под которой было много аплодисментов от коллег - но ни одного "аниматора" - не нашлось...
Спасибо за каммент! Все так, все так... Тут у меня "вьетнамские флешбеки" на то как много-много лет назад, когда я начинал, конечно же - "с Бутрап" - писал скрипты с джиквери чтобы в ресайзе сетку на кастомный брекпоинт перестроить - вот всякое такое...
Имхо, не только "Верстальщик", любой фронт должен уметь верстать на всем вообще - в том числе и на таблицах - в любой момент может понадобыться письмо - иначе он не фронт, а как вы - "флексер"-мракодел...)))... А опытный фронт - еще и обязан понимать - что именно и на чем уместно верстать - чтобы "потом не возращалось", не было проблем с внезапными хотелками и тд и тп...
В некоторых простых случаях для сайдбара для modern bro - допустимо применить флекс, конечно. Но простая статика - до сих пор - проще, надежнее и гибче. "Хакатон в песочнице" - вы с коллегой-флексером не вывезли. Если забавляться с этим дальше - совсем захлебнетесь - это уже очевидно - у меня 4 элемента в блоке, а у вас - понеслась по кочкам... А вспомните - начиналось то вообще "с грида", который оказывается "просто не анимируется"... ))) Поэтому тролли - это вы.
@JustDont и у вас, кстати в последнем примере - бяка-косяк "с обшим скролом страницы - в правом нижнем углу - с точки зрения UI - фиговенко - дизайнеры придерутся:
@JustDontпоэтому продолжим развлекаться, а то видимо непонятно - обычно у нас еще и бывает фиксированный хедер у "всего сайта", правильно? Давайте добавим - в моем случае мы опять - "просто добавляем элемент - фиксед и паддинг основному контейнеру-странице":
Заметьте, у меня структура сейчас - линейна - и модификации - практически не добавляют никакой сложности в структуру/стили, почти не затрагивают остальные элементы - все очень просто и понятно:
Да да да - о том и речь - в контексте фреймворка оно еще и точно будет в разных файлах, компонентах, свойства начнуть терятся и тд - вот эта вся мрачная история о которой в статье и рассказывал... По сути - мы вместо простейшей надежной и легко модифицируемой в самом критическом случае конструкции: fixed у одного элемента - и паддинга у другого - и обычного статичного потока с которым легко дальше работать - устраиваем цирк: - везде флекс изза которого мы начинаем "крутить обертки, добавлять свойства" и тд... Гореверстальщики.
Передергивание чистой воды - в статье речь о стиле когда "вообще скелета и БЭМа-разумного нет"... А тут как раз пример из самого первого пассажа - "для разметки крупного лейаута - выбрали флекс - всплыли требования - крутим дополнительные контейнеры, все усложняем - где-то чтото начинает плыть и тд" - все как раз вот четко "по тексту"... Так ведь еще и потом в адаптации - автор начнет это все "отменять" - оставляя "чудокорячный флекс" только на десктопе, а для гаджетов отписывая "как у меня везде" - не излишне, эффективно? Для того чтобы делать сразу правильно и просто - нужно "знать где подстелить" или набивать шишки, да... Но в комментариях они не набиваются смотрю - бесполезно, тролли лучше знают и тд...
Известно "почти всем" - сегодня - особенно 4 и 5, к сожалению. Проблемы начинаются потом, когда контент/требования начинают менятся, вы пишете гаджеты где ваш флекс уже не уместен и тд и тп... Человек с опытом - сделает сразу тупо просто и гибко при этом... А "безответсвенный" - будет дальше танцевать с бубнами для того чтобы выгородить свою несостоятельность...
Смысл моих "поучений" выше в том, что опытные специалисты - которые каждый день имеют реальную боль - прежде вот от вот сомнительных экспериментов таких вот безответсвенных заносчивых комментаторов - делают просто и надежно с одной стороны, а с другой - так, что это можно легко модифицировать - без танцев с кряками, добавлением сложности и тд. А такие как вы - нахватавшись "модного" по верхам - лепят всякое - "лишь бы лепить". Как я заметил часто "ради своего экспириенса" - в ущерб проекту, результату, нервав и времени коллег... Ведь потом работодатели - зовут меня чтобы я вот это все вычищал и тд... Профессионал - не стремиться "выпендриться", а делает 1) надежно 2) гибко.
Вы в третий раз оскорбляете меня и тем самым показываете с кем и что именно понятно. Вы даже не читаете толков коментариев в дисскуссии и тут уже просто отмазываетесь - "специалисты" "с низкой ответсвенностью" - так себя и ведут: 1) речь изначально шла о лучшей технологии для разметки лейаута с сайдбаром 2) на гаджетах он и так чаще всего - фиксед - то что вы это не понимаете - значит нет реального опыта, 100%...
Обычно на странице бывает еще и футер. Добавляем в мое решение - просто добавляем контейнер и стили для него - и пусть он будет даже с "модным" position: sticky; (тоже выучили "такое сложное"? - но у меня вот в Эдж - "моргает") https://jsfiddle.net/48jesqLn/18/
Нет, кэп, вы пока что достойны только унижения, имхо - извините, но это ради вашего же блага! Вы еше не дозрели, видимо, не много до необходимого инсайта, да и некоторые непроходимо на него бывают вообще не способны. И я вас еще только подвожу к нему - ибо то как пафосно вы юлите при этом - ну просто очень забавно... Вы серьезно считаете что align-items: stretch; невозможно нагуглить сразу за один запрос "сделать блоки одинаковой высоты на flex"? Тайное знание какое-то, доступное избранным? Cиндром Даннинга-Крюгера? Давайте просто проанализируем UI/UX? Контент, требования немного изменились - в левом меню, например внезапно появились оверглубокие вложенные списки - контента может становится ну очень много. Дизайнеры хотят чтобы пользователь мог контролировать и "всю страницу" и "меню" - отдельно - когда овердлинные списки раскрываются - они не должны влиять на контент. Вот у вас же осталось правило:
.page__sidebar { ... overflow-y: scroll; }
Зачем? Оно же не работает и не будет работать с решением на align-items: stretch; и flex-basis??? В моем органичном примере с фиксед - все с самого начала так и есть - "хороший юзабилити" - может слышали о такой вещи - мы вообще - реальные специалисты - именно этим и занимаемся - "работаем для удобства пользователя", прежде всего, а не абстрактные примеры пишем на модных технологиях...
Так вот - тот кто уже окончательно сел в лужу - пару раз оскорбив при этом человека с более глубоким и разносторонним опытом опытом который только пытался помочь зашореннуюму сознанию с завышенным ЧСВ - вопрос? Как можно в вашем последнем идеальном флексе "вернуть скроол в меню" и тем самым улучшить пользовательский опыт - сейчас в нем очевидно есть проблемы - например - пункт меню в конце списка - контента мало - либо то либо другое блокируется - нужно скроллить?
Речь не только об анимируемости гридов и флексбокса... И чем это пример "специфический" то? Это самый как раз простой "старт", "рамочный прототип" сайдбара и даже "немного, чуть в развитии" - накидали блок и 2 элемента - решаем какой способ позиционирования использовать, что надежно и легко анимировать, как будет вести себя при разном контенте... Я же вот просто уже много лет - каждый день подобное пишу ручками и переписываю за вот такими "комментаторами" - от зуммеров-реактеров до престарелых фуллов так и не научившихся верстать - ((((... Ну и спор был, забомбило у массовки по поводу как раз гридов - которые вот действительно "просто не анимируются" тупо в данном случае как надо... Потом - сообразив что поплыли - "знатоки флекса" "уцепились за флексбокс" - но и тут в реальности проблем дофига - а мы только начали пилить минимальный пример... Такой сайдбар надежный (что есть собственно - "крупный лейаут") - делается "как деды делали" - вот так как я показал. Тем более что панель-меню еще - вообще и так должна быть [чаще всего] именно фиксед на гаджетах - "ездить" и "над контентом"... Но больше я писать сюда не буду походу долго - надоело пачкаться - оно того не стоит, мне за это не платят и противно вообще - как будто "во флекс наступил"...((((
Но вообще "история с сайдбаром" - да - очень показательная - в контексте общего смысла статьи - азов не знают - зато - флекс везде вообще, хуки на реакте, мрак на таилвинде и прочая ересь. А как "панель сбоку надежно привесить" - не понимают. Начинаешь объяснять - понты... Тьфу вообще...
Хахаха, да ну кэп?.. Речь не о анимациии - проблема с анимацией была продемострирована как проблема с гридом, очевидно же. Добавить min-width в transition - я просто забыл - спать пора, а вы как "суперзнаток сеток и флекса"))) (умора) уже немного прокололись, так как должны были сказать что это грубо, "непофлексовски" и следует использовать flex-shrink: 0; для .page__sidebar вместо min-width в 2ух селекторах!!! Я же сказал - 2) - делаем "понастоящему" и добавляем контент! Пофиксите разную высоту у сайдбара и контента при скроле? Если не ответите - буду заслуженно считать вас ... сами знаете кем?
На самом деле - надоело уже метать биссер перед ... хабровчанами... Вот эти минусы все - я ванговал, конечно, но все равно растраивает - "тупая толпа" и тд... Но раз уж вы берете на слабо - потратил 10 минут и написал показательные примеры - не для того чтобы вас убедить - просто ради развлечения. Итак - пишем на HTML/CSS/pureJS - простейшие пример сайдбара:
1) Для начала - на гридах - думаю без объянений все ясно? Клиенты и дизайнеры очень часто хотят "чтобы была какая-нибудь анимация", правильно? Нажмите на кнопочку: https://jsfiddle.net/1jmfeb6d/44/ - дошло, нет?
2) Дальше - пишем 2 примера - по классике - железно-надежным дедовским способом который до сих пор лучше всех:
И тут и там все хорошо и анимация - пашет и даже на флексе - кода CSS - чуть меньше. Но это только кажется. Давайте попробуем чуть приблизить примеры к реальности и добавить контент и в меню и в "тело":
c relative/absolute - нам просто надо сделать relative/fixed - это будет удобно и часто так бывать как раз и "в адаптации" - на гаджетах: https://jsfiddle.net/9omr76tb/51/ - все хорошо!
Очень хорошо показываете себя. Ваш сбивчивый путанный рассказ о единственной убогой пластмассовой игрушке которая вам заменяет реальные знания и опыт - это критика? ))) Слезу - так выбить можете, надавив на жалость, но не серьезное внимание. Утомили - честно...
Ну Кафедра практически вся всегда была в айти... :)
Спасибо, конечно, за комментарий, но думаю что он крайне неудачный и не содержит никакой полезной информации или адекватной критики. Давайте проведем небольшой разбор, чтобы была понятна такая моя реакция: коментарий состоит из двух предельно общих мыслей [еще и высказанных неоправданно резко]. В первой части вы, видимо, "открываете мне глаза" на то, что, подозреваю, спроецировали на меня и мою работу - "а я и не претендую" - ну совсем. В моем тексте разве есть хотя бы намек на то, что я считаю свою разработку какой-то особенной, уникальной, прорывной, передовой и так далее? Обычный "отчет о проблемах с которыми столкнулся, и о том как их решал"... Вторая часть еще более некорректные "домыслы". Кажется весь код примеров в открытом доступе - читайте, разворачивайте, тестируйте? В технической дискуссии так нельзя - сделать предположение что что-то не оптимально, "что-то не то импортируется", и что нечто - "плохая практика" - совершенно без пояснения и аргументации почему именно.
Здраствуйте, Дмитрий! Первый каммент под статьей от Вас это уже приятно! Говорю это без всякого сарказма [который может кому-то показаться], совершенно серьезно - я вами восхищаюсь как, имхо, самым ярким персонажем
по больницев теме. Первые две ссылки совершенно адекватные и вы правы - спорить с вами о терминах и теории очевидно глупо с моей стороны, только смиренно внимать - глубина ваших знаний и понимания несоизмерима с моей. В первом общении под моей самой первой статьей мы уже об этом говорили: я же больше "дизайнер" и практик - приходится много работать, даже читать все что хочется и нужно - некогда, выспаться бы иногда...Но, все-таки, позволю себе пару возражений. 1) Тем кому может быть полезна эта статья, скорее всего, будет понятнее, ближе, как вы говорите - такая "неправильная" терминология - "модуль/компонент". 2) "То к чему я стремлюсь" - кажется, мне и самому не до конца понятно... "Работу лучше работать" - все мои статьи и примеры (кроме статьи про Three) - это некие, можно сказать, "полевые заметки" на основе будничного рабочего опыта. Ну тоесть - выстраданные реальной конкретной практикой на рабочем месте. А там все такое - не будем...
Ммм... Ну, во-первых: "не используйте React", прежде всего. )))) Шутка, конечно, но вот мое отношение к этому фреймворку именно такое. ))) Ну а если серьезно, в случае если мы имеем некоторое легаси и на React и Vue, видимо, придется построить две "одинаковых кастомных библиотеки" для обоих фреймворков - с одинаковой номенклатурой компонент и полностью идентичным препроцессором (для гаджетов, наверняка, также можно построить библиотеку со схожим набором компонент и оформлением в фирменном стиле, но - с учетом особенностей этих сред и технологий). То о чем я пишу выше совсем не о конкретной технологии, а скорее о том, что очень многие разработчики не хотят ничего знать про дизайн или мощь препроцессоров, сильно противяться любой унификации и стандартизации, имеют мало опыта в создании качественной кастомной вьюхи, верят в то что "бутсрап им поможет" и так далее... Вот таких разработчиков очень полезно "оградить" от того что они не умеют и знать не хотят - просто выдав им готовую реализацию кита, компоненты, обязательно - документацию к ним и несколько перечней переменных и миксинов - атомов (если это веб - React, Vue, Svelte и тд) - для крайних случаев когда им все-таки нужно что-то "поверстать" на видах. Упрощая: будет очень эффективно если над написанием подобных библиотек, визуальными решениями будут трудиться разработчики с хорошей версткой, "лирики", а "физики" - работать на конечных видах - pages - с данными. Это в идеальном случае, конечно.
Но! В реальности все бывает не так идеально. Вот тут, как мне кажется - "ручной атомарный препроцессор" - как раз и будет очень эффективен. Так как научиться считывать из Фигмы маркер для цвета или гарнитуры шрифта - это вопрос минимальной дисциплины и контроля за кодом приходящим в репозиторий. Библиотека и ее готовые решения все равно никогда не покроют все случаи и далеко не каждое исключение дизайнеры захотят сводить к правилу и распрастранять на всю систему. Клиенты капризные, проекты разные, иногда (и даже очень иногда) бывает нужно чточто "вчера". Показанный выше "ручной подход", если ему аккуратно следовать - гарантирует что "исключительных стилей" на видах или "специфических компонентах проекта" - будет ну совсем немного и они будут "точно по киту". Их всегда можно будет быстро и легко отрефакторить при необходимости.
Ого, офигенно, просто - давайте общаться? Да, можно было бы и в личку задать вопрос, но пусть здесь будет... Да, я по поводу https://habr.com/ru/post/556238/ - ну и там совсем простые минимальные фичи нужны, но которые могут быть интересны соответствующему спецу "для творчества-тренировки"... И я, при этом, даже готов платить чтото адекватное - как договоримся... Технологически в контексте "фронта" тот проект уже не особо актуален - я тут стал на Vue3 + TypeScript - стратегию писать - вот задумал ремейк на Dune 2/2000 "из детства"... Но просто даже - найти выход на человека который может простые модельки красивые делать и анимации для них прописать - это очень ценно - я сам уже давно "не дизайнер" уже похоже совсем! Давайте на днях в телеграм свяжемся - мой ник @ushliypakostnik - напишите мне? Ни по знакомым, ни под статьей о первом эксперименте - под которой было много аплодисментов от коллег - но ни одного "аниматора" - не нашлось...
Спасибо за каммент! Все так, все так... Тут у меня "вьетнамские флешбеки" на то как много-много лет назад, когда я начинал, конечно же - "с Бутрап" - писал скрипты с джиквери чтобы в ресайзе сетку на кастомный брекпоинт перестроить - вот всякое такое...
Имхо, не только "Верстальщик", любой фронт должен уметь верстать на всем вообще - в том числе и на таблицах - в любой момент может понадобыться письмо - иначе он не фронт, а как вы - "флексер"-мракодел...)))... А опытный фронт - еще и обязан понимать - что именно и на чем уместно верстать - чтобы "потом не возращалось", не было проблем с внезапными хотелками и тд и тп...
В некоторых простых случаях для сайдбара для modern bro - допустимо применить флекс, конечно. Но простая статика - до сих пор - проще, надежнее и гибче. "Хакатон в песочнице" - вы с коллегой-флексером не вывезли. Если забавляться с этим дальше - совсем захлебнетесь - это уже очевидно - у меня 4 элемента в блоке, а у вас - понеслась по кочкам... А вспомните - начиналось то вообще "с грида", который оказывается "просто не анимируется"... ))) Поэтому тролли - это вы.
@JustDont и у вас, кстати в последнем примере - бяка-косяк "с обшим скролом страницы - в правом нижнем углу - с точки зрения UI - фиговенко - дизайнеры придерутся:
Плюс, конечно - еще расскажите насколько просто будет "мигом" перепилить все вот так: https://jsfiddle.net/oh3q7bue/35/
Ушли плакать, чтоле, @PaulZi???
@JustDontпоэтому продолжим развлекаться, а то видимо непонятно - обычно у нас еще и бывает фиксированный хедер у "всего сайта", правильно? Давайте добавим - в моем случае мы опять - "просто добавляем элемент - фиксед и паддинг основному контейнеру-странице":
https://jsfiddle.net/1rp65Lgo/
А у вас с флексом "с самого верха", вангую - еще оберткИ и сложность? )) hhttps://jsfiddle.net/on7qtsze/2/
Жду.
Заметьте, у меня структура сейчас - линейна - и модификации - практически не добавляют никакой сложности в структуру/стили, почти не затрагивают остальные элементы - все очень просто и понятно:
"Противоречие" - у вас в головах. У меня - опыт... Жду примера?
Да да да - о том и речь - в контексте фреймворка оно еще и точно будет в разных файлах, компонентах, свойства начнуть терятся и тд - вот эта вся мрачная история о которой в статье и рассказывал... По сути - мы вместо простейшей надежной и легко модифицируемой в самом критическом случае конструкции: fixed у одного элемента - и паддинга у другого - и обычного статичного потока с которым легко дальше работать - устраиваем цирк: - везде флекс изза которого мы начинаем "крутить обертки, добавлять свойства" и тд... Гореверстальщики.
Передергивание чистой воды - в статье речь о стиле когда "вообще скелета и БЭМа-разумного нет"... А тут как раз пример из самого первого пассажа - "для разметки крупного лейаута - выбрали флекс - всплыли требования - крутим дополнительные контейнеры, все усложняем - где-то чтото начинает плыть и тд" - все как раз вот четко "по тексту"... Так ведь еще и потом в адаптации - автор начнет это все "отменять" - оставляя "чудокорячный флекс" только на десктопе, а для гаджетов отписывая "как у меня везде" - не излишне, эффективно? Для того чтобы делать сразу правильно и просто - нужно "знать где подстелить" или набивать шишки, да... Но в комментариях они не набиваются смотрю - бесполезно, тролли лучше знают и тд...
То что 2 блока внутри одного можно разместить по горизонтали с помощью:
1) классически - флоатами
2) с падингом "изъяв один из потока" - relative/absolute или fixed - как вам все равно придется сделать потом чаще всего для гаджетов
3) через inline-block - нюанс - без пробела между блоками в разметке - так наверное не умеете вообще - а я так много лет сетки писал "не только для modern", например https://github.com/ushliypakostnik/svelte-scss-router-i18n/blob/60f94e589f3f8b07771c693a58d67d691bbf11d4/src/styles/core/_grid.scss#L1-L66
4) флексом для modern
5) гридом для modern
Известно "почти всем" - сегодня - особенно 4 и 5, к сожалению. Проблемы начинаются потом, когда контент/требования начинают менятся, вы пишете гаджеты где ваш флекс уже не уместен и тд и тп... Человек с опытом - сделает сразу тупо просто и гибко при этом... А "безответсвенный" - будет дальше танцевать с бубнами для того чтобы выгородить свою несостоятельность...
Смысл моих "поучений" выше в том, что опытные специалисты - которые каждый день имеют реальную боль - прежде вот от вот сомнительных экспериментов таких вот безответсвенных заносчивых комментаторов - делают просто и надежно с одной стороны, а с другой - так, что это можно легко модифицировать - без танцев с кряками, добавлением сложности и тд. А такие как вы - нахватавшись "модного" по верхам - лепят всякое - "лишь бы лепить". Как я заметил часто "ради своего экспириенса" - в ущерб проекту, результату, нервав и времени коллег... Ведь потом работодатели - зовут меня чтобы я вот это все вычищал и тд... Профессионал - не стремиться "выпендриться", а делает 1) надежно 2) гибко.
Это не про вас.
Вы в третий раз оскорбляете меня и тем самым показываете с кем и что именно понятно. Вы даже не читаете толков коментариев в дисскуссии и тут уже просто отмазываетесь - "специалисты" "с низкой ответсвенностью" - так себя и ведут: 1) речь изначально шла о лучшей технологии для разметки лейаута с сайдбаром 2) на гаджетах он и так чаще всего - фиксед - то что вы это не понимаете - значит нет реального опыта, 100%...
Обычно на странице бывает еще и футер. Добавляем в мое решение - просто добавляем контейнер и стили для него - и пусть он будет даже с "модным" position: sticky; (тоже выучили "такое сложное"? - но у меня вот в Эдж - "моргает") https://jsfiddle.net/48jesqLn/18/
А вы что будете делать? Еще обертки добавлять и модные правила?https://jsfiddle.net/u8jdhv90/50/
Может уже просто признать что вы ... ? С низкой ответственностью?
Нет, кэп, вы пока что достойны только унижения, имхо - извините, но это ради вашего же блага! Вы еше не дозрели, видимо, не много до необходимого инсайта, да и некоторые непроходимо на него бывают вообще не способны. И я вас еще только подвожу к нему - ибо то как пафосно вы юлите при этом - ну просто очень забавно... Вы серьезно считаете что align-items: stretch; невозможно нагуглить сразу за один запрос "сделать блоки одинаковой высоты на flex"? Тайное знание какое-то, доступное избранным?
Cиндром Даннинга-Крюгера?Давайте просто проанализируем UI/UX? Контент, требования немного изменились - в левом меню, например внезапно появились оверглубокие вложенные списки - контента может становится ну очень много. Дизайнеры хотят чтобы пользователь мог контролировать и "всю страницу" и "меню" - отдельно - когда овердлинные списки раскрываются - они не должны влиять на контент. Вот у вас же осталось правило:.page__sidebar { ... overflow-y: scroll; }
Зачем? Оно же не работает и не будет работать с решением на align-items: stretch; и flex-basis??? В моем органичном примере с фиксед - все с самого начала так и есть - "хороший юзабилити" - может слышали о такой вещи - мы вообще - реальные специалисты - именно этим и занимаемся - "работаем для удобства пользователя", прежде всего, а не абстрактные примеры пишем на модных технологиях...
Так вот - тот кто уже окончательно сел в лужу - пару раз оскорбив при этом человека с более глубоким и разносторонним опытом опытом который только пытался помочь зашореннуюму сознанию с завышенным ЧСВ - вопрос? Как можно в вашем последнем идеальном флексе "вернуть скроол в меню" и тем самым улучшить пользовательский опыт - сейчас в нем очевидно есть проблемы - например - пункт меню в конце списка - контента мало - либо то либо другое блокируется - нужно скроллить?
https://jsfiddle.net/8ocysztu/23/
Жду.
Речь не только об анимируемости гридов и флексбокса... И чем это пример "специфический" то? Это самый как раз простой "старт", "рамочный прототип" сайдбара и даже "немного, чуть в развитии" - накидали блок и 2 элемента - решаем какой способ позиционирования использовать, что надежно и легко анимировать, как будет вести себя при разном контенте... Я же вот просто уже много лет - каждый день подобное пишу ручками и переписываю за вот такими "комментаторами" - от зуммеров-реактеров до престарелых фуллов так и не научившихся верстать - ((((... Ну и спор был, забомбило у массовки по поводу как раз гридов - которые вот действительно "просто не анимируются" тупо в данном случае как надо... Потом - сообразив что поплыли - "знатоки флекса" "уцепились за флексбокс" - но и тут в реальности проблем дофига - а мы только начали пилить минимальный пример... Такой сайдбар надежный (что есть собственно - "крупный лейаут") - делается "как деды делали" - вот так как я показал. Тем более что панель-меню еще - вообще и так должна быть [чаще всего] именно фиксед на гаджетах - "ездить" и "над контентом"... Но больше я писать сюда не буду походу долго - надоело пачкаться - оно того не стоит, мне за это не платят и противно вообще - как будто "во флекс наступил"...((((
Но вообще "история с сайдбаром" - да - очень показательная - в контексте общего смысла статьи - азов не знают - зато - флекс везде вообще, хуки на реакте, мрак на таилвинде и прочая ересь. А как "панель сбоку надежно привесить" - не понимают. Начинаешь объяснять - понты... Тьфу вообще...
Хахаха, да ну кэп?.. Речь не о анимациии - проблема с анимацией была продемострирована как проблема с гридом, очевидно же. Добавить min-width в transition - я просто забыл - спать пора, а вы как "суперзнаток сеток и флекса"))) (умора) уже немного прокололись, так как должны были сказать что это грубо, "непофлексовски" и следует использовать flex-shrink: 0; для .page__sidebar вместо min-width в 2ух селекторах!!! Я же сказал - 2) - делаем "понастоящему" и добавляем контент! Пофиксите разную высоту у сайдбара и контента при скроле? Если не ответите - буду заслуженно считать вас ... сами знаете кем?
Бла-бла-бла https://habr.com/ru/post/587674/comments/#comment_23687996! Пишите больше камментов! ))))))
На самом деле - надоело уже метать биссер перед ... хабровчанами... Вот эти минусы все - я ванговал, конечно, но все равно растраивает - "тупая толпа" и тд... Но раз уж вы берете на слабо - потратил 10 минут и написал показательные примеры - не для того чтобы вас убедить - просто ради развлечения. Итак - пишем на HTML/CSS/pureJS - простейшие пример сайдбара:
1) Для начала - на гридах - думаю без объянений все ясно? Клиенты и дизайнеры очень часто хотят "чтобы была какая-нибудь анимация", правильно? Нажмите на кнопочку: https://jsfiddle.net/1jmfeb6d/44/ - дошло, нет?
2) Дальше - пишем 2 примера - по классике - железно-надежным дедовским способом который до сих пор лучше всех:
relative/absolute: https://jsfiddle.net/90xwfc8z/24/
и flexbox: https://jsfiddle.net/26dtur4j/17/
И тут и там все хорошо и анимация - пашет и даже на флексе - кода CSS - чуть меньше. Но это только кажется. Давайте попробуем чуть приблизить примеры к реальности и добавить контент и в меню и в "тело":
c relative/absolute - нам просто надо сделать relative/fixed - это будет удобно и часто так бывать как раз и "в адаптации" - на гаджетах: https://jsfiddle.net/9omr76tb/51/ - все хорошо!
и flexbox: https://jsfiddle.net/qykdnw31/25/ - дошло?
Достали, реально!!! Лучше бы азы учили и практиковались чем камменты строчить - теша свое ЧСВ.... (((((((((
Очень хорошо показываете себя. Ваш сбивчивый путанный рассказ о единственной убогой пластмассовой игрушке которая вам заменяет реальные знания и опыт - это критика? ))) Слезу - так выбить можете, надавив на жалость, но не серьезное внимание. Утомили - честно...