Прошу оценить

[Sergik+]

Сверстал всем известный макет http://sergik.esy.es/ .

Макет очень понравился, применил некоторые методы которые могут вызвать недоумение.

Попиксельно не делал а чисто тренировался, общее время верстки примерно 10 часов.

Есть некоторые недоделки, просто некогда допиливать надо бутстрап осваивать.

Edited August 25, 2014 by Sergik+

[Galaxy]

div class nav , в нем просто лишки без ul , li.active - неправильное именование, это же дропдаун, li.active - будет страница который в данный мент активна. slider,news - должен относиться к какому то блоку. В общем не хватает семантики

[Sergik+]

Угу семантика хромает, думаю некоторые вещи из БЭМа взять тем более в последнем

Sass новые возможности под БЭМ.

[Galaxy]

да под такую страницу смысл БЭМ юзать, бэм хорош под большие проекты. Просто понятно и логично именуйте классы и допустим если это навигация то заюзайте

<nav>
  <ul>
    <li></li>
   </ul>
</nav>

[Sergik+]

Я пока ищу наиболее оптимальный способ именования классов, из БЭМ возьму некторые

принципы, согласен полностью БЭМ тащить в такие маленькие проекты смысла нет.

Меню полностью переделаю, есть одна идейка красивая.

Edited August 25, 2014 by Sergik+

[Galaxy]

И еще не большой совет, прежде чем верстать страницу, возьмите листик бумаги и нарисуйте схематически все блоки, с позиционирование , обтеканием , продумайте именование классов и т.д, в следствии этого верстка будет намного логичнее а код чище.

[Sergik+]

Честно говоря вообще даже не взглянул что у меня там в css получилось, все делалось на sass+compass,

написал несколько удобных миксинов под себя, как переделаю менюшку выложу на githab.

[Нарек]

http://joxi.ru/ow77U4wyTJDsAkGnP9k Это тоже слайдер поидее.

Хорошо бы левый отступ задавать пикселей так 10 или побольше, при уменьшении разрешения буквы впритык к окну, читать неудобно совсем.

У кнопки Download PSD убрать бы outline, так как прямоугольный outline нехорошо смотрится с border-radius.

По семантике - нельзя засовывать элемент списка в тег div.

 

Сергей, по моему Вы рано начали загрузить себя такими вещами как БЭМ. Насколько я понимаю, его следует использовать в проектах приличной величины, которые постоянно меняются - развиваются. Ну и html5 не используется <header> <footer> и тд, хотя это не критично.

 

В css тоже много лишнего http://joxi.ru/kxL7U4wyTJDDApcyMhI

Edited August 25, 2014 by Нарек

[swandev]

полоска справа на айпаде, еще есть в футере

и хорошо бы 10 пикселей сделать padding, а то все к краям прилипает, не красиво

и 10 часов как-то многовато для такого макета

[Sergik+]

Буквы впритык это по макету так, с кнопкой download вообще интересная штука, она у меня по идее

в спрайте но если я ее оттуда гружу то вылазит серый фон, чо за ерунда ? Поэтому кнопку сделал

через background, но все равно буду разбираться. Если честно то даже не понял что работы

слайдером сделаны .

Бэм ни бэм а систему все равно надо выработать.

[Galaxy]

про время кстати да, 2-3 часа для такого макета нормальное время верстки + js я считаю

[Нарек]

+ js я считаю

А где там js) там слайдер готовый) 

[Galaxy]

слайдер + карусель , можно на(лучше) jquery написать, можно плагин заюзать

[Нарек]

с кнопкой download вообще интересная штука, она у меня по идее в спрайте но если я ее оттуда гружу то вылазит серый фон, чо за ерунда ? Поэтому кнопку сделал через background, но все равно буду разбираться.

А зачем кнопку делать картинкой? Там ж простой градиент идет. 

[Sergik+]

Блин точно слайдер почему то вылез, сейчас поправлю.

[Galaxy]

с кнопкой косяк, бэкграунд градиентом, а иконки кинуть отдельным элементом, кстати для иконок сделайте спрайт, и создайте класс который будет инициализировать спрайт - допустим .ico{background: url('sprite.png');display:inline-block} , а сами иконки такого тип .ico_download{height:10px;width:10px; background-position: 0 0 }, и в вашем случае допустим в button кидайте
<i class="ico ico_download"></i>

[Sergik+]

с кнопкой косяк, бэкграунд градиентом, а иконки кинуть отдельным элементом, кстати для иконок сделайте спрайт, и создайте класс который будет инициализировать спрайт - допустим .ico{background: url('sprite.png');display:inline-block} , а сами иконки такого тип .ico_download{height:10px;width:10px; background-position: 0 0 }, и в вашем случае допустим в button кидайте

<i class="ico ico_download"></i>

Все спрайтами сделано.

[Galaxy]

ну я про то что 

.ico-sprite, .active i, .right, .fullscreen, .clean, .view, .plane, .news-header .latest i, .clients-john i, .clients i, .roundleft, .roundright, .preview, .link, .facebook, .dribbble, .printerest, .linkedin, .skype, .share {

  background-image: url('../images/ico-s73e833b064.png');

  background-repeat: no-repeat;

}

это не круто)

[Sergik+]

Блин очень смешно, на хакинтоше в мозиле, сафари, хроме на 1024 прокрутки нету а на винде есть. Это как ?

 

ну я про то что 

.ico-sprite, .active i, .right, .fullscreen, .clean, .view, .plane, .news-header .latest i, .clients-john i, .clients i, .roundleft, .roundright, .preview, .link, .facebook, .dribbble, .printerest, .linkedin, .skype, .share {

  background-image: url('../images/ico-s73e833b064.png');

  background-repeat: no-repeat;

}

это не круто)

 

Да фик на CSS, у меня в sass одна строчка спрайт вставляет. Я честно даже не смотрел что там в css творится.

[Galaxy]

так в чем смысл тогда выкладывать работу , если вы сами не смотрели что у вас в css творится?)

[Sergik+]

Ну я представляю что там, я ведь миксин сам писал. На самом деле
тут у всех разные подходы, я многое подсматривал у хороших верстальщиков.

[Galaxy]

использование sass должно быть не во вред, в идеале sass должен генерить такой же красивый код как если бы оно писалось и на чистом css

[Sergik+]

Ну и как поймать глюк с шириной ? Инспектором гляжу так ширина формируется правильно, под хакинтошем

под всеми браузерами нету ошибок а под виндой ресайзером вылазит прокрутка, при этом откуда прокрутка

если контейнер 993px.

WebDeveloroper на ноуте вообще неправильно размер меняет.

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

Edited August 25, 2014 by Sergik+

[Sergik+]

Посмотрите еще раз на Айпаде пожалуйста, эмулирую так вроде все норм.

Посмотрите пожалуйста css, сижу гляжу и вроде меня устраивает как спрайты

получились.

Edited August 25, 2014 by Sergik+

[swandev]