Asvgraf web-group

Правила администрирования для внутренних страниц портфолио, часть 1 основная

Магистральные блоки для портфолио.

№1 div.chapter-type1

Магистральный блок №1
div.chapter-type1

Характеристика:
Нет полей. От края до края. Стандартное изображение 980
в большинстве случаев в проекте для фото идет 940 px

Для блоков, где все картинки идут:
— 2 картинки в ряду по 480px.
— 3 картинки в ряду по 300px.
— большие картинки по одной в строке, например от 980 px и больше
— меньше 980px по одной в строке, но поля справа и слева не нужны.

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Контейнер для изображения в данном примере: div с модификаторами
div.chapter-1img и div.chapter-1img-margin20
другие контейнеры для изображений см. ниже

.chapter-img-podpis

Пример магистрального блока с орнаментом снизу text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

.chapter-img-podpis

div.chapter-type1.

Группы изображений в ul. с подписями

Внутреннее деление внутри магистрального блока div.chapter-type1
изображения в ul
ul.chapter-2img;
ul.chapter-3img;
ul.chapter-4img;
ul.chapter-5img;

Блоки для групп изображений в ul. с подписями
ul.chapter-2img; ul.chapter-3img; ul.chapter-4img; ul.chapter-5img;
Изображения центрируются относительно ширины li, посередине
При уменьшении вьюпорта сохраняются, уменьшаясь, на одной строке (до 479px по ширине), далее становятся в столбик.
Располагаются внутри div.chapter-type1 от края до края

Применяется там, где не нужно заботиться о просмотре изображений хорошего качества при уменьшении вьюпорта. И там, где общий вид важнее.
Например, ul.chapter-3img: для показа эскизов (3 эскиза)
ul.chapter-2img: для показа логотипа: 2 варианта (похожих) рядом друг с другом в 1 строку (рус, англ) или скринов ВК-ФБ
ul.chapter-4img; ul.chapter-5img: для скринов инстаграма в конкурсах.

Для регулирования отступов снизу
Применяются ДОП.классы:
chapter-5img-margin60, chapter-5img-margin05, chapter-5img-margin12
chapter-4img-margin60, chapter-4img-margin05, chapter-4img-margin12
chapter-3img-margin60, chapter-3img-margin05, chapter-3img-margin12
сhapter-2img-margin60, chapter-2img-margin05, chapter-2img-margin12

Для регулирования img к центру для .сhapter-2img применяется ДОП.класс .chapter-2img-imgcenter
chapter-2img-imgcenter прижимает изображение к центру. В такой конструкции подписи не употребляются.

ul.chapter-2img; chapter-2img-imgcenter

ul с модификатором ul.chapter-2img-margin12 и chapter-2img-imgcenter

ul.chapter-2img

ul с модификатором ul.chapter-2img-margin12

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

ul.chapter-2img

ul с модификаторами ul.chapter-2img-margin60

  • .chapter-img-podpis
    Для изображений в одной ячейке

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

ul.chapter-3img

ul с модификатором ul.chapter-3img-margin05

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

ul.chapter-3img

ul с модификатором ul.chapter-3img-margin60

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

ul.chapter-4img

ul с модификатором ul.chapter-4img-margin12

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

ul.chapter-5img

ul с модификатором ul.chapter-5img-margin12

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

  • .chapter-img-podpis

div.chapter-type1.

простые группы изображений

Внутреннее деление внутри магистрального блока div.chapter-type1
простые группы изображений
div.chapter-1img

Характеристика:
Блок для одного изображения или простой группы
Изображения без подписей, группируются к центру с маленьким расстоянием по вертикали между ними.
При уменьшении вьюпорта сразу «спрыгивают» в столбик
Внутри div.chapter-type1 от края до края.
При применении модофикаторов к самому изображению (см. ниже), отсупы между изображениями можно расширить.

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

Для регулирования отступов снизу изображений
Применяются ДОП.классы:
.chapter-1img-margin05
.chapter-1img-margin12
.chapter-1img-margin20
.chapter-1img-margin42
.chapter-1img-margin60
.chapter-1img-margin108 — для презентаций

div.chapter-1img

между изображениями стандартный отступ
div с модификатором div.chapter-1img-margin05

.chapter-img-podpis



.chapter-img-podpis

div.chapter-1img

между изображениями стандартный отступ
div с модификатором div.chapter-1img-margin12

.chapter-img-podpis



.chapter-img-podpis

div.chapter-1img

между изображениями стандартный отступ
div с модификатором div.chapter-1img-margin20

.chapter-img-podpis



.chapter-img-podpis

div.chapter-1img

между изображениями увеличенный отступ
div с модификатором div.chapter-1img-margin42

.chapter-img-podpis



.chapter-img-podpis

div.chapter-1img

между изображениями увеличенный отступ
div с модификатором div.chapter-1img-margin60

.chapter-img-podpis



.chapter-img-podpis

div.chapter-1img

между изображениями большой отступ
div с модификатором div.chapter-1img-margin108

.chapter-img-podpis

.chapter-img-podpis

div.chapter-type1.

изображения в ul идущие друг за другом для SMM

Внутреннее деление внутри магистрального блока div.chapter-type1
изображения в ul друг за другом для SMM
ul.chapter-1img-w60;
ul.chapter-1img-w70;
ul.chapter-1img-w80;

ul.chapter-1img-w60;
ul.chapter-1img-w70;
ul.chapter-1img-w80;
не регулируются никакими модификаторами.

Изображения SMM шириной 60%

  • Заголовок, если надо

    Это описание. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    1. Lorem — Lorem ipsum dolor sit amet;
    2. Lorem — Lorem ipsum dolor sit amet;
    3. Lorem — Lorem ipsum dolor sit amet;
    4. Lorem — Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Это стандартная подпись

Изображения SMM шириной 70%

  • Заголовок, если надо

    Это описание. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    1. Lorem — Lorem ipsum dolor sit amet;
    2. Lorem — Lorem ipsum dolor sit amet;
    3. Lorem — Lorem ipsum dolor sit amet;
    4. Lorem — Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Это стандартная подпись

Изображения SMM шириной 80%

  • Заголовок, если надо

    Это описание. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    1. Lorem — Lorem ipsum dolor sit amet;
    2. Lorem — Lorem ipsum dolor sit amet;
    3. Lorem — Lorem ipsum dolor sit amet;
    4. Lorem — Lorem ipsum dolor sit amet.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Это стандартная подпись

Модификаторы самих изображений

Тени

Радиусы

Повороты

Масштаб

Сдвиг

Отступы между 2-мя изображениями

Цвета и толщина обводки

Цвета бекграундов блока

Модификаторы изображений

Тени
Радиусы
Повороты
Масштаб
Сдвиг
Отступы между 2-мя изображениями
Цвета и толщина обводки
Цвета бекграундов блока

Тени


.img-shadow-type1


.img-shadow-type2

.img-shadow-type3

Радиусы


.img-radius20


.img-radius18


.img-radius16

.img-radius14

Повороты


.img-rotate-left8


.img-rotate-right8


.img-rotate-left7


.img-rotate-right7


.img-rotate-left6


.img-rotate-right6


.img-rotate-left4


.img-rotate-right4


.img-rotate-left2


.img-rotate-right2

Масштаб


.img-scale12


.img-scale11


.img-scale09


.img-scale08


.img-scale07


.img-scale06

Сдвиг


.img-translate-down35




.img-translate-up35

Отступы между 2-мя изображениями. Применяются к SPAN(!)

.img-margin20

.img-margin18

.img-margin10

.img-margin08

.img-margin06

.img-margin04

Цвета и толщина обводки

Применяется для раздела SMM и «Мероприятия»: для одного крупного изображения

.img-border05 .img-border-gray

.img-border15 .img-border-gray

.img-border25 .img-border-gray

Цвета бекграундов блока

Применяется для раздела «Брендинг-Презентации»

.bgcolor-gray

.bgcolor-gray

.bgcolor-blue

div.chapter-type1.

комбинированные конструкции

Блок из трех изображений: 2 изображения в столбик и 1 ниже

Блок из больших изображений друг под другом. У последнего нет отступа