Сверстать страницу для базы знаний

Страница будет использоваться как ui-kit для наполнения базы знаний статьями. 

https://drive.google.com/file/d/0BzgxOp3Zx2L8MGwtR3VCZGJqM1E/view

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

Дизайн нарисован по сетке bootstrap. 

Вёрстка будет использоваться в Modx. 

PSD вышлю исполнителю. 

Пожелания к верстке: 

1. Семантичность – осмысленно использовать элементы из спецификации HTML. Никакого нагромождения div с разными классами один внутри другого внутри третьего. 

2. Валидность – закрывать то, что должно быть закрыто, не допускать дублирующихся id, и т.п. 

3. Следование заветам БЭМ, без фанатизма. Писать стили для блоков так, чтобы они оставались переносимыми. Понятно именовать классы. Стараться не использовать id без особой нужды. 

4. Современный подход к позиционированию – flexbox давно поддерживается подавляющим большинством браузеров, а float не предназначены для того, чтобы выравнивать блочные элементы. 

5. Бонусом будет опыт работы с CSS препроцессорами (в идеале хотелось бы видеть стили в Stylus, иерархически разделенными на блоки)