Евгений Попов

Если кратко: вы видите три класса к которым можно обратится как:
.[ {
...
}
.class {
...
}
.] {
...
}

Пример jsfiddle.net/81w00rw5

Можно и на чистом css реализовать без проблем, пример
Суть, если кратко в том чтобы текст и картика были в каждом из блоков но по умолчанию картика была маленькая текст скрыт, но при этом указать что второй блок в списке(:nth-child(2)) в не зависимости что там за блок наоборот картинка имела большие размеры + текст там виден.

Как я понимаю под "бликом" вы подразумеваете подгрузку шрифта и подмену стандартного на тот что загружен с google fonts что может вызвать некий довольно заметный скачек и в ряде случаев влиять при отоносительных размерах на сетеку.

Есть довольно простое решение:
1. выберите как способ подключения шрифотов javascript там будет представлен пример кода WebFont Loader.
2. прописываем правило для body{opacity:0;} - установка нулевой прозрачности для body(всей страницы) по умолчанию.
3. WebFont Loader генеририрует ряд событий и состояний. Состояния помимо прочего присваевают соответстввующие классы к тегу html начинающиеся с префикса wf-*. В нашем случае нас интересует - wf-active, состояние когда все шрифты загружены.
3.1. Добавлеяем css правило html.wf-active body{opacity:1;} - возрвращаем прозрачность к номинальной, можно добавить еще анимации перехода оной, но это по вкусу.

css:
overflow:hidden;

Если я правильно понял ваш вопрос, то:
1. берем, например отсюда less-версию или из другого источника.
2. Устанавливаем node.js
2. Устанавливаем lessc: npm install -g less
3. Компилируем bootstrap.less который является "корневым" файлом в котором расположены инклюды других модулей фреймворка
3.1. Либо "ручками": lessc bootstrap.less
3.2. Либо настраиваем вашу IDE для той же самой компиляции.
... Profit!

stackoverflow.com/questions/21961142/gulp-concat-s...
вопрос похожий на ваш предлагают либо называть файлы определенным образом с порядковым номером, либо в массиве ссылок на файлы прописывать "точные" имена/прямые ссылки:
[
'/path/to/app.js',
'/path/to/mymodule/mymodule.js',
'/path/to/mymodule/mymodule/*.js'
]

например

-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;

Так и не выйдет попробуйте например так:

css-код:

.inst a{
display:inline-block; /*делаем ссылку "не строчным" элементом - подробности в документации*/
width:20px; /*ширина иконки*/
height:20px; /*высота иконки*/
background:url(/images/isnta.png);
}
.inst a:hover{
background:url(images/insta_b.png);
}

html-код

<div class='inst'>
<a href="#"></a>
...
</div>

Использую less в первую очередь из-за синтаксиса предпочитаю его scss.
Как сказал предыдущий комментатор особых преимуществ нет у одного перед другим в первую очередь "дело вкуса", а вот с моментом, что использовать из раза в раз на разных проектах - разное, не соглашусь - банально может возникать путаница, из-за относительной "схожести", в голове, что будет влиять на производительность.

Такое реализуется достаточно просто. Есть даже готовые решения. Если говорить о принципе, то на ресайз и скролл вешается отслеживание текущей "области видимости страницы" и входит ли в нее весь контент. Далее простая математика: считаем офсет и высоту элементов в блоках с подгружаемым контентом все что равны либо меньше размера окна - начинаем загружать. Далее по мере скроллинга или ресайза подгружаем и остальные.
Для подробностей следует начать с "бесконечного скроллинга", а так же если именно подгрузка картинок, то просто уточняем предыдущий запрос, например так

поставить foreach вокруг tr(строка), а не как сейчас вокруг td(ячейка)? Или ваш вопрос не до конца ясен.

Странно конечно, что вам не удалось найти, но вот

Вот выложил фреймворк:
github.com/kaaboeld/frame
точнее его начало

В итоге из перечисленных вариантов не подошел ни один, к сожалению. Так что пришлось начать писать свое решение…