sashabeep, я не подход описываю. Это просто часть не упомянутых кейсов, в которых ваше допущение о смене тегов и производительности просто не сработает.
В остальном полностью согласен с куратором.
Тогда нужно с другой стороны подходить:
1. Абсолютно позиционировать - крайний случай, т.к. анимацию можно делать через css transition или силами библиотеки фреймворка.
2. Анимации довольно распространенная технология, вроде все фреймворки несут в себе различные варианты реализации. Когда вопрос задаете - уточняйте технологию. Гугл выдал ответ - https://ru.vuejs.org/v2/guide/transitions.html.
3. Анимация - это очень большой раздел возможных ситуаций и взаимодействий, и начинать с нуля - масса потерянного времени на исследования и купирование проблем.
Если пользуетесь фреймворком - используйте его возможности по максимуму.
sashabeep, уважаемый, есть системы, в которых вы просто не сможете часть верстки изменить, т.к. после "индусских" программистов всё связано еще и в js и залочено в бэке. Типичный пример - Sharepoint Portal года этак 2012. Отключен браузерный скролл, ужасная реализация прижатого header, везде системные id, изменение структуры просто добавляло головной боли на месяцы интеграции верстки и восстановления функционала. И таки да - вместо ul вставить nav убивало 70% функциональности навигации.
Человеческая глупость бесконечна как и вселенная. И с этим надо было как-то жить, корпоративные порталы продаваны успешно продали в топ банки, к примеру. Бизнес.
Про CMS без шаблона по умолчанию не стоит и заикаться, т.к. анархия никогда не являлась 100% доказательством отсутствия государства в иной части земного шара.
если будет доступ к коду - смогу помочь. нужно поэтапно добраться до контейнера карточки. У вас ширина не наследуется вложенными элементами. Проверяйте.
И еще - а какое собственно значение у white-space? И зачем оно там?
camelCase - не логично. Заодно и js-фреймворки типа ангуляра убьет, если автор начнет темплейты в camel оформлять.
Пишите так чтобы получался бойлерплейт код. Изолируйте компоненты утилитарными классами, делайте атомарные элементы, следуйте хорошему тону написания стилей (пусть и не в полном БЭМ), заботьтесь о тех, кто придет после вас и не портьте себе карму.
Всё остальное от лукавого.
Рано или поздно можете перерасти верстку, перейти в тяжелый фронтэнд, CSSinJS и прочее, и всё утрясется :)
Так а зачем собственно pug?
В нем готового процентов на 90 ничего не будет. Можно взять готовый шаблон в html и перегнать в pug. Хоть ручками, хоть конвертером.
Pug - это просто альтернативный вид быстрой записи html. В браузере всё превращается в обычный html средствами того же экспресса. Так что обычный html шаблон превращенный в pug будет работать точно так же. Со стилями и js.
Тогда валидируйте форму не по клику, а по событию, типа onchange для каждого инпута или on blur для формы. А на сабмит не завязывайте ничего. Только превент добавить, чтоб по кнопке enter не улетело.
На валидацию добавить видимость кнопки "Отправить". Пока валидация не прошла - ее не видно.
Типа этого https://stackoverflow.com/questions/38441547/how-d...
dintear_koden, ниже куратор правильно написал.
Вам надо сначала разобраться с формой и отправить данные. Если на сервере что-нибудь типа php - там и разрулить переходы на страницу с благодарностью.
Если данные должны отправиться используя ajax, тогда на JS писать асинхронный запрос на отправку, дожидаться успешного выполнения и только тогда переходить на страницу с благодарностью.
Если же вам просто нужно сделать образец верстки и по клику куда-то перейти - сделайте вместо submit формы обычный a href, который только выглядит как кнопка.
Александр Черемхин, отправка формы аяксом думаете сработает в таком варианте?
dintear_koden, подразумевается любой ваш код. Вначале блокируется обработка стандартного поведения браузера по обработке формы, затем уже ваша произвольная функция. Переход по href, к примеру.
Реально. Если на это тратить достаточно много времени и как можно больше читать и верстать.
Можно за полгода базу прокачать и идти на юниора-верстальщика в любую контору, куда возьмут на вырост. Без боевой практики знания улетучатся или останутся чисто теоретическими.
Ценность профи - в том что он решал сложные задачи и имеет в голове план действий. Не обязательно все справочные вещи держать в голове. Важно понимать процессы под капотом браузеров, принципы построения верстки и тому подобные фундаментальные вещи. Знать как пишется meta наизусть конечно похвально, но не обязательно, это легко найти. А вот знать, к примеру, что без строчки doctype верстка сломается - гораздо более ценное.
Флексы - это не сложно. Сложнее - гриды. Во флексах правил раз-два и обчелся.
Нужно знать то, что было до флексов. Чтобы видеть все прелести новых правил css =)
И плюс к этому - изоляция имени класса. Для каждого компонента класс будет генериться с уникальным префиксом. Т.е. получить конфликты по имени класса не получится.
В остальном полностью согласен с куратором.