xsladfs

при нужном разрешении(через медиа запросы) делаешь элементы не плавающими(отменяешь флоаты)

Доброго времени суток. Буду очень рад услышать мнение опытных(и не совсем ) верстальщиков, о выполненой работе.

Верстка тут http://htmlcss.890m.com/

Здравствуйте уважаемые форумчане. Оцените, пожалуйста, верстку и код. Буду очень благодарен за советы и критику: lehakos.tioo.ru

http://savepic.su/4684330.png

 

http://savepic.su/4653979.png

Что за браузер? У меня нет такой ошибки.

 

firefox last version, 1366x768

http://savepic.su/4653979.png

просто не увидел ее там, а так все обшарил)

Через просмотр отфильтрованных запросов  удобно искать, если инспектором не получается.

http://venusdemo.com/magento/smartshop/skin/frontend/ves_smartshop/perfume/images/christmas/footer_banner.png

 

А кто это такой?

 

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

 

по моему это не реально. Хотя у каждого понимание о "высоком уровне" - разное.

Всем добрый день.

Продолжаю учится верстать. Буду очень рад и благодарен за вашу критику. 
http://keyvalue.host22.com/

БЭМ - это конечно хорошо, но про HTML забывать не надо тоже. Там где у вас явно заголовок, вы зачем то дивы используете. Можно использовать больше элементов из HTML5, всякие <header>, <footer>, <nav> и т.п. У вас сплошные дивы.

 

Скрипт, подключенный после закрывающего </html> - это позор для верстальщика я считаю.

 

<h4 class="blog__title">FROM THE BLOG</h4><h4 class="blog__subtitle">Blog Post Title</h4>

Если тут subtitle, тогда чего он тоже <h4>? Почему не <h5>?

Основное предназначение БЭМ - делать независимые блоки, которые можно использовать повторно где угодно с минимальными изменениями. В этом плане у вас БЭМа нет по сути. да и не особо он тут нужен. Для таких крошечных сайтов он избыточен. Разве что как тренировка.

Ну и повторюсь, БЭМа у вас тут нет. Вот к примеру feature и benefits это один и тот же блок, в том плане, что и у того и у того блока есть одни и те же элементы - хедер и блок с текстом. Дальше идёт уже чистое оформление (вот этот круглый бекграунд и всё такое) - это можно сделать модификаторами.

 

спасибо! По поводу скрипта: это халявный хостинг и он свой скрипт сам вставляет куда хочет.

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

А вообще в целом, есть какие то замечания по поводу html разметки или css ?

Я только учусь верстать, для меня важное каждое замечание. Только могу заранее сказать, что я не использовал nav, footer, header осознано.

ап

Всем привет.

Кто знаком с данной методологией, удалось ли мне сверстать по БЭМу ?

Ну и в общем хочу узнать чужое мнение о верстке в целом.

http://keyvalue.host22.com/

для WebStorm: в File Watcher для scss в поле Arguments должно быть --no-cache --style expanded $FileName$:$FileNameWithoutExtension$.css

если без ide, в командной строке: sass --watch style.scss:style.css --style expanded

Как настроить sass что бы на выходе у css, в правилах в конце каждой декларации был перенос строки ?

не актуально

А jade рендерит именно WebStorm, а не gulp или grunt?

 

http://stackoverflow.com/a/15505281

вон там у человека в окне настройки вотчера есть ключ --pretty наверное оно и есть

искал не там где надо. Нашел. C:\Users\___\AppData\Roaming\npm\node_modules\jade\lib\compiler.js

Где-то в опции рендера jade указать pretty: true

это я нагуглил, но где эта опция не пока смог найти

Всем привет.
как настроить jade в webstorm что бы он генерировал html не в одну строку ?

Нет. Вот БЭМ:

 

блок

блок__элемент-блока

блок__элемент-блока_модификатор-элемента

Следуя вышеописному, вот так должна выглядеть ваша верстка, чтобы это был БЭМ:

 

<div class="footer">  <div class="footer__row">    <div class="footer__column">      <h4 class="footer__title">Lacus interdum</h4>            <ul class="footer__list">        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>        <li class="footer__list-item"><a href="#" class="footer__link"></a></li>      </ul>    </div>  </div></div>

footer - это блок (в данном случае он всего один)

footer__row - далее идут элементы этого блока

footer__column

footer__title

footer__list

footer__list-item

footer__link

Модификаторов тут нет.

Можно сделать более общий случай (тогда потребуется модификатор и два блока):

<div class="footer">  <div class="footer__row">    <div class="footer__column">      <h4 class="footer__title">Lacus interdum</h4>            <ul class="list list_footer">        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>        <li class="list__item"><a href="#" class="list__link"></a></li>      </ul>    </div>  </div></div>

footer - первый блок

footer__row - его элементы

footer__column

footer__title

list - второй блок

list_footer - его модификатор (частный случай именно для футера)

list__item - его элементы

list__link

благодарю!

Что значит через чур изи?

слишком легкие

Доброго времени суток.
Подскажите пожалуйста, соответствуют ли имена классов методологии БЭМ ?

<div class="footer">    <div class="footer__row_1">        <div class="footer__row_1_column">            <h4 class="footer__row_1_column_title">Lacus interdum</h4>            <ul class="footer__row_1_column_list">                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>                <li class="footer__row_1_column_list_item"><a href="#"></a></li>            </ul>        </div>    </div></div>

Доброго времени суток.

Возможно ли сверстать такой блок(ниже скрин) без картинки, кроссбраузерно ?

Если да, то буду благодарен за пример кода.

Что за атрибут  у элемента <img src="i/logo.png" alg="logo"> возможно просто опечатка, поправьте.

да, спасибо

залил на сайт другую работу, надеюсь за эту то я по шапке получу)

не уж то такая верстка что "no comments" ?)