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

11 Mar, 2014

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

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

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

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

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

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

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

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

1.heliogracie | 07 Apr, 2014
Как наз-ся плагин для Alfred, который показывает цвет в шестнадцатиричном значении?
2.Дмитрий | 05 Apr, 2014
Пока ты там кнопки справа в фотошопе двигал, у меня чуть эпиллепсия не началась.
3.akella | 12 Mar, 2014
Красивое имя кстати! :) Подправил, четвертый хостинг за год, все ломается все время :) Сейчас проапдейчу пост.
4.Артём Сапегин | 12 Mar, 2014
Долго не мог понять, почему всех комментаторов зовут Мартами :-) Было бы круто перечислить все необычные программы (PNG Hat, например), плагины для Саблайма и прочее.
5.akella | 11 Mar, 2014
Тут важно разделять, мы делаем одноклассники-яндекс-мейлру, или обычный сайт. То что ты говоришь правда, но только для определенных сайтов. И конечно их за час не всегда сверстаешь :) 1. В макете их не было же 2. Больше для создания визуальной иерархии в Sass, так лучше парсить глазами код, а то что в цсс, я же туда и не заглядываю. Экономия на байтах в данном случае я считаю не стоит читаемости кода. 3. Я видел другие 10 макетов, ничего там так и не появилось. 4. Не думаю что это кому-то нужно, честно. Это конечно идеологически-вебстандартистски правильно, но почти бесполезно в обычных макетах :( 5. Да, ты прав, чтобы не поломала, можно добавить еще один див :) Но добавлять его мне было лень, так как это все же не контент зона, в которой динамическое содержимое, а просто статичный блочок в хедере. 6. Точно, забыл указать position:relative для topline__in. Ошибка. 7. А какой в этом смысл? Если известно что там внутри больше ничего не будет? 8. А я наоборот, инлайн блоки менее предсказуемы чем флоаты в целом :( Дело вкуса. Styledocco - почти никогда, это тоже мало кому нужно. Для пары проектов только. Почему сложно описать? Вроде обычно там любой блок описывается, достаточно просто. Копипаст хтмл. В отдельном CSS чтобы не забыть какой там у них синтаксис для документации. Если вдруг понадобится =) А динамические названия классов это как? .header__&? Это же ужасно нечитаемо, да и нельзя так в Sass к счастью или сожалению.
6.Роберт | 11 Mar, 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 И молодец что в препроцессоре не создаешь динамически названия классов.
7.spamforhope | 25 Mar, 2014
Почему не используете переменные для цветов, а каждый раз берете picker-ом? Там 3-4 которые можно было сразу вывести в переменные. А видео отличное! Полезно посмотреть как верстают люди, которые имеют по 5-6 проектов одновременно. Можно список всей софтины, которую Вы используете?
8.akella | 25 Mar, 2014
Так в конце поста ж список всего софта? Или там чего-то не хватает? У меня с переменными не срастается почему-то, то ли дизайнеры не так часто повторяют цвета, то ли лень каждый раз вспоминать как я ее назвал, то ли никогда это толком так и не пригождалось. Да и пикер быстро работает, как-то так.
9.talgautb | 14 Apr, 2014
не знал, спасибо. з.ы. переходи на stylus ;)
10.akella | 14 Apr, 2014
С удовольствием, если пойму чем лучше :) Что там кроме &__blabla будет другое?
11.akella | 16 May, 2014
Спасибо за добрые слова! :) Что до &__blabla, уже сейчас можно заставить это работать, просто нужно установить новый компасс и сасс, делается это так: gem uninstall compass gem uninstall sass gem install compass --pre
12.Сергей | 05 Aug, 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. дизайн га***
13.akella | 05 Aug, 2014
1) Почему нет? :) Поясните, если знаете конечно. 2) Нет, у тех у кого он не стоит, есть Ариал. А подключенный мириад для текста обычно плохо выглядит. 3) Нет, вы не педантичны, вы просто пока мало знаете про верстку. 4) Не нервничайте слишком, это всего лишь код. :) 5) Вот он: H1 6) Будьте увереннее, и все получится. Если вы не потрудитесь пояснить хоть что-то из того что написали я буду вас считать болтуном который не шарит верстке вообще :)
14.NickMalt | 21 Apr, 2014
Насколько я знаю, &__blabla добавили в SASS 3.3
15.spamforhope | 27 Mar, 2014
а, не увидел, спасибо!
16.Саша Ющак | 22 May, 2014
Спасибо за видео )) Актуально, как никогда ))
17.Назар Токарь | 21 Jul, 2014
Час від часу хотів перетягнути вікно Sublime, але не виходило :). Хороша робота, а для початківців так взагалі відео-мануал. Дякую!
18.talgautb | 14 Apr, 2014
а что насчет &_blabla ? почему не используешь?
19.akella | 14 Apr, 2014
В SASS так нельзя, там нужно будет #{$s}__blabla, а это вообще неудобно. А Less только ради этого использовать не вижу смысла
20.akella | 14 Apr, 2014
@talgautb 1) Такие классы я действительно использую, я думал речь о &__blabla 2) Да, все верно Nettus Fetch, надо бы тоже добавить. 3) Это сниппет который я сам написал для себя давно https://gist.github.com/akella/9757676 4) Спрайт генерируется компасом, там в репе можно посмотреть sass/lib/sprites 5) Как-то не сталкивался пока :) наверное стоит использовать, не задумывался еще
21.Александр | 12 Mar, 2014
Очень интересно было посмотреть. Вот как нужно верстать!
22.Aleksandr | 15 May, 2014
Привет! Классное видео. И лекция твоя по ускорению верстки очень понравилась, многое почерпнул для себя. У меня тоже во время просмотра возник вопрос по вложенности в итоговом css. Не совсем это правильно вроде как, не по БЭМ-овски )) Смотря кому отдавать проект, конечно. У меня часто, например, только итоговый css просят, им sass нафиг не нужен, так что надо чтобы там все выглядело прилично. В этом минус SASS перед SCSS. Во втором скобочками можно отделять, оставляя отступы. Но не хочется мне лишние скобочки и точки с запятыми расставлять. И с конструкцией &__blabla у меня в SASS проблемы, compass не понимает ее. В SCSS синтаксисе все ок, правда для SCSS у меня был подключен grunt-sass, а он SASS-синтаксис не понимает, ему скобочки подавай ((
23.Сергей | 02 May, 2014
А можешь записать верстку более сложного макета?
24.Вадим Макеев | 11 Mar, 2014
Вроде бодро и хорошо, было интересно посмотреть. Только две вещи заставляют меня грустить: текст в меню капсом, а не text-transform:uppercase и иконки с помощью <i>
25.akella | 11 Mar, 2014
Честно, это случайно :) там в других местах я делал капсом, с меню просто не обратил внимания видимо. Там еще есть пару мест которые я знаю я пропустил) Но издержки времени. И вообще :) могу сказать что это расширенный функционал и возможность использовать и маленькие буквы в навигации :-P
26.Артем | 11 Mar, 2014
Молодец Юра, как всегда на высоте!
27.Bakyt | 11 Mar, 2014
Во как надо верстать!
28.Руст | 11 Mar, 2014
Забавно, именно этот макет я верстал пару недель назад
29.Роберт | 11 Mar, 2014
Крутое, видео, спасибо :) Через что записывал видео? Клево размеры меришь в PS, и зен кодинг знатно экономит время вместе с SASS, только SASS выглядит ужасно... Выложи на github pages результат, что бы проще посмотреть.
30.akella | 11 Mar, 2014
@Руст - нашел на фрилансе, там кто-то жаловался что заказчик их кинул, я решил заменить лого и взять. @Robert - я через Screenflow =) Вот http://akella.github.io/screencast/
31.akella | 19 Jul, 2014
Удалил :( https://twitter.com/brainsapiens/status/490482276095250432
32.Андрей | 04 Jan, 2015
Благодарю за видео и полезную информацию! Вопрос по шаблону: там есть partials, которые не используются. Этот шаблон создавался самостоятельно для себя или это чужой продукт? Если чужой, можно ссылку на оригинал? Спасибо. https://github.com/akella/screencast
33.akella | 07 Apr, 2014
Забыл добавить, это отдельная программка Colorsnapper http://colorsnapper.com/
34.talgautb | 01 May, 2014
Лень - двигатель прогресса :D
35.Доклад &#171;Как автоматизировать верстку?&#187;. Юрий Артюх. | Simple CSS | 05 Jun, 2014
[...] поспрашивать что-нибудь по этому поводу в блоге Андрея. This entry was posted in Видео. Bookmark the [...]
36.akella | 05 Jan, 2015
О чем именно речь? О каких partials? Шаблон создавался для себя.
37.Михаил Якименко | 03 Apr, 2014
Юра, хотел спросить а что за color scheme у тебя в саблайме в этом видео?
38.akella | 02 May, 2014
Для чего? Она ничем не отличается вроде бы. То же самое только дольше.
39.talgautb | 31 Mar, 2014
пишу еще раз :) во-первых, круто спасибо, такие видео давно ждал) Вопросы, которые вспомнил: 1. почему "динамические классы" ужасно не читабельно? разве все не используют .lt-ie8 & и т.д. + все дети блока под ним, что визуально удобнее, не? Может я чего-то не знаю, или это дело вкуса ?) 2. В ST используешь плагин Nettuts+ Fetch ? 3. я немного не понял как добавляешь комментарии в html блоки ? 4. я проглядел или в видео есть, откуда sprite взялся ? з.ы. почему не используешь humans.txt было бы удобно знать кто сверстал и с помошью каких инструментов :) ? еще раз спасибо, очень полезно и интересно, некоторые вещи стащил))
40.akella | 21 Apr, 2014
Кстати правда, почти одновременно с этой моей заметкой вышла версия 3.3 в которой сделали этот апдейт http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#smaller_improvements =) Попробую, хотя мне все равно не очень нравится идея заполонить цсс &__bla. Но лень победит, чувствую.
41.akella | 05 Apr, 2014
@Михаил https://github.com/buymeasoda/soda-theme/ @Дмитрий, да у меня и самого :) Это странный глюк связанный с моим Keyboard Maestro, он нажимает автоматически в разные части экрана, но если я в этот момент двинул мышь, он дрэгает эти элементы и происходит фигня. И да, у меня тоже чуть не началась :)
42.Сергей | 02 Jan, 2015
Спасибо, за видео! Вы можете подсказать, как-то можно приобрести compass app, кроме PayPal?)
43.exvion | 18 Jul, 2014
А Вячеслав Ефременко видимо удалил свое видео?
44.Александр | 24 Oct, 2014
Возьмите меня в падаваны :)
45.akella | 11 Jan, 2015
там еще jquery есть, ее тоже не я написал :-)
46.akella | 11 Jan, 2015
да, это из указанных там источников, но уже дополнено и используется когда необходимо.
47.Андрей | 11 Jan, 2015
О том, что находится в папке sass/lib и sass/lib/ceaser-easing например _animations.scss, _keyframes.sass В _media.scss автор указан.
48.Юрий | 25 Dec, 2014
Great job !!!
49.Роман | 19 Jan, 2015
на 2:25 мин в .nav можно для упрощения вот эту функцию в emmet http://docs.emmet.io/actions/wrap-with-abbreviation/ например вот так выделить пункты меню и при помощи этой обертки сразу для все пунктов сделать вот так ul>li*>a*?
50.Дмитрий | 13 Mar, 2015
Я конечно поздновато, но все же :) Помню как вы были судьей на uwc 4, когда я принимал участие, блин как же я переживал тогда. Не знал тогда что такое препроцессоры, БЭМ и т.д. А сейчас было очень интересно посмотреть на вашу верстку. Насчет Комментов по поводу динамичных классов не совсем понял, но если правильно понял о чем речь то не согласен. недавно выработал для себя определенный стиль написания, и ими как раз очень удобно пользоваться. Названия элементов в итоге повторяется и в очень редких случаях используется 3-4 уровень вложенности. .bl-menu-main { &__list { } &__item { } &__link { } }
51.Дмитрий | 14 Mar, 2015
Я тоже около полугода пробовал, и даже к самому БЭМ не мог привыкнуть, но в итоге пришел к этому, после очередного эксперимента. по первому пункту, не совсем понял чего нужен компас. 2). я поэтому перед каждым блоком делаю комментарии с метками, чтобы быстро найти нужный блок, а внутри уже быстро нахожу что мне нужно, т.к. привык уже к порядку и идентичности. Кстати это в двойне удобнее в связке с jade, я там тоже каждый блок выношу в отдельные файлы. Но как вы заметили это уже дело вкуса :) Кстати а вы сборщиками пользуйтесь? Я вчера попробовал проект собрать на gulp. По этому гайду http://habrahabr.ru/post/250569/ И был очень доволен результатом, сегодня еще планирую добавить модуль jade для полного удобства.
52.akella | 10 Apr, 2015
Это делается с помощью @extend %in
53.Микуха | 10 Apr, 2015
Вопрос достаточно нубский первая запись в стилях "%in width: 940px margin: 0 auto" наследуется для всех классов с __in Это как то настраивается или устанавливает? у меня наследование не происходит, прошу помочь спасибо!
54.Дмитрий | 09 Jun, 2015
А можете написать свой сниппет для комментариев или сбросить файлик с настройками в sumblime?
55.akella | 13 Mar, 2015
Это уже конечно дело вкуса, в некоторых проектах я использую, но то ли непривычно, то ли неудобно, я пока не решил. Основные два минуса для меня 1) Для этого нужен самый новый компас, что не всегда хорошо для заказчика 2) Когда тебе нужно быстро найти .bl-menu-main__item, ты можешь это сделать введя этот селектор в поиске, с амперсандами же - это невозможно, а кол-во вложенных элементов внутри блока может быть большим.
56.exvion | 31 Mar, 2016
@Дмитрий https://gist.github.com/akella/9757676