Какой подход (библиотеки, фреймворки) используете при верстке UI?

Question

[Александр]

Верстаю веб-страницы. Использую Jquery немного. Всякие красивые чекбоксы, радиобаттоны и прочие интерфейсы верстаю вручную, и естесственно адаптивно. Но довольно простые вещи. Получается легкий код, без лишнего и html, и скриптов тяжелых. Возможно, это все делается с помощью каких-то инструментов, фреймворков, библиотек? Прошу рекомендаций и опишите свой опыт. Только плиз не просто название технологии, а что, зачем, и как используете.
Спасибо.

Answer 1

[Сергей Горячев]

Bootstrap?)))
Foundation?)))
Material Lite?)))
И не вижу смысла описывать, что и для чего, это фреймворки, бери и верстай.
UI или не UI, тут роли не играет, хотя конечно для UI они почти идеальны.

Comments

[Александр]

Bootstrap - давно слышал, но лишний код как по мне и так к моему WordPress, когда мне нужно только пару форм красивых сверстать.
Foundation - слышал, но не вникал. Даже не знаю, зачем фреймворки если честно.
Material Lite - первый раз слышу, надо вникать значит.
Я вообще не в теме, зачем все эти решения и нужны ли они мне для данных задач.

[Сергей Горячев]

Александр: Если только одну форму делать, то нафига тогда вообще готовые решения? Ты сам себе противоречишь. Дайте готовое, но готовое я не хочу, так как много весит.

[Антон]

Александр: Лишний код? Тогда советую, если занимаетесь версткой начать уже изучать инструменты для верстки такие как Gulp, webpack и другие интересные штуки, они удаляют не использованный код и оптимизируют все, что нужно и что вы захотите.

[Сергей Горячев]

Александр: Вообще, все зависит от конкретных задач. Если нужно что-то вроде этого mail.psdstock.ru/uploads/article/svetliy-ui-kit-fr... , то конечно фреймворки будут намного удобней в работе. А если просто сайт и форму, то нафига всё это не нужно. К слову, твой вопрос про верстку UI, а не про верстку просто сайта с формой. UI это более широкое понятие, чем просто форма.

[Ярослав Иванов]

Антон Хлебников: а галп удаляет лишний код ? Он сравнивает классы в css и html ? Не слишал про такое. Можно по подробнее ?

[Антон]

Ярослав Иванов: ну при необходимости использования этого в gulp можно использовать gulp-uncss

[Сергей Горячев]

Антон Хлебников: Фигасе, какая крутая штука) Взял на заметку)

[Максим Тимофеев]

Александр:

Bootstrap - давно слышал, но лишний код как по мне и так к моему WordPress, когда мне нужно только пару форм красивых сверстать.

Вот WordPress - это лишний код. А Bootstrap это два файла, тем более что можно его настроить и взять только необходимое getbootstrap.com/customize а в связке с Gulp вообще минималистично все будет

[Сергей]

Действительно странно слышать про лишний код от того, кто использует WordPress...

[Александр]

Сергей: моя задача как фрондтендщика - по необходимости только использовать сторонний код и оптимизировать по PageSpeed Insight. А то, что бекенд в проекте сделан на WordPress, где куча ненужного - я тут не причем.

[Александр]

Максим Тимофеев: благодарю за внятные аргументы! буду разбираться)

Answer 2

[Максим]

Всякие красивые чекбоксы, радиобаттоны и прочие интерфейсы верстаю вручную, и естесственно адаптивно.

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

Пример, для material design - https://getmdl.io/components/index.html
Там есть github и можно посмотреть код любого компонента... а можно просто взять сразу готовый и использовать, при этом не писать самому.

Другой пример: есть популярный bootstrap, есть у него сетка, по этой сетке делается много однотипных сайтов, дизайнеры по ней рисуют сразу изначально, в итоге у рядового "конвейрного" мастера по лендингам (ничего плохого не имею против таких специалистов) очень сильно понижается затраченное время на выполнение задачи по адаптивной верстке.
===

По технологиям: вы верстаете, так наверное, используете gulp? Если нет - то пора, получите live reload (не нужно перезагружать страницу), сможете оптимизировать ваши скрипты/стили/картинки... и все это будет сильно высвобождать ваше время.

Comments

[Александр]

Значит при том вы ведете какую-то свою "библиотеку подобных элементов"?
Нет, с нуля все верстаю, тем более всегда все новое и разное.

[Максим]

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

[Александр]

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

Answer 3

[Владимир Владимирович]

для создания мобильных приложений на основе html+css рекомендую framework7)

Comments

[Александр]

Спасибо, но я сайты делаю.

Answer 4

[Sanes]

https://getuikit.com/