Верстка вживую

11 March, 2014

тусовка

Я туплю, опечатываюсь, в видео нет никаких звуков. И оно еще и проигрывается в два раза быстрее чем нужно.
Не знаю зачем вам это смотреть, но если интересно как я сверстал какой-то макет за примерно час, смотрите :)

Можно фулскрин

Результат: github.com/akella/screencast. Я ничего не исправлял кроме того что сделал в видео, хотя естественно макет не попиксельно точный, и могут быть какие-то мелкие неопрятности.

Буду рад комментариям или советам как это делать еще быстрее чем я это делаю сейчас. Я за то чтобы делиться опытом.

Ну и буду рад если кому-то окажется полезным :)

Использованный мною софт

Это наш маленький верстальщицкий флешмоб, если вам интересно:

тусовка

56 комментариев к “Верстка вживую”

Вадим Макеев | 1. 11 March, 2014

Вроде бодро и хорошо, было интересно посмотреть. Только две вещи заставляют меня грустить: текст в меню капсом, а не text-transform:uppercase и иконки с помощью <i>

akella | 2. 11 March, 2014

Честно, это случайно :) там в других местах я делал капсом, с меню просто не обратил внимания видимо. Там еще есть пару мест которые я знаю я пропустил) Но издержки времени.

И вообще :) могу сказать что это расширенный функционал и возможность использовать и маленькие буквы в навигации :-P

Артем | 3. 11 March, 2014

Молодец Юра, как всегда на высоте!

Bakyt | 4. 11 March, 2014

Во как надо верстать!

Руст | 5. 11 March, 2014

Забавно, именно этот макет я верстал пару недель назад

Роберт | 6. 11 March, 2014

Крутое, видео, спасибо :)

Через что записывал видео?

Клево размеры меришь в PS, и зен кодинг знатно экономит время вместе с SASS, только SASS выглядит ужасно…

Выложи на github pages результат, что бы проще посмотреть.

akella | 7. 11 March, 2014

@Руст – нашел на фрилансе, там кто-то жаловался что заказчик их кинул, я решил заменить лого и взять.

@Robert – я через Screenflow =) Вот http://akella.github.io/screencast/

Роберт | 8. 11 March, 2014

Смотрю http://akella.github.io/screencast

1. Поскупился на ховер стейты.
2. Cтранные каскады .expert > .expert__content и тп. это для надежности, что бы всегда указывали названия блоков? В .header .social точно лишний каскад.
3. Слишком упрощает местами – .nav a, в навигации точно может появится линк другого стиля.
4. Не хватает title в social кнопках, читалки не прочтут.
5. Еще одна соц кнопка все поломает http://d.pr/i/bGUN
6. Тут уже что то поломалось http://d.pr/i/69M7
7. Иконки я бы все таки делал отдельными блоками http://d.pr/i/uf3J
8. Много флоатов я бы заменил на инлайн-блоки

За styledocco респект, всегда используешь? В нем правда что то сложней чем кнопки сложно описать :) И странно что он в отдельном scss

И молодец что в препроцессоре не создаешь динамически названия классов.

akella | 9. 11 March, 2014

Тут важно разделять, мы делаем одноклассники-яндекс-мейлру, или обычный сайт. То что ты говоришь правда, но только для определенных сайтов. И конечно их за час не всегда сверстаешь :)
1. В макете их не было же
2. Больше для создания визуальной иерархии в Sass, так лучше парсить глазами код, а то что в цсс, я же туда и не заглядываю. Экономия на байтах в данном случае я считаю не стоит читаемости кода.
3. Я видел другие 10 макетов, ничего там так и не появилось.
4. Не думаю что это кому-то нужно, честно. Это конечно идеологически-вебстандартистски правильно, но почти бесполезно в обычных макетах :(
5. Да, ты прав, чтобы не поломала, можно добавить еще один див :) Но добавлять его мне было лень, так как это все же не контент зона, в которой динамическое содержимое, а просто статичный блочок в хедере.
6. Точно, забыл указать position:relative для topline__in. Ошибка.
7. А какой в этом смысл? Если известно что там внутри больше ничего не будет?
8. А я наоборот, инлайн блоки менее предсказуемы чем флоаты в целом :( Дело вкуса.

Styledocco – почти никогда, это тоже мало кому нужно. Для пары проектов только.
Почему сложно описать? Вроде обычно там любой блок описывается, достаточно просто. Копипаст хтмл. В отдельном CSS чтобы не забыть какой там у них синтаксис для документации. Если вдруг понадобится =)

А динамические названия классов это как? .header__&? Это же ужасно нечитаемо, да и нельзя так в Sass к счастью или сожалению.

Артём Сапегин | 10. 12 March, 2014

Долго не мог понять, почему всех комментаторов зовут Мартами :-)

Было бы круто перечислить все необычные программы (PNG Hat, например), плагины для Саблайма и прочее.

akella | 11. 12 March, 2014

Красивое имя кстати! :) Подправил, четвертый хостинг за год, все ломается все время :)

Сейчас проапдейчу пост.

Александр | 12. 12 March, 2014

Очень интересно было посмотреть. Вот как нужно верстать!

spamforhope | 13. 25 March, 2014

Почему не используете переменные для цветов, а каждый раз берете picker-ом?
Там 3-4 которые можно было сразу вывести в переменные.

А видео отличное! Полезно посмотреть как верстают люди, которые имеют по 5-6 проектов одновременно. Можно список всей софтины, которую Вы используете?

akella | 14. 25 March, 2014

Так в конце поста ж список всего софта? Или там чего-то не хватает?

У меня с переменными не срастается почему-то, то ли дизайнеры не так часто повторяют цвета, то ли лень каждый раз вспоминать как я ее назвал, то ли никогда это толком так и не пригождалось. Да и пикер быстро работает, как-то так.

spamforhope | 15. 27 March, 2014

а, не увидел, спасибо!

talgautb | 16. 31 March, 2014

пишу еще раз :)
во-первых, круто спасибо, такие видео давно ждал)
Вопросы, которые вспомнил:

1. почему “динамические классы” ужасно не читабельно? разве все не используют .lt-ie8 & и т.д. + все дети блока под ним, что визуально удобнее, не? Может я чего-то не знаю, или это дело вкуса ?)
2. В ST используешь плагин Nettuts+ Fetch ?
3. я немного не понял как добавляешь комментарии в html блоки ?
4. я проглядел или в видео есть, откуда sprite взялся ?
з.ы. почему не используешь humans.txt было бы удобно знать кто сверстал и с помошью каких инструментов :) ?
еще раз спасибо, очень полезно и интересно, некоторые вещи стащил))

Михаил Якименко | 17. 3 April, 2014

Юра, хотел спросить а что за color scheme у тебя в саблайме в этом видео?

Дмитрий | 18. 5 April, 2014

Пока ты там кнопки справа в фотошопе двигал, у меня чуть эпиллепсия не началась.

akella | 19. 5 April, 2014

@Михаил https://github.com/buymeasoda/soda-theme/

@Дмитрий, да у меня и самого :) Это странный глюк связанный с моим Keyboard Maestro, он нажимает автоматически в разные части экрана, но если я в этот момент двинул мышь, он дрэгает эти элементы и происходит фигня. И да, у меня тоже чуть не началась :)

heliogracie | 20. 7 April, 2014

Как наз-ся плагин для Alfred, который показывает цвет в шестнадцатиричном значении?

akella | 21. 7 April, 2014

Забыл добавить, это отдельная программка Colorsnapper http://colorsnapper.com/

akella | 22. 14 April, 2014

@talgautb
1) Такие классы я действительно использую, я думал речь о &__blabla
2) Да, все верно Nettus Fetch, надо бы тоже добавить.
3) Это сниппет который я сам написал для себя давно https://gist.github.com/akella/9757676
4) Спрайт генерируется компасом, там в репе можно посмотреть sass/lib/sprites
5) Как-то не сталкивался пока :) наверное стоит использовать, не задумывался еще

talgautb | 23. 14 April, 2014

а что насчет &_blabla ? почему не используешь?

akella | 24. 14 April, 2014

В SASS так нельзя, там нужно будет #{$s}__blabla, а это вообще неудобно.
А Less только ради этого использовать не вижу смысла

talgautb | 25. 14 April, 2014

не знал, спасибо.
з.ы. переходи на stylus ;)

akella | 26. 14 April, 2014

С удовольствием, если пойму чем лучше :) Что там кроме &__blabla будет другое?

NickMalt | 27. 21 April, 2014

Насколько я знаю, &__blabla добавили в SASS 3.3

akella | 28. 21 April, 2014

Кстати правда, почти одновременно с этой моей заметкой вышла версия 3.3 в которой сделали этот апдейт http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#smaller_improvements =) Попробую, хотя мне все равно не очень нравится идея заполонить цсс &__bla. Но лень победит, чувствую.

talgautb | 29. 1 May, 2014

Лень – двигатель прогресса :D

Сергей | 30. 2 May, 2014

А можешь записать верстку более сложного макета?

akella | 31. 2 May, 2014

Для чего? Она ничем не отличается вроде бы. То же самое только дольше.

Aleksandr | 32. 15 May, 2014

Привет! Классное видео. И лекция твоя по ускорению верстки очень понравилась, многое почерпнул для себя.

У меня тоже во время просмотра возник вопрос по вложенности в итоговом css. Не совсем это правильно вроде как, не по БЭМ-овски )) Смотря кому отдавать проект, конечно. У меня часто, например, только итоговый css просят, им sass нафиг не нужен, так что надо чтобы там все выглядело прилично.

В этом минус SASS перед SCSS. Во втором скобочками можно отделять, оставляя отступы. Но не хочется мне лишние скобочки и точки с запятыми расставлять.

И с конструкцией &__blabla у меня в SASS проблемы, compass не понимает ее. В SCSS синтаксисе все ок, правда для SCSS у меня был подключен grunt-sass, а он SASS-синтаксис не понимает, ему скобочки подавай ((

akella | 33. 16 May, 2014

Спасибо за добрые слова! :)

Что до &__blabla, уже сейчас можно заставить это работать, просто нужно установить новый компасс и сасс, делается это так:

gem uninstall compass
gem uninstall sass
gem install compass –pre

Саша Ющак | 34. 22 May, 2014

Спасибо за видео ))
Актуально, как никогда ))

Доклад «Как автоматизировать верстку?». Юрий Артюх. | Simple CSS | 35. 5 June, 2014

[…] поспрашивать что-нибудь по этому поводу в блоге Андрея. This entry was posted in Видео. Bookmark the […]

exvion | 36. 18 July, 2014

А Вячеслав Ефременко видимо удалил свое видео?

akella | 37. 19 July, 2014

Удалил :(
https://twitter.com/brainsapiens/status/490482276095250432

Назар Токарь | 38. 21 July, 2014

Час від часу хотів перетягнути вікно Sublime, але не виходило :). Хороша робота, а для початківців так взагалі відео-мануал. Дякую!

Сергей | 39. 5 August, 2014

Халтура чистой воды.
1) Ну зачем Поиск новостей и соцсети в абсолюте?
2) что это за жесть?
body {
font-family: “Myriad Pro”,Arial,sans-serif;
}
У всех стоит мириад? посмотри какое нищебродство под ариал.
учи fontsquirrel.com
3) таблица стилей окончательная ужасно нечитабельна. возможно я педантично отношусь к этому.
4) ужасно бесит двойное подчеркивание. закос под БЭМ не оч.
5) где H1 тег? его нету
6) box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), не уверен что этого достаточно.

Из плюсов – не нашел “летающего текста”, все лаконично в тегах.
ЭКСКЛЮЗИВ в диве а не в картинке, бывало и такое)
применение спрайта
SASS как выбор, а не чистый css.
p.s. дизайн га***

akella | 40. 5 August, 2014

1) Почему нет? :) Поясните, если знаете конечно.
2) Нет, у тех у кого он не стоит, есть Ариал. А подключенный мириад для текста обычно плохо выглядит.
3) Нет, вы не педантичны, вы просто пока мало знаете про верстку.
4) Не нервничайте слишком, это всего лишь код. :)
5) Вот он: H1
6) Будьте увереннее, и все получится.

Если вы не потрудитесь пояснить хоть что-то из того что написали я буду вас считать болтуном который не шарит верстке вообще :)

Александр | 41. 24 October, 2014

Возьмите меня в падаваны :)

Юрий | 42. 25 December, 2014

Great job !!!

Сергей | 43. 2 January, 2015

Спасибо, за видео! Вы можете подсказать, как-то можно приобрести compass app, кроме PayPal?)

Андрей | 44. 4 January, 2015

Благодарю за видео и полезную информацию!
Вопрос по шаблону: там есть partials, которые не используются. Этот шаблон создавался самостоятельно для себя или это чужой продукт? Если чужой, можно ссылку на оригинал? Спасибо.
https://github.com/akella/screencast

akella | 45. 5 January, 2015

О чем именно речь? О каких partials? Шаблон создавался для себя.

Андрей | 46. 11 January, 2015

О том, что находится в папке sass/lib и sass/lib/ceaser-easing
например _animations.scss, _keyframes.sass
В _media.scss автор указан.

akella | 47. 11 January, 2015

да, это из указанных там источников, но уже дополнено и используется когда необходимо.

akella | 48. 11 January, 2015

там еще jquery есть, ее тоже не я написал :-)

Роман | 49. 19 January, 2015

на 2:25 мин в .nav можно для упрощения вот эту функцию в emmet http://docs.emmet.io/actions/wrap-with-abbreviation/
например вот так выделить пункты меню и при помощи этой обертки сразу для все пунктов сделать вот так
ul>li*>a*?

Дмитрий | 50. 13 March, 2015

Я конечно поздновато, но все же :)
Помню как вы были судьей на uwc 4, когда я принимал участие, блин как же я переживал тогда. Не знал тогда что такое препроцессоры, БЭМ и т.д. А сейчас было очень интересно посмотреть на вашу верстку.
Насчет Комментов по поводу динамичных классов не совсем понял, но если правильно понял о чем речь то не согласен. недавно выработал для себя определенный стиль написания, и ими как раз очень удобно пользоваться. Названия элементов в итоге повторяется и в очень редких случаях используется 3-4 уровень вложенности.

.bl-menu-main {

&__list {
}
&__item {
}
&__link {
}
}

akella | 51. 13 March, 2015

Это уже конечно дело вкуса, в некоторых проектах я использую, но то ли непривычно, то ли неудобно, я пока не решил. Основные два минуса для меня
1) Для этого нужен самый новый компас, что не всегда хорошо для заказчика
2) Когда тебе нужно быстро найти .bl-menu-main__item, ты можешь это сделать введя этот селектор в поиске, с амперсандами же – это невозможно, а кол-во вложенных элементов внутри блока может быть большим.

Дмитрий | 52. 14 March, 2015

Я тоже около полугода пробовал, и даже к самому БЭМ не мог привыкнуть, но в итоге пришел к этому, после очередного эксперимента.
по первому пункту, не совсем понял чего нужен компас.
2). я поэтому перед каждым блоком делаю комментарии с метками, чтобы быстро найти нужный блок, а внутри уже быстро нахожу что мне нужно, т.к. привык уже к порядку и идентичности. Кстати это в двойне удобнее в связке с jade, я там тоже каждый блок выношу в отдельные файлы.
Но как вы заметили это уже дело вкуса :)
Кстати а вы сборщиками пользуйтесь? Я вчера попробовал проект собрать на gulp. По этому гайду http://habrahabr.ru/post/250569/ И был очень доволен результатом, сегодня еще планирую добавить модуль jade для полного удобства.

Микуха | 53. 10 April, 2015

Вопрос достаточно нубский

первая запись в стилях
“%in
width: 940px
margin: 0 auto”

наследуется для всех классов с __in
Это как то настраивается или устанавливает?
у меня наследование не происходит, прошу помочь
спасибо!

akella | 54. 10 April, 2015

Это делается с помощью
@extend %in

Дмитрий | 55. 9 June, 2015

А можете написать свой сниппет для комментариев или сбросить файлик с настройками в sumblime?

exvion | 56. 31 March, 2016

@Дмитрий
https://gist.github.com/akella/9757676

Оставить комментарий