Верстка сайта
БЭМ (Блок, Элемент, Модификатор) в веб-разработке.
Блок — функционально независимый компонент страницы, который может быть повторно использован. Является логически независимым от остального наполнения. Блок не отвечает за свое расположение. Он задает внутренние свойства (размеры, шрифты и т.д.)
Элементы располагаются в блоке. Элемент — часть блока, которая отвечает за отдельную задачу (например, это расположение внутри блока). Элемент должен входить в состав блока и не должен иметь какого-либо смысла отдельно от блока.
Модификатор — третья составляющая БЭМ. Он может задавать как дополнительное поведение для блока\элемента, так и переопределять стандартное.
Стиль описания БЭМ
1) Несколько слов в одном названии разделяются дефисом (например, блок main-page или my-super-main-list)
2) Элементы отделяются от блоков с использованием двух символов подчеркивания «__» (например, main-page__header или my-super-main-list__item)
3) Модификаторы отделяются одним символом подчеркивания «_» (например, main-page__header_strong или my-super-main-list_blue)
Разбивка страниц макета на блоки
- В этом макете блоки 1 можно описать по одному общему правилу.
- Наиболее полный вид этого блока в группе about-who
- Взаимное расположение этих блоков определяется описанием блока 2
Описание блока 1
<div class="block-col set_border">
<div class="block-col__pict">
<img src="img/a1.png"
alt="" class="block-col__img">
</div>
<div class="block-col__content">
<div class="block-col__title">0-HTML:</div>
<div class="block-col__text">
Основное оформление блока
</div>
</div>
</div>
.block-col {
display: flex;
flex-direction:column; /* column row */
flex: 0 0 400px;
margin: 10px 30px;
background-color: aqua;
}
.block-col__pict {
background-color: burlywood;
}
.block-col__img {
}
.block-col__content {
background-color: aquamarine;
padding: 10px;
flex: 1;
/* overflow: hidden; */
}
.block-col__title {
text-align:center;
font-weight: bold;
}
.block-col__text {
text-align:left; /* justify */
}
.set_right {
display: flex;
justify-content: flex-end;
}
.set_center {
margin: 0px auto;
}
.set_left {
display: flex;
justify-content: flex-start;
}
.set_row {
flex-direction:row; /* column row */
}
.set_col {
flex-direction:column;
}
.set_order1 {
order: 1;
}
.set_order-1 {
order: -1;
}
.set_order0 {
order: 0;
}
.set_border{
border: 2px solid black;
}
Некоторые варианты представления блока 1
Скачать bems0.zip
Описание блока 2
Для того, чтобы группа блоков 1 подстраивалась под ширину окна поместим их в контейнер div
<div class="block"> <div class="block-item"> ... здесь записываются блоки 1 </div> </div>
.block-item {
display: flex;
flex-wrap: wrap;
justify-content: center; /* flex-start flex-end center space-between */
}
Применение для верстки представленных выше блоков позволит легко перестраивать оформление и адаптировать его под устройства с различными размерами экрана. Назовем этот подход — БЭМS технология, а коэффициент первого блока 7 бэмсов 🙂
Если у вас есть удачные конструкции универсальных блоков с высоким бенс коэффициентом , присылайте на почту bems@testlib.ru
Пример верстки группы
about-who
В блоках 1 и 2 заменим базовое имя block на about-who. В результате получим:
<div class="about-who">
<div class="about-who-item">
<div class="about-who-col set_border">
<div class="about-who-col__pict set_center">
<img src="img/a1.png" alt="" class="about-who-col__img">
</div>
<div class="about-who-col__content">
<div class="about-who-col__title">Кто я</div>
<div class="about-who-col__text">
... Текст описания первого блока about-who...
</div>
</div>
</div>
<div class="about-who-col set-border">
... содержимое второго блока about-who
</div>
<div class="about-who-col set-border">
... содержимое третьего блока about-who
</div>
</div>
</div>
После этого можно установить размеры, отступы и остальное оформление блоков
Верстка сайта для мобильной и десктоп версии
Viewport — это область на экране устройства, которая видна пользователю без прокрутки экрана.
Для адаптации сайта под размеры устройства, в контейнер head включаем мета тег viewport. Например такой:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Установить в браузере режим «Веб разработка/Адаптивный режим» для контроля качества верстки для различных размеров экрана. Изменения свойств классов от базового формата относим в отдельные группы для включения их, в дальнейшем, в медиа-запросы.
Медиа-запросы
Медиа-запросы — это особые правила применения CSS, позволяющие учесть параметры устройств на которых просматривается веб-страница.
При верстке с помощью представленных выше блоков верстку под различные размеры устройств в css можно записать так:
@media screen and (min-device-width: 1200px) { /* Стили для экранов до 1200px */
.block-item {
/* ... */
}
.block-col {
/* ... */
}
}
@media screen and (min-device-width: 992px) { /* Стили для экранов до 992px */
.block-item {
}
.block-col {
}
}
@media screen and (min-device-width: 700px){ /* Стили для экранов до 700px */
.block-item {
}
.block-col {
}
}
Слайдер на Owl Carousel 2
Для установки слайдера в веб страницу:
1. Скачать (JQuery , https://owlcarousel2.github.io/OwlCarousel2/):
- owl.carousel.min.css
- owl.theme.default.min.css
- owl.carousel.min.js
- jquery-3.7.1.min.js
Добавить в:
2. head :
<link rel="stylesheet" href="scss/owlcarousel/owl.carousel.min.css"> <link rel="stylesheet" href="scss/owlcarousel/owl.theme.default.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="js/owlcarousel/owl.carousel.min.js"></script>
3. body :
<div class="owl-carousel owl-theme" id="slider">
... слайды. Например:
<div class="slide">
<h2 class="slide__title">Заголовок слайда</h2>
<a href="#" class="slide__link">Ссылка</a>
<img src="./img/porfolio/p2.png" class="slide__img"alt="">
</div>
...
</div>
4. js — вызов плагина в body:
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop:true,
autoplay:true, //Автозапуск слайдера
margin:10,
nav:false,
dots:true, /* Отображает навигацию в виде точек. */
responsive:{
0:{items:1},
600:{items:1},
1000:{items:5 /* количество слайдов на экране */
}
}
});
});
Сборка результата
Полученные в процессе верстки html, css и images файлы переносим в соответствующие папки src в gulp и формируем сайт.