Визуальное оформление сайта работающего на платформе "Открытый регион"

Вступление
Оформление виджета ПОС в цветовую схему сайта
Модуль баннеров ссылок на автоматизированные информационные системы
Оформление панелей
Пресс-центр Министерства просвещения Российской Федерации
Оформление списков
Модуль "Горячая линия по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями"
Оформление кнопок на просмотр/скачивание документов
Блок "Горячая линия по вопросам проведения государственной итоговой аттестации"
Текст по ширине страницы, красная строка, заголовки, оформление таблиц.
Grid-Сетка для нашего сайта
Блок объявлений
Объявления в стиле блокнота

Вступление

По умолчанию платформа "Открытый регион" предлагает единое визуальное оформление для всех расположенных на ней сайтов. Мы попробуем немного разнообразить наше оформление. Делать это мы будем с помощью CSS.

CSS — язык каскадных стилей, который задаёт визуальное оформление для HTML, SVG и других языков разметки.

Для применения CSS нам необходимо на главной странице перейти по ссылке Редактировать анкету сайта - далее идем во вкладку дизайн портала и в поле подключаемые стили css вставляем свой код CSS.

Не забываем сохранить изменения!

Оформление виджета ПОС в цветовую схему сайта

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

Следующий css код заменит цветовую схему виджета в основные цвета нашего сайта:

/*Оформление виджета ПОС в цветовую схему сайта*/
#js-show-iframe-wrapper {
  background: var(--primary-color) !important;
}
#js-show-iframe-wrapper .bf-20__text {
  color: var(--light-color) !important;
}
#js-show-iframe-wrapper .pos-banner-fluid .pos-banner-btn_2 {
  background: var(--light-color) !important;
  color: var(--primary-color-dark) !important;
  border: 1px solid var(--primary-color-dark) !important;
  border-radius: 4px !important;
}

Как внедрить код css на наш сайт описывается в следующей статье.

Модуль баннеров ссылок на автоматизированные информационные системы

Авторизуемся на сайте через ЕСПД

В блоке управления сайтом жмем кнопку добавить блок

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

Вставляем код блока баннеров-ссылок АИС

Жмем кнопку сохранить

Исходный код блока баннеров-ссылок АИС

CSS:

/* АИС */
.aisor-row {
	display: grid;
	gap: 20px 32px;
	padding-top: 20px;
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
	& .aisor-col {
		display: grid;
		gap: 20px;
		grid-template-columns: max-content 1fr;
		align-items: center;
		color: var(--text-color);
		& .item {
			width: 352px;
			background: var(--primary-color-light);
			box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
			border-radius: 10px;
			padding: 154px 24px 24px;
			position: relative;
			text-align: center;
			& .icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 154px;
				border-radius: 12px 12px0 0;
				background-position: center;
				overflow: hidden;
				padding-top: 24px;
				& img {
					position: relative;
					width: 130px;
					height: auto;
				}
			}
			& .header {
				font-size: calc(25rem/var(--initial-font-multiplier));
				font-weight: bold;
				margin-top: 2em;
			}
			& .description {
				line-height: 24px;
				margin-top: 12px;
			}
			& .linkbtn {
				padding: 1em 0;
				& a {
					text-decoration: none;
					&.button-aisor {
						font-size: calc(20rem/var(--initial-font-multiplier));
						padding: 14px 40px;
						border-radius: 4px;
						border: 1px solid var(--primary-color-25);
						background: var(--primary-color-light);
						cursor: pointer;
						color: var(--primary-color);
						&:hover {
							background: var(--primary-color-hover);
							color: var(--primary-color-light);
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1087px) and (min-width: 736px) {
	.aisor-row {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 735px) {
	.aisor-row {
		grid-template-columns: 1fr;
	}
}

Как внедрить код css на наш сайт описывается в следующей статье.

HTML:

<div class="aisor-row">
	<div class="aisor-col">
		<div class="item">
			<div class="icon" style="background-image: url('/upload/uf/8a4/nt57kmvywtmecw7kvpwc8tab2oq2fiv6/first_bg.svg');">
				<img src="/upload/uf/656/pjdg5qva6c6dymybabtqnga06cy8enxo/logo_gos.svg" alt="Единый портал государственных услуг и функций">
			</div>
			<div class="header">Госуслуги</div>
			<div class="description"><br>Единый портал<br>государственных услуг<br>и функций</div>
			<div class="linkbtn"><a class="button-aisor" href="https://gosuslugi.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
	<div class="aisor-col">
		<div class="item">
			<div class="icon" style="background-image: url('/upload/uf/d21/n5ecgvbe3aeynjnjgoa32rsgn4d5thfd/second_bg.svg');"><img src="/upload/uf/727/k03nhm2aat12xpv5zcam0p9qxw932wj7/logo_sgo.svg" alt="Образование Ямала"></div>
			<div class="header">Образование<br>Ямала</div>
			<div class="description">Государственная<br>информационная система<br><br></div>
			<div class="linkbtn"><a class="button-aisor" href="https://sgo.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
	<div class="aisor-col">
		<div class="item">
			<div class="icon" style="background-image: url('/upload/uf/275/t7pbyi4xtaorpjq011obapd8o0z6opfq/third_bg.svg');"><img src="/upload/uf/295/g27e8sbwjorxhx7rp0hmiys9mwcxow98/gerbrf.svg" alt="Портал образовательных услуг"></div>
			<div class="header">Портал<br>образовательных услуг</div>
			<div class="description">Государственные и муниципальные<br>услуги в сфере образования<br><br></div>
			<div class="linkbtn"><a class="button-aisor" href="https://e-uslugi.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
</div>

Оформление панелей

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

Вот css код который немного разнообразит цветовую схему наших панелей (окрашиваем панели в градиентный фон):

/*Оформление панелей*/
.top-panel,
.main-footer,
.photo-video-block .decoration .decoration__color {
  background: radial-gradient(circle, var(--primary-color-dark) 0%, var(--primary-color) 50%, var(--primary-color-dark) 100%);
}

Как внедрить код css на наш сайт описывается в следующей статье.

Пресс-центр Министерства просвещения Российской Федерации

Авторизуемся на сайте через ЕСПД

В блоке управления сайтом жмем кнопку добавить блок

Отмечаем радиокнопку типовой блок

В поле тип блока из выпадающего списка выбираем: RSS виджет

Вводим название блока для отображения: Пресс-центр Министерства просвещения Российской Федерации

Вводим ссылку на RSS-ленту: https://edu.gov.ru/press/_rss

Количество новостей для отображения: 6

Количество символов в названии новости: 100

Сохраняем блок.

Оформление списков

По умолчанию HTML предлагает нам стандартный вид списков в виде точек, кружочков, букв латинского алфавита.

Пункт 1
Пункт 2
Пункт 3

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

CSS Код оформления списков:

/* Оформление списков */
.upper-roman,
.middle-dash,
.check,
.lower-cyrillic,
.upper-cyrillic {
  list-style-position: inside;
  & > li {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: .3em;
    padding-top: .3em;
    &:last-child {
      border-bottom: none;
    }
  }
}
.upper-roman {
  list-style-type: upper-roman;
}
@counter-style lower-cyrillic {
  system: alphabetic;
  symbols: "а" "б" "в" "г" "д" "е" "ж" "з" "и" "й" "к" "л" "м" "н" "о" "п" "р" "с" "т" "у" "ф" "х" "ц" "ч" "ш" "щ" "э" "ю" "я";
  suffix: ") ";
}
.lower-cyrillic {
  list-style: lower-cyrillic;
}
@counter-style upper-cyrillic {
  system: alphabetic;
  symbols: "А" "Б" "В" "Г" "Д" "Е" "Ж" "З" "И" "Й" "К" "Л" "М" "Н" "О" "П" "Р" "С" "Т" "У" "Ф" "Х" "Ц" "Ч" "Ш" "Щ" "Э" "Ю" "Я";
  suffix: ") ";
}
.upper-cyrillic {
  list-style: upper-cyrillic;
}
@counter-style middle-dash {
  system: cyclic;
  symbols: "- ";
  suffix: "";
}
.middle-dash {
  list-style: middle-dash;
}
@counter-style check {
  system: cyclic;
  symbols: "✓ ";
  suffix: "";
}
.check {
  list-style: check;
}
@counter-style rightwards-arrowhead {
  system: cyclic;
  symbols: "➤ ";
  suffix: "";
}
.rightwards-arrowhead {
  list-style: rightwards-arrowhead;
}

Как внедрить код css на наш сайт описывается в следующей статье.

Что мы получаем благодаря этому коду:

Описание	Пример отображения	Код HTML
Список upper-roman	пункт 1 пункт 2 пункт 3	`<ul class="upper-roman"> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul>`
Список middle-dash	пункт 1 пункт 2 пункт 3	`<ul class="middle-dash"> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul>`
Список check	пункт 1 пункт 2 пункт 3	`<ul class="check"> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul>`
Список lower-cyrillic	пункт 1 пункт 2 пункт 3	`<ul class="lower-cyrillic"> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul>`
Список upper-cyrillic	пункт 1 пункт 2 пункт 3	`<ul class="upper-cyrillic"> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul>`

Модуль "Горячая линия по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями"

1. Кликаем по кнопке добавить блок

2. В поле содержимое блока кликаем по пиктограмме исходный код

3. В открывшееся окно вставляем код представленный ниже:

<div class="requests-anticorruption-block__body">
	<div class="requests">
		<div class="requests__icon-wrapper"><img src="https://edulbt.yanao.ru/upload/uf/c5a/xro8by1vlj0podvrd80goe3dtglnjpd0/gorline.png" alt="ГИА" width="73" height="61"></div>
		<div class="requests__title">
			<p>&laquo;Горячая линия&raquo; по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями</p>
			<hr>
			<p><a href="https://edulbt.yanao.ru/presscenter/news/144051/" target="_blank">Шкала температур</a></p>
		</div>
		<div class="requests__button-wrapper">+7 912-433-96-78 (круглосуточно)<br>+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)</div>
	</div>
</div>

4. Сохраняем все!

Оформление кнопок на просмотр/скачивание документов

Basic	`<a class="my-btn" href="#" target="_blank">Basic</a>`
Basic	`<a class="my-btn focus" href="#" target="_blank">Basic focus</a>`
Basic active	`<a class="my-btn active" href="#" target="_blank">Basic active</a>`
Basic disabled	`<a class="my-btn disabled" href="#" target="_blank">Basic disabled</a>`
Success	`<a class="my-btn success" href="#" target="_blank">Success</a>`
Success focus	`<a class="my-btn success focus" href="#" target="_blank">Success focus</a>`
Success active	`<a class="my-btn success active" href="#" target="_blank">Success active</a>`
Success disabled	`<a class="my-btn success disabled" href="#" target="_blank">Success disabled</a>`
Info	`<a class="my-btn info" href="#" target="_blank">Info</a>`
Info focus	`<a class="my-btn info focus" href="#" target="_blank">Info focus</a>`
Info active	`<a class="my-btn info active" href="#" target="_blank">Info active</a>`
Info disabled	`<a class="my-btn info disabled" href="#" target="_blank">Info disabled</a>`
Warning	`<a class="my-btn warning" href="#" target="_blank">Warning</a>`
Warning focus	`<a class="my-btn warning focus" href="#" target="_blank">Warning focus</a>`
Warning active	`<a class="my-btn warning active" href="#" target="_blank">Warning active</a>`
Warning disabled	`<a class="my-btn warning disabled" href="#" target="_blank">Warning disabled</a>`
Danger	`<a class="my-btn danger" href="#" target="_blank">Danger</a>`
Danger focus	`<a class="my-btn danger focus" href="#" target="_blank">Danger focus</a>`
Danger active	`<a class="my-btn danger active" href="#" target="_blank">Danger active</a>`
Danger disabled	`<a class="my-btn danger disabled" href="#" target="_blank">Danger disabled</a>`

CSS Код:

/* Оформление кнопок с классом my-btn */
.my-btn {
  display: inline-block;
  margin: .5em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  padding: 10px 16px;
  line-height: 1.3333333;
  border-radius: 4px;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--text-color);
  background-color: var(--primary-color-light);
  border-color: var(--border-color-light);
  &:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &:focus,
  &.focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
    outline-offset: -2px;
  }
  &:active,
  &.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px var(--text-color-gray);
    box-shadow: inset 0 3px 5px var(--text-color-gray);
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &:active:hover,
  &.active:hover,
  &:active:focus,
  &.active:focus,
  &:active.focus,
  &.active.focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &.success {
    --color: #fff;
    --bg: #198754;
    --border-color: #198754;
    --hover-color: #fff;
    --hover-bg: #157347;
    --hover-border-color: #146c43;
    --focus-shadow-rgb: 60, 153, 110;
    --active-color: #fff;
    --active-bg: #146c43;
    --active-border-color: #13653f;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #fff;
    --disabled-bg: #198754;
    --disabled-border-color: #198754;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.info {
    --color: #000;
    --bg: #0dcaf0;
    --border-color: #0dcaf0;
    --hover-color: #000;
    --hover-bg: #31d2f2;
    --hover-border-color: #25cff2;
    --focus-shadow-rgb: 11, 172, 204;
    --active-color: #000;
    --active-bg: #3dd5f3;
    --active-border-color: #25cff2;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #000;
    --disabled-bg: #0dcaf0;
    --disabled-border-color: #0dcaf0;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.warning {
    --color: #000;
    --bg: #ffc107;
    --border-color: #ffc107;
    --hover-color: #000;
    --hover-bg: #ffca2c;
    --hover-border-color: #ffc720;
    --focus-shadow-rgb: 217, 164, 6;
    --active-color: #000;
    --active-bg: #ffcd39;
    --active-border-color: #ffc720;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #000;
    --disabled-bg: #ffc107;
    --disabled-border-color: #ffc107;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.danger {
    --color: #fff;
    --bg: #dc3545;
    --border-color: #dc3545;
    --hover-color: #fff;
    --hover-bg: #bb2d3b;
    --hover-border-color: #b02a37;
    --focus-shadow-rgb: 225, 83, 97;
    --active-color: #fff;
    --active-bg: #b02a37;
    --active-border-color: #a52834;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #fff;
    --disabled-bg: #dc3545;
    --disabled-border-color: #dc3545;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
}
.my-btn.disabled,
.my-btn[disabled],
fieldset[disabled] .my-btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.my-btn.disabled:hover,
.my-btn[disabled]:hover,
fieldset[disabled] .my-btn:hover,
.my-btn.disabled:focus,
.my-btn[disabled]:focus,
fieldset[disabled] .my-btn:focus,
.my-btn.disabled.focus,
.my-btn[disabled].focus,
fieldset[disabled] .my-btn.focus {
  background-color: var(--primary-color-light);
  border-color: var(--border-color-light);
}
a.my-btn.disabled,
fieldset[disabled] a.my-btn {
  pointer-events: none;
}
a.my-btn {
  text-decoration: none;
}

Как внедрить код css на наш сайт описывается в следующей статье.

Блок "Горячая линия по вопросам проведения государственной итоговой аттестации"

1. Кликаем по кнопке добавить блок

2. В поле содержимое блока кликаем по пиктограмме исходный код

3. В открывшееся окно вставляем код представленный ниже:

<div class="requests-anticorruption-block__body">
	<div class="requests">
		<div class="requests__icon-wrapper"><img src="https://edulbt.yanao.ru/upload/uf/d96/ibbxad9bmnnsuanhcm3ua32la2hdefep/gia.png" alt="ГИА" width="73" height="61"></div>
		<h2 class="requests__title">Горячая линия по вопросам проведения государственной итоговой аттестации</h2>
		<div class="requests__button-wrapper">ГИА-9 +7 (34992) 5-72-10 #2226 <br>ГИА-11 +7 (34992) 5-72-10 #2225</div>
	</div>
</div>

4. Сохраняем все!

Текст по ширине страницы, красная строка, заголовки, оформление таблиц.

Далее мы применим довольно большой кусок css кода который оформит нам сразу несколько элементов:

Оформление абзацев (красная строка, текст по ширине)
Оформление таблиц (ширина 100%, отступы 5 px, чересстрочное выделение цветом)
Оформление заголовков

Пример оформления заголовков:

Заголовок H2

Заголовок H3

Пример оформления текста по ширине страницы и красной строки:

С другой стороны, убеждённость некоторых оппонентов предполагает независимые способы реализации экономической целесообразности принимаемых решений. Также как граница обучения кадров обеспечивает актуальность укрепления моральных ценностей. Таким образом, базовый вектор развития создаёт предпосылки для стандартных подходов. Вот вам яркий пример современных тенденций — повышение уровня гражданского сознания играет определяющее значение для первоочередных требований. В рамках спецификации современных стандартов, сторонники тоталитаризма в науке, инициированные исключительно синтетически, смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности.

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

Пример оформления таблицы:

CSS Код:

Как внедрить код css на наш сайт описывается в следующей статье.

.detail__text,
.static-detail,
.free-block {
  /*Оформление абзацев (красная строка, текст по ширине)*/
  & p {
    text-align: justify;
    text-indent: 1.5em;
  }
  /*Оформление таблиц (ширина 100%, отступы 5 px, чересстрочное выделение цветом)*/
  & table {
    width: 100%;
    border-collapse: collapse;
    border-width: 1px;
    border-spacing: 5px;
    & td,
    & th {
      padding: 1em;
      border: 1px solid var(--border-color);
    }
    & tr:nth-child(even) {
      background-color: var(--disabled-color-light);
    }
  }
  /* Оформление заголовков */
  & h2 {
    padding-bottom: .5em;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 20%;
      height: 5px;
      background: var(--primary-color);
      z-index: 1;
    }
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: var(--light-gray-color);
    }
  }
  & h3 {
    border-bottom: 1px solid var(--light-gray-color);
    padding-bottom: .5em;
    position: relative;
    display: inline-block;
    &::before {
      background-color: var(--primary-color);
      border-radius: 50px;
      bottom: -5px;
      content: "";
      height: 10px;
      left: 0;
      position: absolute;
      width: 10px;
    }
    &::after {
      border-bottom: 2px solid var(--primary-color);
      bottom: -1px;
      content: "";
      height: 0;
      left: 0;
      position: absolute;
      width: 30%;
    }
  }
}

Для оформления этих элементов никаких дополнительных классов применять не нужно!

Grid-Сетка для нашего сайта

При просмотре разных сайтов в интернете можно заметить, как аккуратно располагаются на них элементы независимо от размера экрана: навигация, кнопки, блоки с текстом и другие вещи. За это отвечает язык разметки CSS (Cascading Style Sheets). Она бывает разных видов, но сегодня поговорим об одном из них, самом адаптивном — CSS-гридах.

Что такое CSS Grid

Grid (сетка) — это вид разметки, в котором элементы на сайте расположены в виде таблицы. Главная фишка этой таблицы в гибкости — можно объединять отдельные ячейки, менять размеры строк и столбцов, регулировать отступы между ними. А ещё гриды хорошо приспосабливаются к разным размерам экрана, что делает их адаптивными.

Структура грида напоминает обычный Excel-файл: есть горизонтальные и вертикальные линии, которые вместе образуют много разных ячеек. Только, в отличие от файла в Excel, внутри ячеек находятся не выгрузки по зарплате за март, а элементы сайта: текст, картинки, кнопки, блоки HTML-кода и так далее. А формально все эти части грид-разметки называются так:

grid-контейнер — самый главный элемент во всей разметке, в нём хранится всё содержимое сетки;

grid-ячейка — единица грид-сетки, сюда можно положить один или несколько блоков кода;
grid-линия — горизонтальная или вертикальная линия, разделяющая столбцы и колонки;
grid-строка (row) — ряд ячеек;
grid-столбец (column) — колонка ячеек;
grid-элемент — какой-либо элемент сайта;
grid-область (area) — пространство из ячеек, в CSS можно объединить несколько ячеек в одну и работать с ними как с единым целым.

А вот как они располагаются на схеме:

В отличие от Flexbox — другого популярного вида CSS-разметки — Grid позволяет создавать двумерные таблицы. Это значит, что в них могут быть одновременно и ряды, и колонки. А во Flexbox всё строго: можно выстроить элементы или в столбик, или в линию — сочетать оба метода нельзя.

Как мы можем использовать grid на нашем сайте!

С помощью grid-разметки очень удобно создавать разметку в виде столбцов.

рисунок 1

рисунок 2

рисунок 3

На рисунке 1 мы создали сетку состоящую из четырех столбцов, на рисунке 2 три столбца и на рисунке 3 - два столбца:

<!-- Сетка на 4 столбца -->
<div class="grid">
	<div class="col4">
		<div class="item">Содержимое столбца 1</div>
		<div class="item">Содержимое столбца 2</div>
		<div class="item">Содержимое столбца 3</div>
		<div class="item">Содержимое столбца 4</div>
	</div>
</div>

<!-- Сетка на 3 столбца -->
<div class="grid">
	<div class="col3">
		<div class="item">Содержимое столбца 1</div>
		<div class="item">Содержимое столбца 2</div>
		<div class="item">Содержимое столбца 3</div>
	</div>
</div>

<!-- Сетка на 2 столбца -->
<div class="grid">
	<div class="col2">
		<div class="item">Содержимое столбца 1</div>
		<div class="item">Содержимое столбца 2</div>
	</div>
</div>

для работы нашей сетки необходимо в подключаемых стилях css добавить следующий код:

<style type="text/css">
.grid {
  --min-col4: 250px;
  --min-col3: 352px;
  --min-col2: 544px;
  --col-gap: 20px;
  --width-item: 100%;
  display: grid;
  gap: var(--col-gap) var(--grid-gap);
  & .col4,
  & .col3,
  & .col2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: var(--col-gap) var(--grid-gap);
		color: var(--text-color);
    & .item {
      width: var(--width-item);
      background: var(--light-color);
      box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
      border-radius: 4px;
      position: relative;
			text-align: center;
    }
  }
  & .col4 {
    grid-template-columns: repeat(4, 1fr);
    & .item {
      min-width: var(--min-col4);
    }
  }
  & .col3 {
    grid-template-columns: repeat(3, 1fr);
    & .item {
      min-width: var(--min-col3);
    }
  }
  & .col2 {
    grid-template-columns: repeat(2, 1fr);
    & .item {
      min-width: var(--min-col2);
    }
  }
  @media screen and (max-width: 1087px) and (min-width: 736px) {
    & .col4 {
      grid-template-columns: repeat(3, 1fr);
    }
    & .col3 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col2 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 735px) and (min-width: 481px) {
    & .col4 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col3 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 480px) {
    & .col4 {
      grid-template-columns: 1fr;
    }
  }
}
</style>

Таким образом мы получили разметку grid-сетки.

Модуль баннеров-ссылок на Автоматизированные информационные системы с использованием grid-разметки

Для того чтобы получить модуль баннеров-ссылок на АИС как на рисунке 2 нужно немного дополнить наш код css:

<style type="text/css">
.grid {
  --min-col4: 250px;
  --min-col3: 352px;
  --min-col2: 544px;
  --col-gap: 20px;
  --width-item: 100%;
  display: grid;
  gap: var(--col-gap) var(--grid-gap);
  & .col4,
  & .col3,
  & .col2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: var(--col-gap) var(--grid-gap);
		color: var(--text-color);
    & .item {
      width: var(--width-item);
      background: var(--light-color);
      box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
      border-radius: 4px;
      position: relative;
			text-align: center;
    }
  }
  & .col4 {
    grid-template-columns: repeat(4, 1fr);
    & .item {
      min-width: var(--min-col4);
    }
  }
  & .col3 {
    grid-template-columns: repeat(3, 1fr);
    & .item {
      min-width: var(--min-col3);
      &.ais {
        display: grid;
        justify-items: center;
        padding-top: 154px;
        & .icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 154px;
				border-radius: 12px 12px0 0;
				background-position: center;
				overflow: hidden;
				padding-top: 24px;
				& img {
					position: relative;
					width: 130px;
					height: auto;
				}
			}
      }
      & .header {
				font-size: calc(25rem/var(--initial-font-multiplier));
				font-weight: bold;
				margin-top: 1rem;
        width: calc(100% - 1rem);
        height: 2rem;
			}
			& .description {
				margin-top: 2rem;
        width: calc(100% - 4rem);
        height: 4rem;
			}
      & .linkbtn {
				padding: 2em 0;
				& a {
					text-decoration: none;
					&.button-aisor {
						font-size: calc(20rem/var(--initial-font-multiplier));
						padding: .7rem 2rem;
						border-radius: 4px;
						border: 1px solid var(--primary-color-25);
						background: var(--primary-color-light);
						cursor: pointer;
						color: var(--primary-color);
						&:hover {
							background: var(--primary-color-hover);
							color: var(--primary-color-light);
						}
					}
				}
			}
    }
  }
  & .col2 {
    grid-template-columns: repeat(2, 1fr);
    & .item {
      min-width: var(--min-col2);
    }
  }
  @media screen and (max-width: 1087px) and (min-width: 736px) {
    & .col4 {
      grid-template-columns: repeat(3, 1fr);
    }
    & .col3 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col2 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 735px) and (min-width: 481px) {
    & .col4 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col3 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 480px) {
    & .col4 {
      grid-template-columns: 1fr;
    }
  }
}
</style>

Как внедрить код css на наш сайт описывается в следующей статье.

Далее на главной странице авторизуемся на сайте через ЕСПД

В блоке управления сайтом жмем кнопку добавить блок

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

Вставляем код блока баннеров-ссылок АИС

Жмем кнопку сохранить

Исходный HTML-код блока баннеров-ссылок АИС:

<div class="grid">
	<div class="col3">
		<div class="item ais">
			<div class="icon" style="background-image: url('/upload/uf/8a4/nt57kmvywtmecw7kvpwc8tab2oq2fiv6/first_bg.svg');">
				<img src="/upload/uf/656/pjdg5qva6c6dymybabtqnga06cy8enxo/logo_gos.svg" alt="Единый портал государственных услуг и функций">
			</div>
			<div class="header">Госуслуги</div>
			<div class="description">Единый портал государственных услуг и функций</div>
			<div class="linkbtn"><a class="button-aisor" href="https://gosuslugi.ru/" target="_blank">Перейти</a></div>
		</div>
		<div class="item ais">
			<div class="icon" style="background-image: url('/upload/uf/d21/n5ecgvbe3aeynjnjgoa32rsgn4d5thfd/second_bg.svg');"><img src="/upload/uf/727/k03nhm2aat12xpv5zcam0p9qxw932wj7/logo_sgo.svg" alt="Образование Ямала"></div>
			<div class="header">Образование Ямала</div>
			<div class="description">Государственная информационная система</div>
			<div class="linkbtn"><a class="button-aisor" href="https://sgo.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
		<div class="item ais">
			<div class="icon" style="background-image: url('/upload/uf/275/t7pbyi4xtaorpjq011obapd8o0z6opfq/third_bg.svg');"><img src="/upload/uf/295/g27e8sbwjorxhx7rp0hmiys9mwcxow98/gerbrf.svg" alt="Портал образовательных услуг"></div>
			<div class="header">Портал образовательных услуг</div>
			<div class="description">Государственные и муниципальные услуги в сфере образования</div>
			<div class="linkbtn"><a class="button-aisor" href="https://e-uslugi.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
</div>

Модуль горячая линия

Для того чтобы получить модуль как на рисунке 2 необходимо еще дополнить наш css-код. Вот конечный результата:

<style type="text/css">
.grid {
  --min-col4: 250px;
  --min-col3: 352px;
  --min-col2: 544px;
  --col-gap: 20px;
  --width-item: 100%;
  display: grid;
  gap: var(--col-gap) var(--grid-gap);
  & .col4,
  & .col3,
  & .col2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: var(--col-gap) var(--grid-gap);
		color: var(--text-color);
    & .item {
      width: var(--width-item);
      background: var(--light-color);
      box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
      border-radius: 4px;
      position: relative;
			text-align: center;
    }
  }
  & .col4 {
    grid-template-columns: repeat(4, 1fr);
    & .item {
      min-width: var(--min-col4);
    }
  }
  & .col3 {
    grid-template-columns: repeat(3, 1fr);
    & .item {
      min-width: var(--min-col3);
      &.ais {
        display: grid;
        justify-items: center;
        padding-top: 154px;
        & .icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 154px;
				border-radius: 12px 12px0 0;
				background-position: center;
				overflow: hidden;
				padding-top: 24px;
				& img {
					position: relative;
					width: 130px;
					height: auto;
				}
			}
      }
      & .header {
				font-size: calc(25rem/var(--initial-font-multiplier));
				font-weight: bold;
				margin-top: 1rem;
        width: calc(100% - 1rem);
        height: 2rem;
			}
			& .description {
				margin-top: 2rem;
        width: calc(100% - 4rem);
        height: 4rem;
			}
      & .linkbtn {
				padding: 2em 0;
				& a {
					text-decoration: none;
					&.button-aisor {
						font-size: calc(20rem/var(--initial-font-multiplier));
						padding: .7rem 2rem;
						border-radius: 4px;
						border: 1px solid var(--primary-color-25);
						background: var(--primary-color-light);
						cursor: pointer;
						color: var(--primary-color);
						&:hover {
							background: var(--primary-color-hover);
							color: var(--primary-color-light);
						}
					}
				}
			}
    }
  }
  & .col2 {
    grid-template-columns: repeat(2, 1fr);
    & .item {
      min-width: var(--min-col2);
      & .my-ads {
        position: relative;
         & .requests {
           display: grid;
           justify-items: center;
           padding: var(--grid-gap);
           border-radius: 4px;
           border: 1px solid var(--primary-color-25);
           background: var(--primary-color-light);
           overflow: hidden;
            & .icon {
              width: 126px;
              height: 126px;
              background: hsl(0, 0%, 100%);
              color: var(--primary-color);
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
              box-shadow: 0 0 0 24px hsla(0, 0%, 100%, 0.5);
              margin: calc(-1 * var(--grid-gap)) 0;
           }
           &:hover {
               & .icon {
                 transform: scale(1.1);
                 transition: transform 1s ease-out;
             }
           }
           & .title {
             background: var(--primary-color-light);
             border-top: 1px solid var(--border-color-light);
             margin-top: 35px;
             padding: 1em 0;
             font-size: calc(18rem / var(--initial-font-multiplier));
             font-weight: bold;
             z-index: 1;
           }
           & .description {
             margin-top: 1em;
             & p {
               text-align: center;
               text-indent: 0;
             }
             & .my-btn {
               background-color: hsla(0, 0%, 100%, 0.5);
             }
           }
        }
      }
    }
  }
  @media screen and (max-width: 1087px) and (min-width: 736px) {
    & .col4 {
      grid-template-columns: repeat(3, 1fr);
    }
    & .col3 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col2 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 735px) and (min-width: 481px) {
    & .col4 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col3 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 480px) {
    & .col4 {
      grid-template-columns: 1fr;
    }
  }
}
</style>

Как внедрить код css на наш сайт описывается в следующей статье.

А это код для вставки в создаваемый модуль на главной странице:

<div class="grid">
	<div class="col2">
		<div class="item">
			<div class="my-ads">
				<div class="requests">
					<div class="icon"><img src="/upload/uf/c5a/xro8by1vlj0podvrd80goe3dtglnjpd0/gorline.png" alt="ГИА" width="73" height="61"></div>
					<div class="title">Горячая линия по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями</div>
					<div class="description">
						<p>+7 912-433-96-78 (круглосуточно)<br>+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)</p>
						<p><a href="/presscenter/news/144051/" target="_blank" class="my-btn">Шкала температур</a></p>
					</div>
				</div>
			</div>
		</div>
		<div class="item">
			<div class="my-ads">
				<div class="requests">
					<div class="icon"><img src="/upload/uf/d96/ibbxad9bmnnsuanhcm3ua32la2hdefep/gia.png" alt="ГИА" width="73" height="61"></div>
					<div class="title">Горячая линия по вопросам проведения государственной итоговой аттестации</div>
					<div class="description">
						<p>ГИА-9 +7 (34992) 5-72-10 добавочный 2226</p>
						<p>ГИА-11 +7 (34992) 5-72-10 добавочный 2225</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

В данном примере мы дополнительно использовали класс my-btn который описывается в статье: Оформление кнопок на просмотр/скачивание документов

Блок объявлений

Пример:

«Горячая линия» по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями

Шкала температур

+7 912-433-96-78 (круглосуточно)
+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)

Горячая линия по вопросам проведения государственной итоговой аттестации

ГИА-9 +7 (34992) 5-72-10 #2226
ГИА-11 +7 (34992) 5-72-10 #2225

CSS-код нашего оформления блока объявлений:

/* Блок объявлений */
.announcement {
position: relative;
  & .requests {
    padding: 1em;
    border-radius: 4px;
    border: 1px solid var(--primary-color-25);
    background: var(--primary-color-light);
    overflow: hidden;
    display: grid;
    grid-template-columns: 0fr 1fr max-content;
    align-items: center;
    gap: 20px;
    & .icon {
      width: 126px;
      height: 126px;
      background: hsl(0, 0%, 100%);
      color: var(--primary-color);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      box-shadow: 0 0 0 24px hsla(0, 0%, 100%, 0.5);
      margin: calc(-1 * var(--grid-gap)) 0;
      }
    & .title {
      display: grid;
      place-items: center;
      margin-left: 1em;
      font-size: calc(18rem / var(--initial-font-multiplier));
      font-weight: bold;
      & div {
        display: grid;
        place-items: center;
        padding: 1em 0;
        border-bottom: 1px solid var(--primary-color-25);
        &:last-child {
          border-bottom: none;
        }
      }
      & p {
          text-align: left;
        }
      }
    & .wrapper {
      display: flex;
      align-self: stretch;
      align-items: center;
      justify-content: center;
      }
    @media (hover: hover) {
      &:hover {
        & .icon {
          transform: scale(1.1);
          transition: transform 1s ease-out;
        }
      } 
    }
    @media screen and (min-width: 735px) {
      &:last-child {
        grid-template-columns: 0fr 1fr 320px;
        & .title {
          font-size: calc(22rem / var(--initial-font-multiplier));
          justify-self: flex-start;
        }
        & .icon {
          margin: calc(-1 * var(--grid-gap)) 20px;
          grid-row: 1;
        }
        & .wrapper {
          border-left: 1px solid var(--primary-color-25);
          padding-left: var(--grid-gap);
          margin: calc(-1 * var(--grid-gap)) 0;
          grid-column: 3;
          & .button {
            height: 48px;
            padding: 0 22px;
            min-width: 200px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 1155px) and (min-width: 1088px) {
    & .requests {
      grid-template-columns: 0fr 1fr;
      & .icon {
        grid-row: 1 / 3;
      }
    }
    & .title {
      justify-self: center;
      text-align: center;
    }
    & .wrapper {
      grid-column: 2;
    }
  }
  @media screen and (max-width: 1087px) {
    & .requests {
      grid-template-columns: 1fr;
      & > * {
        justify-self: center;
      }
      & .title {
        text-align: center;
      }
    }
  }
}
@media screen and (max-width: 735px) {
  .announcement {
    grid-template-columns: 1fr;
  }
}
:root.root--special .announcement {
  background-color: var(--special-background-color);
  & .requests {
    background-color: var(--special-background-color);
    border-color: var(--special-text-color);
  }
  & .title {
    color: var(--special-text-color);
  }
  & .icon {
    box-shadow: none;
    background-color: var(--special-background-color);
    color: var(--special-text-color);
  }
}
:root.root--special:not([data-special-font-size='normal']) .requests {
  grid-template-columns: 0fr 1fr;
}
:root.root--special:not([data-special-font-size='normal']) .icon {
  grid-row: 1 / 3;
}
:root.root--special:not([data-special-font-size='normal']) .title {
  justify-self: center;
  text-align: center;
}
:root.root--special:not([data-special-font-size='normal']) .wrapper {
grid-column: 2;
}

Как внедрить код css на наш сайт описывается в следующей статье.

HTML-код самого блока объявлений:

<div class="announcement">
<div class="requests">
<div class="icon"><img src="https://edulbt.yanao.ru/upload/uf/c5a/xro8by1vlj0podvrd80goe3dtglnjpd0/gorline.png" alt="ГИА" width="73" height="61"></div>
<div class="title">
<div>&laquo;Горячая линия&raquo; по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями</div>
<div><a href="https://edulbt.yanao.ru/presscenter/news/144051/" target="_blank" class="my-btn primary">Шкала температур</a></div>
</div>
<div class="wrapper">+7 912-433-96-78 (круглосуточно)<br>+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)</div>
</div>
</div>

Объявления в стиле блокнота

CSS-код:

/*Блокнот*/
.notepad {
	margin: 1em auto;
	padding: 0 23px 50px 35px;
	line-height: 26px;
	font-size: 18px;
  background-color: var(--light-color);
	background-image: -webkit-linear-gradient(var(--error-color) 1px, transparent 1px), -webkit-linear-gradient(var(--error-color) 1px, transparent 1px), -webkit-linear-gradient(var(--border-color) 1px, transparent 1px);
	background-image: -moz-linear-gradient(var(--error-color) 1px, transparent 1px), -moz-linear-gradient(var(--error-color) 1px, transparent 1px), -moz-linear-gradient(var(--border-color) 1px, transparent 1px);
	background-image: -o-linear-gradient(var(--error-color) 1px, transparent 1px), -o-linear-gradient(var(--error-color) 1px, transparent 1px), -o-linear-gradient(var(--border-color) 1px, transparent 1px);
	background-image: linear-gradient(var(--error-color) 1px, transparent 1px), linear-gradient(var(--error-color) 1px, transparent 1px), linear-gradient(var(--border-color) 1px, transparent 1px);
	background-size: 1px 1px, 1px 1px, 26px 26px;
	background-repeat: repeat-y, repeat-y, repeat;
	background-position: 22px 0, 24px 0, 0 50px;
  & .heading {
    position: relative;
    margin: 0 -23px 14px -35px;
    height: 3em;
    font-size: 18px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-color);
    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: 5px;
      left: 1px;
      right: 1px;
      height: 0;
      border-top: 1px dashed var(--border-color-light);
      border-color: var(--border-color);
    }
  }
  & p {
    line-height: 26px;
    margin-bottom: -25px;
    margin-top: 25px;
    text-indent: 1.5em;
    text-align: justify;
  }
  & ul,
  & ol {
    & li {
      line-height: 26px;
    }
    margin-top: 25px;
    margin-bottom: -25px;
  }
}

Как внедрить код css на наш сайт описывается в следующей статье.

HTML-код:

<div class="notepad">
  <div class="heading">Заголовок объявления</div>
  <p>абзац объявления</p>
  <p>еще абзац объявления</p>
</div>