Игорь Пушкарский

Блин, кто вам сказал, что сперва нужно нарисовать блок а потом подстраивать сетку? Откуда вы вообще взяли ширину в 300px?

Люди надо сперва вставлять сетку например бутстраповскую, новую, она вроде 940 PX, и больше ничего не нужно придумывать.
Никогда не придумывайте свои сетки, даже если это статический сайт. Вы ведь не знаете что заказчик через неделю захочет сайт адаптировать, потому что он сам не знает.

Честное слово, уже погорло сыт самопальными сетками в 20 колонок, в 17, 22)) верстать очень тяжело, на вид даже очень простой сайт. Естественно для конечного заказчика цена выростает в 2-5раз.

Можно в style.css
@import url("style.css");

или в function.php

function load_style_script(){
    wp_enqueue_style('b_bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style('b_font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
    wp_enqueue_style('b_roboto-slab', 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700&subset=latin,cyrillic');
    wp_enqueue_style('b_open-sans', 'https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic');
    wp_enqueue_style('b_main', get_template_directory_uri() . '/css/main.css');

    wp_enqueue_script('b_jquery', get_template_directory_uri() . '/js/jquery.min.js', array(), '',true);
    wp_enqueue_script('b_bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '',true);
    wp_enqueue_script('b_common', get_template_directory_uri() . '/js/common.js', array(), '',true);
}

add_action('wp_enqueue_scripts','load_style_script');

2 дива, у внутреннего юзать before, after.

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

В моем случае это

<!--Сплитер для 3 плиток в ширину-->
          <div class="news-list-hr-3">
            <div class="news-list-hr-3__item">
              <div></div>
            </div>
            <div class="news-list-hr-3__item">
              <div></div>
            </div>
            <div class="news-list-hr-3__item">
              <div></div>
            </div>
          </div>

и

<!--Сплитер для 2 плиток в ширину-->
          <div class="news-list-hr-2">
            <div class="news-list-hr-2__item">
              <div></div>
            </div>
            <div class="news-list-hr-2__item">
              <div></div>
            </div>
          </div>

Полностью решение можно глянуть Битбакете
или на сайте (правда не знаю сколько там еще пролежит)
Так же не против выслушать Ваше мнение о подходе и о верстке в целом.

Значит что то не верно настроили =)
В последнем проекте порядка 120 jade файлов, компиляция хоть не мгновенная, но пока браузер переключаешь все изменения готовы.

Как вариант, взглянуть на brackets или atom от github, но не думаю что в ближайший год они превзайдут phpstorm

Делить файл смысла нет, только если на разные разделы сайта.
1. Сайт.
2. Админка.
3. PDF.
4. Для печати.
5. Мобильная версия сайта.
6. Левая рука дизайнера.
7. Правая рука дизайнера.

Скрин? Код?

Что бы задача была интересной. Напиши виджет для сматр ТВ. Там все что не делается делается на js. Я бы вот не отказался от виджета который бы показывал seasonvar.ru

А высота картинки строго определена? Если да то top:50%; margin-top:- половина картинки.

На самом деле за такие проделки нужно дизайнеру руки оторвать =)) Допускают такое использование без градиента, или в статичных макетах типа lp. Вариант использования 3 картинки подойдёт, только вот общая картина очень длинного элемента будет не красива. Предлогаю перерисовать без градиента пок не поздно. Практика показывает что через 2-3 месяца такое переделывают в динамических макетах.

Для чего вы это делаете и почему именно 2 чекбокса? Может быть все же 2 radio group?

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

Напиши для .item transition: opacity 0.3s;

Закинь кнопку в дополнительный div например а ему задай relative и display inline- block

getuikit.com Uikit попробуй, тем для него не так много но они есть, простой удобный ничего лишнего.

В общем что бы не играть в сломанный велосипед вот сайт ues.7-px.ru/.

Как поставить элемент по центру я знаю, а вот как поставить активный элемент из группы элементов выравненных по левому краю, по центу экрана чет придумать не могу.
Например есть www.bolshevik-pp.ru на нем работает все отлично, и я подозреваю, что работает из за того что там нет элементов спозиционированных по левому краю.

Спасибо!
Сам не подумал что можно сразу передавать все аргументы в виде строки.

Вариант с

box-shadow: inset 0 30px 20px red, inset 0 5px 20px blue;

не канает, ибо тени накладываются