GM2mars

Я примерно смотрю сколько символов влезает в данный блок и делаю простую обрезку. Этот вариант конечно подходит только для блоков с фиксированным размером. Если скорость не важна и подобных элементов мало, то лучше воспользоваться готовыми плагинами.

var cropDescription = function(text, len) {
	return (text.length >len) ? text.slice(0, len) + '...' : text;
};

Библиотека для лендингов, это что-то новое ))
Вам нужен сервис для генерации лендинга, наберите в поиске, их тьма, возможно будут и бесплатные.

Во всем коде не стал разбираться, слишком много всего. Но у вас вначале (где js в html'e) логика правильная.
Как открыли форму, подписываемся на события клика на документе. При каждом клике выполняем функцию проверки: от event.target проверяем всех родителей на совпадение, например id с нашей формой (отслеживаем кликнули мы в область формы или нет). Если родитель так и не был найдет, то закрываем форму, и не забываем отвязаться от события, чтоб зря функции не гонял.
https://jsfiddle.net/hfuLrpqo/1/

p.s. пример на jQuery

Расположи слой с узором под фото, при наведении уменьшай прозрачность фото.
Вообще конструкция такая

<div class="container><a href="site.ru"><img src="photo.jpg"></a></div>

.container {background: url(uzor.png);}
.container img:hover {opacity: 0.5;}

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

input:focus {
  box-shadow: 1px 1px 2px 0 red;
}

:-P

Для решений со скролом нужно делать проверку на шаг, при котором будет меняться картинка. Так как событие скрол срабатывает при сдвиге на 1px.
То есть к примеру мы хотим менять картинку на каждые 100px скрола вниз:

var step=100;
$(window).scroll(function() {
    var index = $(this).scrollTop();
    if (index>step) {
      step+=100; //можно и step=index+100 (нужно смотреть что будет лучше)
      (меняем картинку, алгоритм можно любой придумать)
    }
  });

Какую-то конкретную не использую, обычно сам размечаю сетку в зависимости от проекта, со значениями кратными 2 или 5-ти.

Если я вас правильно понял:

$cont="";
$class="";
$data //массив данных с БД
for (i=0; i<count($data); i++) {
  if (empty($data[$i])) {$class="redBg";}
  $cont.='<td>'.$data.'</td>';
}
$table='<table><tr class="'.$class.'">'.$cont.'</tr></table>';
//все зависит от вашего кода, но общий смысл думаю понятен.

Если вообще нужно реализовать только на ccs при этом не трогая серверную часть, то как минимум придется использовать javascript.

Три первостепенных фактора:
1. выделить цветом отличного от основного текста
2. при наведении менять цвет или добавлять подчеркивание
3. cursor: pointer

Нет не будет, конечно если вы не сделаете прелодер круче и интереснее информации которая загрузится ))
Если это будет в простоте, да ещё со смыслом или подчеркивать стиль/бренд компании, то по моему будет здорово.

jQuery('.b-popup').on('click', function(event) {
  var el=jQuery(event.target);
  if (el.hasClass('b-popup')) PopUpHide();      
});

jsfiddle.net/p7NbX/15

Если вы не знаете javascript вы не фрон-эндер, а просто верстальщик.

Ваше решение рабочее и выглядит неплохо.
А на чем у вас бекэнд? Я думаю что правильнее бекэнду разбирать урл и при отрисовке уже выставлять классы. Но это уже зависит от архитектуры приложения...

Советую вместо CMS изучить лучше какой нибудь фреймворк, типа Yii и другие. И делать любые сайты с блекджеком и ... А не запариваться с этими cms, так как для магазина лучше одна, для портала лучше другая, для блога - третья.