Это форма.
В ней input type search.
В теории, у него есть свой, встроенный, крестик в хроме и сафари.
Если этого недостаточно, то делаете после инпута button reset. Стилизуете и позиционируете абсолютом или гридами в угол инпута.
Кнопку отправки просто скрываете. Но форма отправится и по энтеру в поле поиска.
Лупа - если всё инпут раскрывается при фокусе и собирается при отсутствии текста и фокуса, то это просто фон инпута (или формы, если так больше нравится).
Если по лупе всё таки, как вы пишете, нужно кликать, то это кнопка с типом button, меняющая класс форме. Этот класс показывает инпут и крестик.
KrisTeylor, при aspect-ratio больше единицы все прекрасно работает https://jsfiddle.net/u3mewhLs/
Т.е. если во время изменения ширины вьюпорта aspect-ratio не становится <1
Я вижу список из каких-то пунктов, украшенных иконками. Между ними пунктирные линии.
Вставляются псевдоэлементами с border dashed или градиентами.
Или градиентом прямо на фон обертки.
Или ещё как-нибудь.
Вот пример градиента
background: linear-gradient(to right, red 16px, transparent 16px) repeat-x left center / 20px 2px;
Надеюсь, к галпу вы придете.
Обычно это происходит очень быстро, после того как пару раз ручками засунете код в автопрефиксер и минификатор и пересохраните прод-версию. Или 10 раз внесете правки в футер на 10 страницах.
Но не торопитесь. Не нужен и ладно. Когда поймете, что пора - разберетесь.
Сейчас важнее семантика, валидатор, доступность, разумные стили и т.д.
uvv99, в моей песочнице нет никакого Gulp (если он скрывался под псевдонимом culp) и npm. Там даже препроцессора нет, обычный CSS.
Использовать сейчас, при наличии флексов и гридов, бутстрап ради сетки ну такое себе...
Но вы можете переписать суть на классы бутстрапа, если вам так хочется. Заодно сравните количество кода ;)
1. Во-первых, уже есть clamp. И если поддерживаемые браузеры позволяют, то эта дичь с формулой больше не нужна.
2. Во-вторых, задавайте line-height коэффициентом, без указания единиц измерения и всё будет хорошо.
