Роман Вопроскин, помимо этого, хочу сказать, что ваша идея с этими классами повсюду -- может сыграть злую шутку при адаптивности, если злоупотреблять ими и использовать их неверно.
Антон Добрынин, будут возможны всякие казусы, связанные с тем, что flexbox не умеет управлять сразу и строкой, и строчкой. Если данные в одной колонке на одной строке будут сильно больше другой, он будет расстягивать эту колонку в строке, соответственно, из-за этого в эта колонка будет отличаться по ширине от других аналогичных в других строках.
Либо всё задавать опять в пикселях, процентах и т. п. Что как бы решает вышеизложенную проблему, но не очень.
Sam Fises, как такового курса не найдёте, так как вам надо знать CSS и HTML, как минимум. Большинство анимаций основаны на CSS-свойствах, но не все, более сложные анимации и взаимодействия делаются на JS и SVG (к примеру, GSAP) как дополнение к CSS.
В вашем случае вам можно сделать с помощью тупой смены значение свойств элементов по смене класса через JS. Почему JS: класс должен меняться не только при наведении (hover), но и оставаться в случае активного (focus) поля ввода и если в поле есть данные.
Иными словами, курсом «как работают transition и keyframes в CSS» вам не обойтись.
CryNet, а, мм, а что с планшетами? К примеру, строка с тремя элементами на полной версии.
Получается, на планшетах на какой-то строке будет по два элемента, а на другой — только один и пустое пространство? И всё в целом будет косое какое-то.
Словом, решение с одним контейнером выглядит наиболее привлекательно + media-запросы, но тут нужно понять, что точно нужно автору.
ProgerSoft, у меня для простых проектов есть один очень простой и тупо настроенный, но рабочий файл конфигурации. Он сначала собирает Less-файлы в один, потом компилирует его в CSS, потом проходит PostCSS с Autoprefixer + CSSNano, после чего пишется сам файл.
