Вашему вниманию представляется пример верстки фотогалереи, выполненный в стилистике css-фреймоворка Bootstrap: с использованием современных возможностей CSS3, наследования классов, полностью адаптивный, готовый для автоматизации через LESS. Что это дает? Представим, что мы делаем верстку для информационного мегапортала...
Основной принцип такой верстки, без которого невозможен успешный результат - предельная простота основы, группировка стилей оформления в независимые группы. Основа - максимально логичная и масштабируемая, должна решать основную задачу верстки при любых граничных условиях. В нашем случае она должна одинаково хорошо справляться как с вертикальными, так и с горизонтальными фотографиями, не накладывая на них никаких ограничений и, разумеется, без использования скриптов. Сделав простую и надежную основу, начинаем навешивать на нее "рюшечки". С помощью дополнительных классов, просто добавляя их к блоку, меняем цвета, добавляем скругленные края, "воздух". Теперь, для разных разделов нашего мегапортала мы можем легко - очень легко! - использовать разное визуальное оформление одних и тех же элементов, никак не касаясь программирования. Дополнительные классы заводятся в отдельном файле (в variables.less в случае bootstrap) по мере необходимости, и они, в принципе, должны быть применимы и к любым другим частям верстки нашего мегапортала.
исходный код примера здесь Смотрите как:
Оставить комментарий