Всем привет. Верстаю, использую кучу примочек, но верстка страницы всё равно занимает много времени (три-четыре дня в усиленном темпе на одну страницу средней тяжести). Интересует мнение верстальщиков - что еще можно добавить в инструментарий для ускорения?
Использую:
БЭМ, SASS (сокращения, переменные), Emmet, заготовленный шаблон для старта верстки (с готовой структурой), наработала снипеты (но обычно макеты разные, не всегда помогает), пиксель-перфект вместе с онлайн-хостом-релоадом, перешла на VSCode (отпала надобность в Gulp), вместо ФШ давно Avocode, наработала быструю схему работы (как могла). Думаю еще подключить webstorm для того, чтобы переносить данные из разработчика сразу в код. И всё равно всё остается очень трудоемким. Делаю разметку руками на флексах, пока адаптацию пропишешь для всех экранов - вечность пройдет. Бутстрап - только хуже делает, без него быстрее (да и костыль).
Прошу совета у бывалых. Может есть еще какие-то фишки, о которых я не знаю, которые могут повлиять на скорость верстки? Думаю о кусках кода по типу миксинов. Буду рада любым советам.
Покажите пример средней страницы. Тогда можно будет понять причину проблемы, которая может заключаться именно просто в вашей скорости работы из-за количества опыта, скорости ввода и т. п.
Например, я и мой коллега используем один и тот же набор инструментов, а я всё равно верстаю в два раз быстрее.
Рустам Байназаров, да, простую прописываю, если не сказали как, но это часто делается довольно быстро - буквально две строчки через transition, JS тоже прикручиваю по мелочи, по крайней мере весь интерфейсный скрипт.
Korsia, Три-четыре дня (по 8 часов считаю) на приведенный в качестве примера макет это многовато, как по мне. Максимум часов восемь. На крайняк десять.
Я обычно беру макет, полчасика втыкаю в него под чашечку кофе, прикидываю, как он будет выглядеть в коде. Потом Нарезка графики, всей сразу (потом удобнее автокомплитом быстро вставлять в код готовые изображения).
Далее полная разметка страницы с наполнением, без стилизации, но классы прописываю сразу (обдумал уже за чашкой кофе). Это самая нудная часть работы...
Ну и останется запустить локальный сервачок с лайфрелоадом и написать стили под все это дело. Это самая объемная часть работы, но и самая интересная.
В силу опыта многие стили пишутся на автомате, практически без участия мозга =))
По инструментарию, в принципе, всё то же самое - webstorm, gulp/webpack, два монитора, музыкальный плеер.
Жесть какая то, что я только что прочитал? Просто поток сознания. Перешла на висикод, отпала надобность в галпе. Как связаны между собой редактор кода и таск менеджер?? Зачем нужен вебсторм? Бутстрап костыль? Просто рука лицо. Автор иди поучи матчасть немного, чтобы у тебя каша в голове устаканилась.
А очень просто связаны. Что-то типа галпа вшито в vscode и мне не нужно запускать node, закидывать кучу хлама в папку с проектом и писать команды руками. А достаточно одну кнопку нажать и вуаля, все само компелируется, одна кнопка и локал хост открывается. Вебсторм даёт возможность переносить параметры, которые вы меняете в режиме разработчика, сразу в файл одним кликом, не нужно открывать док и искать параметр. А Бут - костыль и вы меня не переубедите. Он строго привязывает к процентам в колонке, ещё и превращает html в хлам. Когда не было флексов, он был хорошим вариантом, но сейчас я считаю его мертвым грузом для верстальщика. Для прогера - пожалуйста. Так что с матчастью у меня все нормально.
Korsia, с матчастью у вас все очень плохо. Вы не верстальщик, а недоверстальщик. Вы идите и погуглите для начала, что такое галп или вебпак, а то похоже вы, извините, просто как дрессированная мартышка выполняете какие то непонятные вам команды не понимая их смысл. Галп это менеджер рутинных задач, который выполняет любые написанные вами таски, от пост сиэсэс до сборки и заливки на хостинг. Это как сказать, у меня есть шапка, мне магазин одежды не нужен и ничего, что у вас зад голый? Если бы вы были верстальщиком и немного в теме, то знали бы что в бутстрапе 4 уже давно сетка на флексбоксах. Изначально, с момента выхода. Давно, это чтобы вам было понятно года три. Где вы все это время пропадали? В хлам я боюсь, что html превращаете вы с таким отношением, вы по какой методологии работаете, может и бэм для вас хлам? Как можно строго привязывать к процентам, вы о чем вообще? Вы понимаете вообще, что такое сетка и для чего она? А про кастомизацию сборки бутстрапа слышали? Любой инструмент расчитан под свои задачи, если вы не умеете использовать его это не значит, что он плох. Фреймворки, в том числе и бутстрап берут на себя множество опять же рутинных задач. Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей.
Уф, ну вы и зануда))) Вы всегда девушкам хамите, или это только мне сегодня повезло?
Я верстала на 4м Буте и не раз, знаю, из чего он состоит. Про кастомизацию тоже знаю. Ничего нового вы мне не рассказали, только вопрос зафлудили.
Korsia, почему вы пытаетесь прикрыться гендером? Вроде бы профессия никак с этим не связана. Верстали на 4 бутстрапе много раз, но не вкурсе, что он на флексах. У вас очень аргументированные ответы. Исходя из них, я и рекомендую вам освоить теорию, чтобы как вы выразились не делать адаптацию для всех экранов руками. Именно для этого и используются сетки.
Это всё нужно исключительно для того чтобы это всё готовое использовать в админках или в... других админках. В любом другом +- аутентичном дизайне в 99% случаев из бутстрапа берётся только сетка.
Сергей, ну модальники тоже можно взять к примеру, если нет особых требований, не самому же из писать. Или карусель, если лень ставить какой нибудь слайдер и тоже нет особых эффектов. Если в проекте используем jquery есественно. Сетка мне больше нравится у codyhouse framework, я ее использую, где есть возможность.
Vaultboy84, особых требований нет у программиста, у которого задача - реализовать свою функциональность, используя готовые css-компоненты, не отвлекаясь на написание css-кода. У верстальщика же в подавляющем большинстве случаев требования к верстке особые. Иначе, зачем он вообще тогда нужен.
Jack_Rabbit, да речь то не про бутстрап, а про то, что автор непонимает смысла инструментов, которые использует. Бутстрап костыль, бэм потому что модное слово, галп вшит в висикод. Автору говоришь, что он чушь пишет, а он спорит.
Vaultboy84,мне нравятся ваши выводы. Я прекрасно знаю, что Бут 4 на флексах, я как минимум спецификацию к нему читала, а как максимум там все позиционирование выстроено на флексах с соответствующими классами. Про Галп я образно вам рассказываю, что в vscode есть тот же набор функций, который я использую через галп, и мне с ним проще, но вы прикопались что якобы я не знаю, что это. Вы серьезно думаете, что нормальный верстальщик может не разбираться в инструментах, с которыми работает? Он тогда не может ими нормально пользоваться.
Vaultboy84 Какой-то странный ты...
Сначала расписывал какой бутстрап хороший инструмент, потом Jack_Rabbit объяснил почему это не так и ты сразу "да речь то не про бутстрап", а про что? И не надо говорить что кто-то чего-то не понимает, имхо, в данной ситуации ты не понимаешь...
Какие к чёрту "Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей"? Есть хорошие плагины для всего этого или это пишется всё руками. Ты не в состоянии инпут стилизовать руками? Тебе для этого нужен бутстрап? Если это так, то это тебе нужно учить матчасть.
Единственное, что меня удивило, что автор от галпа отказалась, но видимо галп использовался для совсем лёгких задач, что плагины в vscode смогли его заменить.
IIIu6ko, да, в принципе так и есть, с компиляцией, лайвсервером, спрайтами и прочими мелочами vscode справляется, что-то страшное я на нем не делаю. Если бы делала, думаю, вопрос, который я задала, не особо бы стоял, это уже другой уровень в профессии.
IIIu6ko, ну наверное даже такой идиот, как ты должен понимать, что каждый инструмент хорош для своих задач. Автор написал, что бутстрап это костыль, а я ответил, что это инструмент. Что ты тут вылез и что хочешь сказать абсолютно не понятно. Не поверишь но во многих админках, интерфейсы которых внезапно тоже верстают, часто используется дефолтный дизайн бутстрапа для скорости разработки. К тому же зачем мне ставить какие то специальные плагины. Из перечисленного, переменные для стилей это удобно, зачем их создавать по новой, когда они уже есть, сетка в бутстрапе вполне себе юзабельная, модальные окна не то, что плагин, я сам могу написать, но вопрос зачем, если они есть из коробки с разметкой уже готовой, слайдеры я юзаю все топовые и slick и owl и swiper, но если обычная карусель, зачем мне городить огород, тултипы тоже самое, можно написать, можно скачать плагин, иногда достаточно тех что есть по дефолту в бутстрапе. Остаются инпуты на которые ты перевозбудился. Ну и собственно в чем суть твоего месседжа? С твоими вопросами тут на тостере про то как скрыть бордер у предыдущего элемента и г*внокодингом на джс с var в 2018 году уж точно не стоит кукарекать про матчасть.
Vaultboy84, автор написал, что бутстрап - костыль для нетипичной верстки и всё еще на этом стоит. Если мне нарисуют дизайн, состоящий из типичных бутовых кнопочек и формочек, то всегда пожалуйста, с удовольствием сокращу себе время на верстке.
Korsia, это исключительно ваши проблемы, что вы не понимаете, как работают сетки, а так же не понимаете, что у бутстрапа существует компонентный подход и вы берете, что вам нужно в конкретной задаче: только сетку, сетку и какие то скрипты или не берете ничего и не используете вообще. Если вам нужно забить гвоздь не обязательно для этого брать монтировку, лучше взять молоток, но это не значит что монитровка - костыль для забивания гвоздей, это значит что вы идиот не способный выбрать правильный инструмент.
По поводу адаптива
Гугли в сторону smartgrid Дмитрий Лаврик. Увеличишь скорось на x2.(это как раз с миксинами связанно).
Препроц pug, haml, jade, выбирай у котороги синтексис проще сам использую pug для него желательно gulp
Посмотри в сторону time menedgment. Техника помидора
Сделай правило если сидишь над блоком больше n- минут переходи к другому(имеется ввиду если делаешь какие-то исправления и погоняешь под пиксельперфект), пусь будут недочеты, подправишь в самом конце.
Все фигня. Ускорить верстку можно на порядок, если не смотришь на экран после каждого изменения.
Учитесь верстать определяя на глаз цвета, отступы, размер шрифтов и большинство вещей.
Когда верстаете, то у вас в голове должна быть картинка того, что вы пишите в css и чем больше профессионализм, тем меньше расхождения между реальностью и картинкой в голове.
Остальные вещи не так ускоряют верстку, как такой навык
Это конечно да, но например в моей текущей компании два этапа тестирования, плюс критично относятся к pixel perfext вплоть до letter-spacing в 0.1 px может баг прилететь, так что вначале то можно кидать размеры на глаз, но потом все равно приходиться подгонять все свойства более детально.
McBernar, facepalm. Читайте дополнение и смотрите ссылку, что скинул, чтоб понять о чем говорю.
Еще дополню ссылкой на челендж, чтоб окончательно было понятно о чем говорю code the dark
jamtuson В принципе, есть правильные мысли, но их меньшая часть.
Цвета нужно заранее в переменные занести, а не определять на глаз. Также с размером заголовков, возможно какие-то отступы между секциями и т.п. повторяющие стили.
А определять на глаз - это чревато тонной правок на этапе сдачи проекта.
Лучше разделить вёрстку на 3 этапа:
01. Пишем разметку
02. Пишем стили
03. Делаем пиксельпёрфект
Теперь подробнее:
01. Выбираем элемент, либо секцию, либо можно вообще всю страницу и пишем сразу разметку представляя в голове расположение блоков и элементов + придумываем классы для всего этого.
02. Пишем стили для разметки, но без отступов. Просто раскидываем флексами, задаём размер шрифтам и т.п.
03. Ровняем всё отступами, текст подгоняем и т.п.
В итоге, мы получаем пиксельпёрфект вёрстку без придуманных цветов и отступов на глаз и кучи правок на сдаче. Чем больше таким способом будет сделано проектов, тем быстрее будешь всё это делать.
Да - да, так и есть)
Вообще, пишу так:
1. Всю разметку по бэму.
2. Забираю стили через ecsstractor
3. Прописываю цвета в переменные, создаю миксины под повтоярющиеся элементы, подтягиваю свои миксины на разные случаи и свою sass-сетку
4. Пишу стили
5. Правлю места, где поехало
Думаю, проблема здесь не в инструментах, а в самой скорости работы — скорость печати, умение быстро принимать решения, умение правильно раскладывать верстку на блоки, возможно, где-то пишете лишнего, когда можно просто взять либу, возможно, вы работаете на фрилансе с дизайнерами-идиотами, у которых по 40 видов стиля для заголовков.
Уверен, придет с опытом.
С инструментами у вас все хорошо. И не слушайте тут никого, кто «вертел бэм и галп».
Вы думаете они использовали ради обычной верстки столько вещей? У них был макет, редактор/ide и гугл.
Да и советую вам использовать "технику":
получили итоговый дизайн, возьмите и наглядно определите для себя прототипы (количество блоков, вложенности и прочее) потом от общего переходите к частному. Если ради скорости(упуская качество кода) то используйте готовые css/js либы.
Но лично я делаю как выше описал и в последнее время по минимуму использую либы.
Сначала фасткодинг, а потом уже чистка кода, правка багов
получили итоговый дизайн, возьмите и наглядно определите для себя прототипы (количество блоков, вложенности и прочее) потом от общего переходите к частному.
Я делаю именно так в работе. Сначала продумываю структуру, потом только берусь верстать. За счёт sass+бэм просто копирую стили для повторяющихся элементов кода и вставляю. Больше повернута на качестве, потому медленная скорость раздражает.
Это актуально, если макет "без претензий". Если с выподвывертом, то библиотеки не прокатывают. Ну или я не понимаю, о чем Вы. Что-то типа wow.js, animate.css и прочее? Они не сильно то время экономят. Сильней всего css отжирает время и позиционирование блоков.
За счёт sass+бэм просто копирую стили для повторяющихся элементов кода и вставляю
эм, БЭМ подразумевает что вы не будете дублировать код. тут пример
А как вы сетку пишете? Каждый раз заново и для всех разрешений?
Миксины сами собой еще никакие не образовались?
У меня за первые 10 макетов уже была тележка миксинов(потом они подрезались)
Andrew, БЭМ подразумевает, что я не дублирую код в html. В css дублирую код. Сейчас покажу, как это выглядит.
У меня все блоки имеют стандартизированые названия. Допустим, main-header__description, main-footer__description, services__list, about__list, main-header__title, main-footer__title. И если в разных section есть одинаковые элементы по стилям, то они чаще всего носят одинаковые названия за исключением названия раздела. Я просто в sass копирую весь код начиная с апперсанта &__list/&__title (и т.д.) и переношу его в нужный раздел. Это классическая связка БЭМ+Sass.
Сетка на всех макетах разная, приходится по новой писать, да. Я миксины пока заменяю переменными. Но планирую ввести.
Брэйкпоинты и контейнеры теже, нет? - поменяли 1 переменную и в бой.
Ну конечно те же. По большей части брейки одни и те же, контейнер бывает разный, в основном 1170 под бут. Ну так это же по сути не сетка. Сетка - выстраиваемость блоков, по крайней мере в моем понимании. А она везде разная.
Денис, теоретически да, пишешь им два класса, общий и основной. Но мне так проще и быстрее, потому что часто бывает, что стили одинаковы, но у одного - падинг меньше и черточка, а у другого цвет другой. Мне быстрее скопировать и разницу поменять тут же, чем перебивать ее доп. стилями.
Korsia,
А потом вам заказчик говорит " милочка, а сделай-ка мне у заголовка шрифт не 20, а 25" И вы 15 раз в 15 разных местах меняете размер шрифта, вместо того, чтобы поменять это в одном месте.
Все повторяющиеся стили - в один блок, все различающиеся правятся миксами или модификаторами. По БЭМу код не должен дублироваться ни в хтмл, ни стилях
Денис, у Вас были такие случаи? Я вначале всё добросовестно выносила в переменные, добавляла общие классы потому что "а вдруг заказчик захочет все "___" сделать такими-то". И знаете, сколько раз мне это пригодилось? Правильно, 0. А трудозатрат больше. От того, как я делаю, общая логичность кода не меняется, только стоит угроза менять 7-8 раз одну строку в коде вместо 1го. И пока эта угроза ни разу не подтвердилась.
Все повторяющиеся стили - в один блок, все различающиеся правятся миксами или модификаторами
Верстка сильно быстро отучает быть во всём правильным и дотошным)) Потому что по большей части это никому не нужно.
А как долго у вас на поддержке висят сайты?
Просто если вы верстаете и сдаете работу, не возвращаясь к ней больше, у вас ничего подобного и не произойдет.
Ну вы поняли господа уровень упоротости. Бэм это тупо красивое слово в данном случае у барышни)) стандартная связка сасс и бэм, ахах)) ну а тот кто будет это все поддерживать дальше очень сильно порадуется. А как вам пассаж про то что сетка это выстраиваемость блоков, а она везде разная))
теоретически да, пишешь им два класса, общий и основной. Но мне так проще и быстрее, потому что часто бывает, что стили одинаковы, но у одного - падинг меньше и черточка, а у другого цвет другой.
Это ты щас описала миксы, когда два класса смешиваются (.title.section__title), но в случаи, который ты описала выше можно ещё использовать и модификаторы. Ничего не придётся копировать в css, просто пишем <div class="block block--color">
и в css меняем цвет, аналогично для отступов, но для отступов лучше всё-таки миксы, да.
Это правильная методика, которая не просто так была придумана. Весь смысл БЭМа теряется, если не реиспользовать стили.
IIIu6ko я в принципе, по работе уже пришла к тому, что мне тут пару товарищей втолковало)) Так что всем ребятам спасибо за советы.
Модификаторы я использую внутри одной section чаще всего, когда есть один блок и его вариации. Миксы, наоборот, для похожих элементов в разных секциях. Так мне потом легче читать разметку.
Из необычного, пожалуй могу посоветовать, написать дополнительный скрипт на bash или node для быстрого создания блоков - по типу открыл проект в консоли, прописал что то по типу "new-block name-new-block" и автоматически создается html файл этого блока с базовой разметкой и классами (с именем этого блока) + этот файл подключается в нужный основной html файл (использую gulp-rigger для таких целей) + классы также автоматом добавляются в конец основного файла стилей, ну и проверку на существование блока не забудьте что б не перезаписывать существующие + можете под себе и свою структуру модернизировать скрипт как хотите: по типу отдельная папка для каждого блока и тд.
Из того что я прочитал в твоих комментариях, то я думаю что ты примерно делаешь что и я в свое время.
Рекомендую связку BEM + Atomic css.
Например у тебя есть несколько блоков и них есть заголовки.
вместо:
.block1__main-title
.block2__main-title
пишешь
block1
h2 class="text text--20 text--uppercase text--gray-lite text--space-05 mb-20
block1
И теперь если к тебе прибегает дизайнер и говорит, ой надо срочно поменять в blocke1 размер шрифта с 20 на 24, ну не проблема , быстро в html меняешь один класс и погнали.
Я когда первый раз услышал мне идея дико не понравилась у меня же есть BEM, НО в чем плюсы.
первое берешь из bootstrap flex утилиты(d-flex, justify, align-content...), и половина вложенных блоков по BEM пропадает.
И самая вкусная фишка все это дело можно использовать с брейкпоинтами, например
pl-20 и pl-md-35. Это так экономит нервы, когда прибегает дизайнер, ой тут короче на вот это страницу в этом блоке тут внизу надо немного текст поменять и да, еще padding слева и вот тут еще давай кнопулечку справа добавим, и да это только на этой странице, на других давай все оставим все как есть.
P.S. Вообще лучше на живом примере посмотреть твою верстку, и дать какой то совет.
Спасибо за дельный совет!
В последнее время все работы идет под натяжку на ВП, поэтому от чистой разметки почти ничего не остается.
Вот, единственное, что нашла из последнего без натяжки. За макет не обессудьте, не я его рисовала)) https://www.zinkevich.pro/
Не очень удачный пример для разбора, сайт простой в основном галерея картинок.
Жалко нет source files, мои рекомендации предполагаем, что проект развивается добавляются новые страницы:
1. все script в конец body, можно добавить скрипт для асинхронной загрузки.
2. не нравиться
.main-header__bottom > .container (вложенность не по БЕМ)
и просто легко запутаться, если я вижу .container я ожидаю что это какой стандартный контейнер для этого медиа, а тут получается в разных блоках разный контейнеры, потом будешь терять время вспоминаю где какой.
Так что лучше задать в отдельном файле, брейкпоинты и контейнер + сетка по желанию.
3. main-header__button, все кнопки в отдельный sass файл(экономишь время) и все кнопки идут через модификаторы, потом дизайнер где нибудь еще такую кнопу захочет.
class="btn btn--page-scroll"
4. main-header__social-list можно использовать просто тег nav
5. ссылки в отдельный файл, дизайнер точно захочет ссылки добавить еще на какую нибудь страницу или блок.
main-header__social-link
class="link link--social link--fb"
6. svg дело вкуса, но мне больше нравиться. В отдельный файл все иконки, и вешаешь иконки на background-image
i class="icon icon--fb icon--fb-white" /i, потом легче искать, проще менять размеры, и не будет косяка с дублирующими id у элементов.
7. p class="main-header__bottom-name" Marina Zinkevich /p
рекомендую заменить на
p class="text text--16 mb-10 text--lh-12". 100% потом дизайнер захочет точно такой же текст где нибудь в футере на новой странице.
8. .main-header__bottom-tel a
a href="tel:+16098331277" +1 (609) 833 1277 /a
уже писал (вложенность не по БЕМ)
a class="link link--pink text--16 mb-0"
9. main-header__button зачем span внутри, сразу же можно повесить иконки через псевдо элементы на саму кнопку.
Если я правильно вижу, ты медиа пишешь в отдельном файле, лучше сразу в блоке, потом будешь много времени тратить прыгая по разным файлам.
Ты не используешь gulp, а что за плагины ты используешь для VS, чтобы сжать css, js, оптимизировать фотки ?
Проект простой, но в целом все хорошо, верстка не разваливается, ошибок в консоли нет. Разметка четко по БЕМ.
Надеюсь мои советы ускорят тебя :)
P.S. Посмотрел script, почему все функции не в одном $(document).ready(function () {}) ?
Большое спасибо!!! Отличный разбор, хоть видно, над чем можно будет поработать.
.container - один универсальный для ограничения блоков по размеру сетки, он везде одинаков, только изредка я его делаю флекс-родителем для частного случая. Со скриптом да, до этого сама мозгами дошла, теперь все в одном. А со всем остальным - замечательно, буду разбираться.
Года полтора открыл для себя LESS, стало чуть быстрее (у вас SASS, еще круче). Не видя макетов, трудно оценить трудозатраты, но лично я сначала делаю десктопную версию, потом адаптивную. First mobile вертел сами знаете где (бэмы, галпы, и прочее где-то там же вращаются). Надеюсь, вы не делаете блок, а потом судорожно под него адаптив пишите, как некоторые товарищи? Как вариант, можно сначала набросать структуру, а потом оформлять, но это если у вас в голове структура выстраивается хотя бы на 90%.
Я не люблю мобайл ферст, он предполагает от простого к сложному. Мне проще сделать сложное, а потом простое, т.я. иду от десктопа по убывающей.
Надеюсь, вы не делаете блок, а потом судорожно под него адаптив пишите, как некоторые товарищи?
А как можно по другому? Просветите)) Тем более часто заказчик имеет макет с мобилой, тогда сразу логику адаптации продумываешь. Да и вообще ее сразу продумываешь.
Как вариант, можно сначала набросать структуру, а потом оформлять, но это если у вас в голове структура выстраивается хотя бы на 90%.
sashabeep, Ну этот да. Этот скорей очень типичный. Но в 4 часа я бы все равно не вложилась однозначно, пока графику вытащишь, пока шрифт сконвертируешь, пока структуру продумаешь, потом писать html, css, js. Не знаю, как такое за 4 часа возможно
sashabeep, ну а если постараться, то можно и минут за 40 управиться, ну или за час, если прерываться на кофе. Там всего лишь каких-то 10-12 секций с менюшкой. В действительности, я на этот комментарий потратил больше времени, чем потратил бы на верстку этой тривиальщины.
sashabeep, вот взял бы и вместо того чтобы тратить время на такой большой коммент, запилил бы на кодепене вёрстку ну хотя бы половины макета.
А если бы расщедрился и подарил нам еще минут 20 своего личного времени, то и цельный макет успел бы сверстать. И там же на кодепене нам продемонстрировать. А?
кстати
2. Верстаешь по максимуму из стандартных фреймворковых компонентов, переопределяя только стиль, фон и другие пару мелочей.
sashabeep, к тому, что зачем здесь бутстрап?
Какой профит от него, если почти все стили из него приходится переопределять?
А те что не приходится можно и самому накидать.
sashabeep, Мне бы хотелось посмотреть на уже сверстанный сайт, посмотреть принципы построения сетки и адаптацию основных крупных блоков, особенно нетипичных. Я не часто встречаюсь с версткой на фреймах, даже переверстываю обычно голый код, поэтому
99% любых шаблонов с любым фреймворком
- не по мою душу, чисто профессионально интересно. Можете не свой кинуть, просто типичный пример (нормальный только).
По поводу кусков кода и компонентов - любой верстальщик с опытом - сам ходячий фреймворк. Все эти карточки, шмарточки, бургеры, модалки и прочие типичные блоки уже есть заготовленные отдельно и кочуют с проекта в проект, только меняешь им стили под конкретную задачу, не сильно большое отличие от бута. А сетка вообще легко пишется.
Если вы под версткой имеете в виду процесс создания, то так:
Установить browser-sync чтобы быстрее проверять код, использовать специализированные для верстки редакторы с возможностью использовать плагины например emmet, открыть stackoverflow и удачи)))
Фигня какая-то. В верстке (как и в любом кодинге) основное время занимает не написание кода, а продумывание того как все сделать поддерживаемым и хорошо работающим. Сам код написать это 3% времени.
Не знаю)) У меня это происходит в процессе написания кода само собой, как часть процесса. Конечно бывают моменты, что пару часов долбишь блок, чтобы он работал нормально в условиях переполнения контента. Но про 3% мне кажется, Вы утрировали.
правильно думаете. все верно, используйте дальше все эти инструменты. чем дольше будете использовать, тем лучше будет получаться.
+ используйте pug, если раньше без шаблонизаторов обходились.
Тут обо всё уже написали, хотел бы добавить - Используй 2 монитора, если есть такая возможность. На одном мониторе Avocode (вместо фотошопа) для снятия размеров, цветов, копирования текста. На другом мониторе удобно расположенные редактор кода, терминал и браузер.
Почему никто не написал про прекрасный tailwindcss (https://tailwindcss.com/)?
Экономит время как минимум на 4 вещах:
1) Не нужно постоянно придумывать названия для классов. Для простых не повторяющихся компонентов мы можем просто использовать классы-утилиты tailwind. (пример использования показан на главной странице https://tailwindcss.com/)
2) Позволяет делать адаптацию практически всех свойств CSS минимальными временными затратами (https://tailwindcss.com/#responsive-to-the-core)
3) В этом фреймворке нет как таковых "компонентов", есть только "утилиты" из которых вы собираете свои компоненты. А это значит что фреймворк не навязывает никакие свои стили, которые приходится сбрасывать (как это делают популярные фреймворки по типу бутстрапа) (https://tailwindcss.com/#component-friendly)
4) Позволяет настроить практически все для своих нужд (начиная с брейкпоинтов, заканчивая размерами отступов, шрифтов и т.д) (https://tailwindcss.com/#designed-to-be-customized)
2) В бутстрапе (и ему подобных фреймворках) адаптация на основе классов ограничена только свойствами связанными с сеткой, в случае с tailwindcss можно адаптировать практически любое CSS свойство
3) Речь идет о простых компонентах по типу кнопок, элементов ввода и т.д. В частности, почти всегда стили компонентов бутстрап-подобных фреймворков приходится подолгу переписывать под свои проекты. На мой взгляд написать их с нуля на утилитах будет гораздо легче, быстрее и лаконичнее.
4) Ок здесь и правда ничего выдающегося, но настройка все равно намного легче чем в бустрап-подобных фреймворках. Хотя бы потому что не нужно ковыряться в файла и искать нужную переменную в тоннах кода, а конфиг удобно создается из командной строки
Atomic-CSS на стероидах? Концепия известная, все плюсы (порог вхождения) и минусы (говнокод) давно перетёрты. Подходит в случае если проект небольшой, несложный и с кратким жизненным циклом. То есть примерно: нужно быстро нафигачить небольшой лендосик, а потом через некоторое время мы его просто выбросим, а вопросы поддержки нас не парят от слова совсем. Во всех остальных случаях отказать.
dom1n1k, Можете привести пример с проблемами поддержки кода? Код как раз таки всегда выглядит логично и лаконичным как по мне. Если нужно обеспечить модульность, можно использовать утилиты в CSS:
Ну вообще говоря да.
Я вижу в этом коде просто наложенный поверх лишний уровень абстракции, который не несёт никакого полезного действия, кроме другого нестандартного синтаксиса. Конкретно в данном случае - что мы выиграли? Неужели писать @apply font-bold намного быстрее, чем font-weight: bold? Вряд ли, а с учетом помощи ide возможно даже медленнее. А читать многочисленные сокращения сложнее. А если писать в одну строчку, то ещё менее читабельно.
При этом вопросы организации кода эта система не решает вообще никак. Никакой структуры, семантики, переиспользования и вот это всё. Знаете, это похоже на детские игры, когда дети придумывают свой "иностранный язык" - в реальности, конечно, никакого языка нет, есть только собственный алфавит из необычных значков. А для пущей загадочности можно писать справа налево. Зачем? Да ни зачем, прикольно же.
Простой
Простой
