Full stack разработки сайтов в Санкт-Петербурге (сайт находится в разработке)

Лучшие практики разработки сайтов

При разработке сайтов, мы чаще всего исползуем иконочный шрифт Fontawesome5, Bootsrap4, а для бысрой и качественной сборки проектов Gulp4 + WebPack4

В настоящее время мы переводим сайты своих Заказчиков с Bootsrap 3 на Bootsrap 4, а также с Wordpress 4х на Wordpress 5, OpenCart 2 на OpenCart 3 и переводе части лендингов на Jekyll, поэтому для новых заказчиков мы будем открыты с 20 марта 2019. Однако предварительные переговоры мы готовы вести хоть сейчас, если вы согласны, то можете отправить нам свою заявку на Email: webdev.spb.ru@ya.ru

Если вы желаете ознакомится с нашими фирменными цветовыми решениями, часто применяемыми шрифтами и возможностями Bootsrap4, просто скрольте вниз :)

Fontawesome 5

Псевдоэлемент ::before, font-weight: 900;
Псевдоэлемент ::after, font-weight: 400;

Шрифты

Заголовок шрифт Сyrilic Old

Заголовок шрифт Gotham

Заголовок шрифт Lato

Параграф шрифт Lato

Параграф шрифт Lato курсив

Параграф шрифт Roboto

Параграф шрифт Roboto курсив

Параграф шрифт Roboto Condensed

Параграф шрифт Roboto Condensed курсив

Bootsrap 4. Секции и блоки

Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс dark задает:
Цвет фона в sass (синтаксис sass) background-color: $dark
Цвет фона в css background-color: #242b3b;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс darklight4 задает:
Цвет фона в sass (синтаксис sass) background-color: darklight4
Цвет фона в css background-color: #2c3448;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс darklight9 задает:
Цвет фона в sass (синтаксис sass) background-color: $darklight9
Цвет фона в css background-color: #354058;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс darklight12 задает:
Цвет фона в sass (синтаксис sass) background-color: $darklight12
Цвет фона в css background-color: #3b4761;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс darklight14 задает:
Цвет фона в sass (синтаксис sass) background-color: $darklight14
Цвет фона в css background-color: #3f4b67;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentdark24 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentdark24
Цвет фона в css background-color: #b34307;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentdark14 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentdark14
Цвет фона в css background-color: #e45509;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentdark9 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentdark9
Цвет фона в css background-color: #f56112;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentdark3 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentdark3
Цвет фона в css background-color: #f6732d;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accent задает:
Цвет фона в sass (синтаксис sass) background-color: $accent
Цвет фона в css background-color: #f77e3e;
Цвет текста в sass (синтаксис sass) color: #fff
Цвет текста в css color: #fff;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentlight4 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentlight4
Цвет фона в css background-color: #f88b52;
Цвет текста в sass (синтаксис sass) color: $text
Цвет текста в css color: #282828;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentlight8 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentlight8
Цвет фона в css background-color: #f99865;
Цвет текста в sass (синтаксис sass) color: $text
Цвет текста в css color: #282828;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentlight14 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentlight14
Цвет фона в css background-color: #faac83;
Цвет текста в sass (синтаксис sass) color: $text
Цвет текста в css color: #282828;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс accentlight24 задает:
Цвет фона в sass (синтаксис sass) background-color: $accentlight24
Цвет фона в css background-color: #fccdb4;
Цвет текста в sass (синтаксис sass) color: $text
Цвет текста в css color: #282828;
Секция тэг section
Занимает всю ширину экрана.
Класс section-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Дополнительный класс white-gray задает:
Цвет фона в sass (синтаксис sass) background-color: $white-gray
Цвет фона в css background-color: #f3f3f3;
Цвет текста в sass (синтаксис sass) color: $text
Цвет текста в css color: #282828;
Блок класс container-fluid
Занимает всю ширину container-fluid.
Класс block-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;
Блок класс container
Занимает всю ширину container.
Класс block-single задает:
margin: 0;
для мобильных устройств и планшетов:
padding: 0.938rem 15px;
для ноутбуков и десктопных устройств ≤992px:
padding: 1.875rem 30px;
для десктопных устройств ≤1200px:
padding: 2.813rem 30px;
Дополнительный класс monospase задает:
font-family: 'SourceCodePro', monospace;

Заголовок страницы H1

Краткое описание страницы

Заголовок cтраницы H2

Краткое описание страницы

Заголовок блока (секции) H2

Краткое описание блока (секции)

Заголовок текстового блока (виджета) H3

Краткое описание текстового блока (виджета)

Контент данного блока занимает всю ширину экрана.
Класс block-bgi, кроме свойств описанных для класса block-single задает:
background-image: url(../img/file.jpg)
Дополнительный класс overlay-light задает:
наложение на изображение светлого слоя любой прозрачности.
Контент данного блока занимает всю ширину container-fluid.
Класс section-bgi, кроме свойств описанных для класса section-single задает:
background-image: url(../img/file.jpg)
Дополнительный класс overlay-dark задает:
наложение на изображение темного слоя любой прозрачности.
Контент данного блока занимает всю ширину container.
Класс section-bgi, кроме свойств описанных для класса section-single задает:
background-image: url(../img/file.jpg)
Дополнительный класс overlay-color задает:
наложение на изображение слоя любого цвета и прозрачности.
Блок класс container-fluid
Занимает всю ширину container-fluid.
Класс block-bgi, кроме свойств описанных для класса block-single задает:
background-image: url(../img/file.jpg)
Дополнительный класс overlay-color задает:
наложение на изображение слоя любого цвета и прозрачности.
Блок класс container
Занимает всю ширину container.
Класс block-bgi, кроме свойств описанных для класса block-single задает:
background-image: url(../img/file.jpg)
Дополнительный класс overlay-color задает:
наложение на изображение слоя любого цвета и прозрачности.

Bootstrap 4. Сетка

Основные понятия и правила

2.1. Колонки одинаковой ширины

1 из 2
2 из 2
1 из 3
2 из 3
3 из 3

2.2 Установка фиксированной ширины одной колонки

1 из 3
2 из 3 (широкое)
3 из 3
1 из 3
2 из 3 (широкое)
3 из 3

2.3 Контент переменной ширины (xs-auto, sm-auto, md-auto, lg-auto, xl-auto)
justify-content-sm-center - центрирует, включаемые в него ячейки по центру

1 из 3
Контент переменной ширины
3 из 3
1 из 3
Контент переменной ширины номер два
3 из 3

2.4 Мульти-ряд класс w-100 аналогичен по свойствам с тегом переноса строки br, но для ячеек

col
col
col
col
col

3.1 Брейкпоинты класс col без указания, через тире, ширины экрана и количества колонок на этой ширине - создан для автоматической подгонки ширины ячейки

col
col
col
col
col-8
col-4

3.2 На мобильных устройствах, если , через тире, указана ширина экрана, например col-sm и количество колонок, например col-sm-8, то на ширине экрана большей, чем брейкпоинт для sm, ширина ячейки будет приведена в в соответствие с заданной в разметке.

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

3.3 Создание сложной комбинированной сетки

На мобильных устройствах: Первая колонка - на полную ширину, вторая на половину

.col-md-8
.col-6 .col-md-4

На десктопе: 3 колонки. На мобильных: все колонки в половину контейнера

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

Колонки занимают половину контейнера на любом разрешении

.col-6
.col-6

4.1 Вертикальное выравнивание

align-items-start

Верх
Верх
Верх

align-items-center

Середина
Середина
Середина

align-items-end

Низ
Низ
Низ

align-self-start + align-self-center + align-self-end

Верх
Середина
Низ

4.2 Горизонтальное выравнивание

justify-content-start

row justify-content-start
row justify-content-start

justify-content-center

row justify-content-center
row justify-content-center

justify-content-end

justify-content-end
justify-content-end

justify-content-around

justify-content-around
justify-content-around

justify-content-between

justify-content-between
justify-content-between

4.3 Удаление полей между колонками ведется с помощью класса no-gutters (полезно, когда в галерее должны отсутствовать отступы)

col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4
col-6 col-sm-4 col-md-4

4.4 Перенос колонок на новую строку

.col-9
.col-4
.col-9 + .col-4 = .col-13 колонок - это больше .col-12. Поэтому элемент .col-4 переносится на новую строку.
.col-6
Следующие колонки будут распологатся вдоль строки до тех пор, пока их общая ширина в строке не превысит ширину .col-12. Как только их общая ширина станет больше .col-12, последний элемент будет перенесен на следующую строку.

5.1 Классы порядка элементов - order

Неупорядоченный элемент идет первым, если в верстке order с цифровым префиксом, например order-1

Первый неупорядоченный элемент
Второй, упорядоченный как последний
Третий, упорядоченный как первый

Если в верстке есть order с префиксом first (order-first), то будет первым именно он.

Первый неупорядоченный
Второй, упорядоченный как последний
Третий, упорядоченный как первый

5.2.1 Классы смещения - offset

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

6. Вложенность достигается с помощью родительского и дочернего класса row

Уровень 1 родительского класса row: «.col-sm-9»
Уровень 2 дочернего класса row: «.col-8 .col-sm-6»
Уровень 2 дочернего класса row: «.col-4 .col-sm-6»

Дочерний класс row будет воспринимать родительский класс row, как контейнер с 12 колонками.

Кнопки

основные стили

Кнопки с базовыми стилями

Кнопки большие с базовыми стилями

Кнопки с прозрачным фоном для блока с темным фоном

Кнопки с прозрачным фоном для блока со светлым фоном

Кнопки с базовыми стилями и анимацией

Кнопки большие с базовыми стилями и анимацией

Кнопки с подсказками (tooltip)

Кнопки со всплывающей панелью (popover)