Саму сборку вы можете скачать с моего github-репозитория. Работает она основе Gulp + Webpack. Наверняка слышали про такие инструменты. Кстати, там же на Github, в файле readme.md написал к ней подробную инструкцию о том, какие у сборки есть возможности и как с ней работать.

Много писать тут не буду, весь материал доступен в видео или в документации на Github. Возникнут вопросы — задавайте, здесь или на Youtube, не важно. На это все. Приятного просмотра!

Вообще, вывод информера о Cookies файлах — это требование закона 152-ФЗ, в том случае, если вы собираете персональные данные пользователя. Например, вывели форму обратной связи или установили форму авторизации и автоматически подпали под действие закона.

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

Демо / Исходники

Давайте уже начнем писать код, но прежде давайте глянем на демо, что мы вообще получим на выходе. Исходный код можете глянуть на Github.

Писать данное информер я буду на чистом HTML, CSS, JavaScript. Чтобы не тратить много времени на написание базовых стилей я подключил Normalize.css. Далее в качестве сборщика я тут использовал такой инструмент, как Parcel. Очень удобная вещь, особенно когда нужно быстро что-то собрать. Данный инструмент практически не требует никаких настроек. Можно было конечно обойтись и без него, но мне так удобнее, тем более, что в JS я использую ES6 синтаксис. А тут уже необходимо использовать полифил для поддержки более старых браузеров. Короче, parcel сделает тут все за меня.

Если вы загляните в файл index.html на Github, то увидите, что кроме небольшого текста-заглушки там ничего нет, я имею ввиду исходный код информационного окошка Cookies. Код окошка будет вставляться динамически через JS, если нет установленной куки.

Я не буду тут говорить про стилизацию данного окошка, так как тут все элементарно и вообще можно оформить под стиль вашего сайта. Тут больше будет интересен вопрос программирования на JavaScript.

Для работы с файлами куки я установил небольшую js-библиотеку под названием JavaScript Cookie. Можно конечно и свой плагин написать, но я предпочитаю не изобретать велосипеды, так как любой код требует отладки и устранения багов, а это время…

Давайте разберем файл cookies.js в моем проекте. В данном файле хранится код, который собственно и показывает окошко при посещении сайта.

Показывать информер мы будет при условии, что нет установленной куки, поэтому начинаем с условия:

import Cookies from 'js-cookie'

const COOKIES_NAME = 'visit'
if (!Cookies.get(COOKIES_NAME)) { ... }

Методом Cookies.get() мы получаем куки по названию. Название я сразу вынес в отдельную константу. То есть, если данный метод вернет false (и это говорит о том, что установленной cookie нет) мы выполним код, заключенный в фигурных скобках. Обратите внимание на знак инверсии !.

И так, если кука с названием visit (название можно задать любое) не установлена, то выполним следующие действия — добавим динамически html-код окошка перед закрывающим тегом body. И сразу же получим объекты самого окна и кнопочки согласия с условиями.

document.querySelector('body').insertAdjacentHTML('beforeend', getHtml())
const cookiesAlert = document.querySelector('.cookies-alert--js')
const cookiesBtn = document.querySelector('.cookies-alert__btn--js')

Обратите внимание на селекторы по классам. Обычно для работы с js я задаю класс с приставкой --js, так легко можно отделить классы стилистики от классов программирования.

Html-код вставляется метом insertAdjacentHTML, который принимает два обязательных параметра — первое, строка, которая указывает на место вставки, второе — строка с html-кодом объекта. Функция getHtml возвращает строку с html кодом.

function getHtml () {
  return `
  <div class="cookies-alert cookies-alert--js">
      <div class="cookies-alert__container">
          <div class="cookies-alert__left">
              <p>Для корректной работы сайта мы используем файлы Cookie. Это позволяет нам запомнить ваши настройки и предпочтения. <br />Для дальнейшего использования сайта вы должны принять согласие на использование файлов Cookie.</p>
          </div>
          <div class="cookies-alert__right">
            <a class="text-secondary" href="https://ru.wikipedia.org/wiki/Cookie" target="_blank" rel="nofollow">Подробнее</a>
            <button class="btn btn__primary cookies-alert__btn cookies-alert__btn--js">Ok. Согласен!</button>              
          </div>
      </div>
  </div>
  `
}

И так, объект окна мы добавили в DOM, но оно по умолчанию скрыто. Для показа добавим с определенной задержкой (1 сек.) класс is-show, чтобы сработала анимация. Стили я тут приводить не буду, можете подсмотреть в исходники файла scss на Github.

// Add class in cookies-alert block
setTimeout(() => {
  cookiesAlert.classList.add('is-show')
}, 1000)

Блок у нас появился. Отлично! Теперь обработаем клик по кнопки согласия с условиями сайта. По клику нам необходимо выполнить две задачи: 1. Скрыть окошко, удалив класс is-show; 2. установить куку с определенным временем жизни.

const expires = new Date(new Date().getTime() + 2 * 60 * 1000) // Устанавливаем время жизни Cookies - в данном случае 2 мин.
// Click on btn and set cookies
cookiesBtn.addEventListener('click', setCookies)

function setCookies() {
  cookiesAlert.classList.remove('is-show')
  setTimeout(() => {
    cookiesAlert.remove()
  }, 1000)

  Cookies.set(COOKIES_NAME, true, {
    expires
})

Если вы обратили внимание, после того, как мы удалили класс is-show далее с задержкой в 1 сек. удаляется и сам блок окна. По сути нам оно уже не нужно. То есть мы проинформировали пользователя, он согласился и все, задача выполнена. Не вижу смысла оставлять в DOM ненужный объект.

Установка куки происходит методом Cookies.set(). Здесь мы передаем 3 параметра, два из которых обязательны:

• Название куки (обязательно)
• Значение куки (обязательно)
• Объект с доп. опциями

В качестве значения куки передаем булево true. В качестве доп. опций у нас выступает время жизни — expires. Если не передать время жизни expires, то умолчанию куки будут установлены до тех пока мы не перезапустим браузер. В данном случае нас так не устраивает и мы устанавливаем определенный период. Для демонстрации я выставил 2 мин. Заметьте я тут использовал встроенный в JS класс Date, чтобы использовать именно минуты. А вообще по умолчанию параметр expires принимает число в днях. Более подробнее можете почитать в документации плагина js-cookies.

// Пример, время жизни 2 дня
Cookies.set(COOKIES_NAME, true, {
    expires: 2
}

Теперь давайте посмотрим на полный код данного окошка.

import Cookies from 'js-cookie'
import './style.scss'

/**
 * Lib: Cookies js
 * https://github.com/js-cookie/js-cookie
 */

function getHtml () {
  return `
  <div class="cookies-alert cookies-alert--js">
      <div class="cookies-alert__container">
          <div class="cookies-alert__left">
              <p>Для корректной работы сайта мы используем файлы Cookie. Это позволяет нам запомнить ваши настройки и предпочтения. <br />Для дальнейшего использавания сайта вы должны принять согласие на использование файлов Cookie.</p>
          </div>
          <div class="cookies-alert__right">
            <a class="text-secondary" href="https://ru.wikipedia.org/wiki/Cookie" target="_blank" rel="nofollow">Подробнее</a>
            <button class="btn btn__primary cookies-alert__btn cookies-alert__btn--js">Ok. Согласен!</button>              
          </div>
      </div>
  </div>
  `
}

document.addEventListener('DOMContentLoaded', cookieNotify)

const COOKIES_NAME = 'visit'
const expires = new Date(new Date().getTime() + 2 * 60 * 1000) // Устанавиливаем время жизни Cookies - в данном случае время жизни 2 мин.

function cookieNotify() {
  if (!Cookies.get(COOKIES_NAME)) {
    document.querySelector('body').insertAdjacentHTML('beforeend', getHtml())
    const cookiesAlert = document.querySelector('.cookies-alert--js')
    const cookiesBtn = document.querySelector('.cookies-alert__btn--js')

    // Add class in cookies-alert block
    setTimeout(() => {
      cookiesAlert.classList.add('is-show')
    }, 1000)

  // Click on btn and set cookies
  cookiesBtn.addEventListener('click', setCookies)

  function setCookies() {
    cookiesAlert.classList.remove('is-show')
    setTimeout(() => {
      cookiesAlert.remove()
    }, 1000)

    Cookies.set(COOKIES_NAME, true, {
      expires
    })
    }
  }
}

Я обернул весь код в функцию cookieNotify, и вызываю ее, когда DOM дерево загружено и готово.

document.addEventListener('DOMContentLoaded', cookieNotify)
function cookieNotify () { ... }

Теперь можно протестировать. Когда в первый раз откроем страничку нам должно показаться данное окошко. Жмем по кнопочке «Ok. Согласен!», окошко должно скрыться и удалиться из DOM через 1 сек.

Хранилище Cookies

Теперь мы можем заглянуть в браузер, а конкретно в хранилище куки и посмотреть все ли правильно там установилось. Для веб-разработки я использую браузер Mozilla Firefox Developer Edition. Вы можете воспользоваться Chrome браузером или другим.

Открываем консоль разработчика, переходим во вкладку Хранилище (Storage), далее Куки (Cookies) и видим, что для нашего домена установлена кука с названием visit и значением true. Также обратите внимание на срок действия — указана конкретная дата с временем.

Чтобы проверить работоспособность окошка заново достаточно удалить нужную куку, в данном случае — visit. Кликаем правой кнопкой мыши и удаляем либо все, либо то, что нужно.

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

На этом все. Всем удачи. До встречи в других моих постах!

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

Что такое адаптивные изображения?

Давайте разберем сначала, что значит «Адаптивные картинки». А что до сих пор они не адаптивными были что-ли? Спросите вы… Адаптивные изображения в данном случае, это те изображения, которые подстраиваются под определенное разрешение (контрольную точку) при уменьшении окна браузера. Суть тут такова: зачем загружать большую картинку версии настольного ПК шаблона в мобильном устройстве. Например, картинка у нас в блоке контента версии ПК шириной 850 пикс., а сам контейнер контента шириной 840 пикс.

Другое дело экран мобильного, например, здесь уже ширина контейнера контента равна 340 пикс. Исходя из всего получается, что мы выводим на мобильном устройстве ту же картинку шириной 850 пикс. (высоту я не затрагиваю, она подгоняется автоматически), что конечно же не логично. Ведь ширина контейнера в мобильной версии шириной всего 340 пикс. Тут надо бы, по хорошему, вывести картинку шириной 350 пикс. (нужно брать немного больше, чем ширина родительского элемента).

Как вы поняли, здесь идет погоня за производительностью. То есть мобильное устройство менее производительнее, чем ПК, поэтому для него отдаем более оптимизированные и «легкие» изображения, более подходящие по размеру. Если вы для оптимизации своего сайта будете использовать такой инструмент, как PageSpeed Insights от Гугла, то он будет «ругаться» на ваши не оптимизированные изображения в мобильной версии. И звучать это будет следующим образом — «Настройте эффективную кодировку изображений«.

Адаптивные изображения — тег Picture

В HTML 5 есть такой тег, как «picture«, который позволяет в наборе с элементами source выводить оптимальное изображение под определенный размер экрана браузера. Выглядит это следующим образом:

<picture>
    <source media="(min-width: 1200px)" srcset="../images/xl-image.jpg">
    <source media="(min-width: 992px)" srcset="../images/lg-image.jpg">
    <source media="(min-width: 768px)" srcset="../images/md-image.jpg">
    <source media="(min-width: 576px)" srcset="../images/sm-image.jpg">
    <source srcset="../images/xs-image.jpg">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAADs=" alt="">
</picture>

Исходя из приведенного кода, видно, что под определенное разрешение браузера подставляется картинка определенного размера. Естественно точки останова (breakpoints) вы можете использовать свои. Я для примера использовал брекпоинты Bootstrap. В теге img в атрибуте src можно указать любое изображение, но так как браузерная поддержка данного тега довольно широкая я использую заглушку (пустая картинка, закодированная в Base64).

Теперь, когда мы разобрались с тегом picture, можем выводить изображения. Но тут встает вопрос — как нам создать из одной большой картинки несколько вариантов для разных экранов? Создавать вручную — не вариант, так как поле для загрузки картинки одно, да и вообще хотелось бы все автоматизировать. Для этого мы воспользуемся встроенными средствами Joomla, а конкретно классом для работы с изображениями — Image. То есть не нужно устанавливать сторонние расширения, все уже включено. Работает это все и в Joomla 4, которая выйдет стабильным релизом, я так думаю, уже скоро.

Я подготовил определенный файлы, которые вам нужно залить в свой шаблон сайта. Но тут надо разобраться, что к чему. Для начала качаем файлы для своей версии Joomla.

Распаковываем архив с файлами, находим папку html и копируем в корень своего шаблона (не сайта, а именно вашего активного шаблона). По идее все. Уже должно все работать. Загружаем картинку в админ панели при создании/редактировании материала и она должна выводиться на сайте уже адаптивной с теми настройками, что я установил по умолчанию (контрольные точки останова и размеры картинок).

По умолчанию в Joomla изображения выводятся в шаблоне отдельным лайаутом (layout), то есть отдельным шаблоном. Лежат эти отдельные шаблоны в папке ../html/layouts. Полные пути до изображений шаблонов вступительной и полной статьи будут следующими:

/ваш шаблон/html/layouts/joomla/content/intro_image.php // Шаблон изображения анонса статьи
/ваш шаблон/html/layouts/joomla/content/full_image.php // Шаблон изображения полной статьи

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

Настройки параметров изображений

Теперь давайте рассмотрим некоторые настройки. Для примера я буду рассматривать файл лайаута intro_image.php.

<?php
/*
* Image sizes:
* Ratio: 4:3 (web format)
* Xl (min-width: 1200px) = 700x300
* Lg (min-width: 992px) = 700x300
* Md (min-width: 768px) = 540x230
* Sm (min-width: 576px) = 700x300
* Xs (min-width: 320px) = 500x230
* */

$viewports = [
    "xl" => "700x300",
    "lg" => "700x300",
    "md" => "540x230",
    "sm" => "700x300",
    "xs" => "500x230"
];

foreach ($viewports as $key => $value) {
    $vp[$key] = JLayoutHelper::render(
        'com_content.article.intro-image',
        array(
            'article' => $displayData,
            'options' => array(
                'resolution' => $value,
                'force_png' => true
            )
        )
    );
}
?>
<picture>
    <source media="(min-width: 1200px)" srcset="<?php echo $vp["xl"]; ?>">
    <source media="(min-width: 992px)" srcset="<?php echo $vp["lg"]; ?>">
    <source media="(min-width: 768px)" srcset="<?php echo $vp["md"]; ?>">
    <source media="(min-width: 576px)" srcset="<?php echo $vp["sm"]; ?>">
    <source srcset="<?php echo $vp["xs"]; ?>">
    <img
        <?php if ($images->image_intro_caption) : ?>
            <?php echo 'title="' . htmlspecialchars($images->image_intro_caption) . '"'; ?>
        <?php endif; ?>
        class="intro-image<?php echo $images->image_intro_caption ? ' caption' : null; ?>"
        src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
        alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"
        itemprop="thumbnailUrl"
    />
</picture>

Итак, для редактирования брикпоинтов или контрольных точек мы можем править массив $viewports и выставить необходимые вам значения. Я не буду тут подробно комментировать. Далее, для взаимодействия с файлами лайаутов (файлы, которые создают миниатюры) используется встроенный класс Joomla JLayoutHelper (LayoutHelper) и метод render. Он принимает два параметра: 1. путь до файла лайаута; 2. массив с передаваемыми параметрами. Какие параметры можно передавать? Они указаны в комментарии в начале каждого файла.

• ‘resolution‘ (String) — Размер изображения в формате, например, ‘700×300’;
• ‘force_png‘ (Boolean, default: false) — Конвертировать всегда в формат PNG для сохранения прозрачности заднего фона. Но этот параметр, не работает как положено, сразу скажу;
• ‘force_rewrite‘ (Boolean, default: true) — пересоздавать миниатюры автоматически
• ‘thumb_method‘ (Method class Image, default: Image::CROP_RESIZE) — метод создания эскиза изображения. Здесь нужно смотреть документацию по API класса Image, какие еще существуют методы.

Файлы layout для создания эскизов изображений

Теперь давайте разберем сами файлы, в которых создаются эскизы изображений. На самом деле файл для создания эскизов один и называется он — thumbnail.php. Лежит по следующему пути в шаблоне сайта:

/templates/ваш_шаблон/html/layouts/image/thumbnail.php // Путь до файла создания эскизов

Здесь используется встроенный в ядро Joomla класс для работы с изображениями — Image (jImage в joomla 2.5).

Далее, в папке layouts/com_content у нас существуют следующие файлы:

/templates/ваш_шаблон/html/layouts/com_content/article/full-image.php // Layout вывода изображения полной статьи
/templates/ваш_шаблон/html/layouts/com_content/article/intro-image.php // Layout вывода изображения анонса статьи
/templates/ваш_шаблон/html/layouts/com_content/article/image.php // Общий layout вывода анонса и полной статьи изображения

/templates/ваш_шаблон/html/layouts/com_content/category/image.php // Layout вывода изображения категории

Это промежуточные файлы-макеты. Как видим здесь также существует файл макета для создания миниатюр изображений для категории. Вообще, можно использовать общий файл макета (image.php), но если вам нужна дополнительная гибкость в настройке, то созданы отдельно файлы: full-image.php и intro-image.php. Пути до данных файлов указываются в файлах intro_image.php и full_image.php. Пример файла intro_image.php я привел выше.

...
$vp[$key] = JLayoutHelper::render(
   'com_content.article.intro-image',
   ...
   )
...

Адаптивные изображении категории Joomla

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

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

/templates/ваш_шаблон/html/com_content/category/blog.php // Шаблон блога категории

Далее находим строчки вывода картинки. У меня это строка 55-я строка. Заменяем код вывода картинки

<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
    <img src="<?php echo $this->category->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($this->category->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>"/>
<?php endif; ?>

на

<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
	<?php
	/*
		* Image sizes:
		* thumbXl (min-width: 1200px) = 700x300
		* thumbLg (min-width: 992px) = 700x300
		* thumbMd (min-width: 768px) = 540x230
		* thumbSm (min-width: 576px) = 700x300
		* thumbXs (min-width: 320px) = 500x230
		* */

	$viewports = [
		"xl" => "700x300",
		"lg" => "700x300",
		"md" => "540x230",
		"sm" => "700x300",
		"xs" => "500x230"
	];

	foreach ($viewports as $key => $value) {
		$vp[$key] = JLayoutHelper::render(
			'com_content.category.image',
			array(
				'article' => $this->category,
				'options' => array(
					'resolution' => $value
				)
			)
		);
	}
	?>
	<picture>
		<source media="(min-width: 1200px)" srcset="<?php echo $vp["xl"]; ?>">
		<source media="(min-width: 992px)" srcset="<?php echo $vp["lg"]; ?>">
		<source media="(min-width: 768px)" srcset="<?php echo $vp["md"]; ?>">
		<source media="(min-width: 576px)" srcset="<?php echo $vp["sm"]; ?>">
		<source srcset="<?php echo $vp["xs"]; ?>">
		<img
			src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
			alt="<?php echo htmlspecialchars($this->category->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>"
		/>
	</picture>
<?php endif; ?>

Естественно размеры и настройки можете указать свои.

На этом все. Если остались вопросы задавайте в комментариях. До встречи в других постах!

Вообще, для тех, кто не знает, что такое Бутстрап я уже писал статью на данную тему, где обозревал 3-ю версию данного фреймворка. С тех пор в Бутстрап многое изменилось.

Я стараюсь шагать в ногу со временем и как только узнал о выходе новой версии, то сразу же решил попробовать на практике. Сначала я для себя значимых изменений не увидел, но решил попробовать и сделать один проект на новой версии. Как раз по ходу верстки мне открылись некоторые прелести новой версии v.5.

И так давайте пройдемся по основным нововведениям в Bootstrap.

1. Новый внешний вид и новые ощущения

Начнем с того, что был немного изменен внешний вид сайта домашней страницы с документацией и логотип Бутстрап. Ширина контента теперь не тянется во весь экран, а имеет фиксированную ширину. Так легче воспринимается контент. Я вообще терпеть не могу резиновые макеты, когда контент растягивается с лева на право экрана браузера.

Обновление получил и логотип Bootstrap. Новый лого смотрится более интересно, по крайней мере сейчас он мне нравится больше.

Как утверждают создатели Бутстрап, новый логотип воплощает ощущение стиля набора правил, заключенных в фигурные скобки.

2. Отказ от поддержки браузера Internet Explorer

Наконец-то свершилось то, что должно было свершиться давно — отказ от поддержки браузеров Internet Explorer. Но это не удивительно, так как от поддержки данного браузера отказался и сам Microsoft. У них теперь новое детище — Microsoft Edge, который соответствует всем современным браузерам и ничуть им не уступает. Доля пользователей IE с каждым днем становится все меньше и меньше и составляет по статистике в мире менее 1% пользователей.

Правда в документации я не нашел от каких именно версий IE они отказались, но на просторах интернета говорится о версиях IE 10 и 11. Отказ от IE для разработчиков я понимаю так (я ведь сам веб-разработчик): вот идете вы в гору с тяжелым мешком на спине и подниматься вам все труднее и труднее, и тут вы понимаете, что можно сбросить этот мешок и идти налегке. И теперь вы готовы покорить любые вершины. Иными словами, отказ от Internet Explorer дает большие возможности в создании более удобных и быстрых инструментов в будущем.

3. Отказ от JQuery в пользу JavaScript

Наверно самым большим нововведением в данной версии будет отказ от библиотеки jQuery в пользу нативного JavaScript. Это касается js-плагинов Бутстрап, которые долгое время работали с применением jQuery. Да, jQuery это популярная библиотека, которую сегодня все еще используют миллионы сайтов по миру, но благодаря прогрессу в развитии JavaScript и браузерной поддержке мы сегодня имеем возможность не применять jQuery в своих проектах, как зависимость. Лично я уже не применяю jQuery в новых проектах и пишу на чистом JS с поддержкой синтаксиса ES6. Это все означает, что проекты созданные с Bootstrap 5 станут значительно легче по размеру файлов и быстрее в плане загрузки страниц.

Хорошей новостью является и то, что если вы хотите все еще использовать jQuery, то это возможно. Если Bootstrap обнаружит jQuery, то он автоматически добавит все компоненты в систему плагинов. А это означает, что вы сможете вызывать их как и раньше. Например, плагин всплывающей подсказки можно вызывать следующим образом — $('[data-bs-toggle="tooltip"]').tooltip(). Тоже самое касается всех остальных плагинов.

Вообще хочу сказать, что по обновлению js-плагинов была проведена титаническая работа. И в основном, в текущих бета-версиях тестируются и устраняются баги именно js-плагинов.

4. CSS переменные (пользовательские CSS-свойства)

Благодаря отказу от браузера Internet Explorer в новой версии Бутстрап пользовательские CSS переменные стали использоваться значительно шире. В 4-ой версии корневые переменные содержали в себе только цвета и шрифты. В 5-ой версии были добавлены параметры макета (точки останова) и несколько компонентов.

Вообще, я для себя не вижу полезности в этих css-переменных, так как я не пишу стили в css. Я использую препроцессор SASS и gulp-сборку для верстки. При таком подходе у меня все переменные хранятся в отдельном sass-файле (_variables.sass), так что управлять значениями можно намного гибче. Но я быть может напишу отдельную статью про css-переменные, может кому будет полезно.

5. Улучшенная документация

Что касается документации, то она стала более удобней для навигации и получения информации. Например, добавлен новый раздел «Customize«, в который вынесены все настройки и кастомизация Бутстрап с помощью SASS. Здесь вы можете узнать, как можно создать свои темы и расширять Бутстрап под свои нужды.

Формы

Компонент форм получил отдельный раздел документации — Forms. По сути здесь объединили все стили форм, включая компонент группы полей. Замечу, что в документации v.4 компонент группы полей это отдельный подраздел. Стало значительно удобнее, даже поиском не нужно пользоваться.

Что касается радио-кнопок и чек-боксов, то в 4-ой версии они были по умолчанию стилизованы браузерным стилем. Чтобы стилизовать кастомно необъодимо было добавить префикс custom-*. В Bootstrap 5 необходимость в этом префиксе нет, формы имеют кастомную стилизацию по умолчанию. И это лично меня очень порадовало. Например, для того, чтобы вывести стилизованный чек-бокс, достаточно указать прежние классы:

<!-- Чек-бокс -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Чек-бокс по умолчанию
  </label>
</div>

<!-- Радио-кнопка -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Радио-кнопка по умолчанию
  </label>
</div>

<!-- Переключатель -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Переключатель</label>
</div>

В результате получаем вот такую прелесть.

Цвета

Была значительна расширена палитра цветов. Так что подбирать оттенки стало значительно проще без использования таких трюков, как darken или lighten в sass.

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

6. API утилит

В Bootstrap 5 у нас появилась возможность создавать свои или изменять имеющиеся утилиты. Утилиты — это вспомогательные классы, которые ускоряют работу. Например, классы отступов (margin, padding), классы фоновых цветов, классы позиционирования, классы отображения (display) и т.п.

Вот как выглядят утилиты ширины и отступа (margin) в sass файле:

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

В параметр class мы можем указать любой свой класс. Так что теперь к верстке можно подойти намного гибче.

Некоторые утилиты были вынесены в отдельный раздел «Helpers» (помощники). Я често сказать не совсем понял для чего это было сделано, но как утверждают разработчики — это для облегчения именования и улучшения документации.

7. Улучшенная сеточная система

Трудности перехода с v.3 до v.4 Bootstrap сподвигли разработчиков не отходить далеко от сеточной ситемы v.4.x. Добавились лишь незначительные изменения.

В связи с тем, что была добавлена новая точка останова (xxl), то соответственно в сетке появился новый класс .col-xxl-*. О точке останова xxl поговорим чуть ниже в статье.

Добавился класс .g-* (сокращенно от gutters) для добавления отступов в сетку. Данный класс добавляется к классу .row. Например, чтобы сделать отступы между ячейками сетки (горизонтальные и вертикальные) с условным значением 2 достаточно добавить класс g-2 к классу строки .row. Можно также отдельно задать горизонтальный или вертикальный отступ — gx-2 или gy-2 соответственно. Это чем-то напоминает утилиты интервалов margin и padding. Отмечу, что сейчас задать отступы ячейкам стало намного легче, вот это действительно меня порадовало.

<div class="row g-2">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Также был добавлен новый класс .row-cols-auto для строки с классом .row. Данный класс обеспечивает автоматическое распределение колонок равной ширины в пределах родительского блока.

Класс .form-row был удален и заменен новой сеточной системой.

Ячейки сетки больше не используют свойство .position: relative по умолчанию. и это здорово, так как частенько приходилось это переопределять.

8. Иконки Bootstrap

Теперь Bootstrap имеет свою собстенную коллекцию svg иконок. Не скажу, что они отностся именно к 5-ой версии, но это полезно для веб-разработки, поэтому я решил упомянуть и про них. Коллекция насчитывает более 1300 высококачественных иконок и подключить их можно, как svg-спрайт или иконочный шрифт. Искать нужные иконки можно по удобному поиску, который мнгновенно выдает результаты.

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

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

Стоит отметить, что данная коллекция не имеет привязки конкретно к Bootstrap. Вы можете использовать их и без применения Бутстрап в любом проекте.

9. Эксперементальные функции

RTL (right to left) — это функция которая сейчас активно тестируется и если пойдет все хорошо появится в будущих версиях Бутстрап 5. RTL означает справа на лево, то есть есть возможность использовать шрифты, котрые читаются справа на лево. Например, арабский шрифт. Как это выглядит можете посмотреть на данном примере.

Offcanvas — эксперимент с выезжающей боковой панелью на мобильных устройствах. Этой панелью может быть блок меню или корзина покупок в интернет-магазине. На мой взгляд нужная вещь, так как в основном я верстаю мобильное меню именно выезжающим слева на право, а не выпадающим сверху, как это сейчас реализовано в Bootstrap. Чтобы оценить будущую фичу можете глянуть пример. Уменьшаете окно браузера до мобильных размеров.

10. Дополнительные приятные плюшки

1. Как было уже отмечено выше, добавлена новая точка останова (grid-breakpoint) по названием xxl. Применяется для широкоформатных экранов разрешением от 1440 пикс. и выше. Честно говоря, в 4-ой версии я сам его добавлял при необходимости. А тут он уже доступен из коробки.

2. В миксинах sass бреакпоинтов max-width произошли небольшие изменения. В версии v.4, чтобы указать стили, скажем для экрана 992px и ниже, нужно было использовать миксин с точкой md, то есть вот так — @include media-breakpoint-down(md) { … }. Я честно сказать немного тут путался, в голове цифра 992, а алиас точки используем — md. В версии v.5 все так, как и должно быть — @include media-breakpoint-down(lg) { … }.

3. В Bootstrap 5 RFS (responsive font size) включен уже по умолчанию. В 4-ой версии его нужно было включать отдельно, установив значение $enable-responsive-font-sizes: true. Также нам теперь доступен миксин font-size(). В него можно передать значение шрифта для декстопного экрана, а для мобильных будет идти плавное уменьшение. Например, @include font-size(36px). Правда я пока не разобрался, как указывать минимальное значение для мобильных устроств. Если кто знает напишите в комментариях. Вообще для RFS есть отдельный репозитрий в GitHub, так что если интересно можете туда заглянуть.

4. Появилась плавная прокрутка страницы до якоря и реализовано это с помощью CSS. Только я не знаю насколько полезна эта штука. Ну можно сделать ссылку «Наверх» в подвале без JS. В общем я эту фичу отключил. Давил в свой файл переменных $enable-smooth-scroll: false и все, плавная прокрутка теперь не работает.

5. Интеграция сетки Бутстрап с библиотекой Masonry. Вот это тоже меня порадовало. Мне нравится библиотека Masonry и сетка Бутстрап тоже. Как же их подружить думал я? И вот, получите, распишитесь… Подключается довольно легко. Ознакомиться можете на странице примера.

6. Заменены буквы в классах, означающие начало и конец (горизонтальное направление): l (left) и r (right), на более логичные имена s (start) и e (end) соответственно. В v.4, к примеру, чтобы указать margin-left нужно было указать класс — ml-*. Тоже самое, если нужно margin-right — mr-*. В Bootstrap 5 теперь будет так: ms-* и me-*. Это касается всех классов, где применяются буквы для обозначения лево и право (начало, конец). Надеюсь понятно объяснил.

Миграция с v.4 до v.5

Если вы хотите перейти на Bootstrap 5 с версии 4.x, то ознакомьтесь сначала с руководством по миграции. Придется хорошо поработать.

Заключение

Разработчики легендарного Bootstrap в очередной раз удивили нас нововведениями. Отмечу, что Bootstrap уже довольно продолжительное время остается в тренде популярных HTML/CSS-фреймворов в мире. Сегодня я даже не знаю веб-разработчика, который не использовал бы Бутстрап в своей работе.

Ну чтож будем ждать стабильного релиза. Будет это, как говорят авторы после версии beta3, а вот когда именно мне пока не ясно. Но я уже активно применяю 5-ю версию в своих проектах, багов пока не нашел.

На этой ноте скорее всего и завершу. Всем спасибо за внимание! Вопросы/пожелания пишем в комментариях. До встречи в других постах!

Что такое Emmet?

Emmet (эммет) — это специальный синтаксис сокращений, который позволяет писать коды html и css в разы быстрее. Нет, я не хочу сказать, что я сегодня даю вам что-то новенькое. Эта технология довольно продолжительное время пользуется популярностью у многих разработчиков и для меня также не исключение. Я давно этим пользуюсь и решил написать инструкцию для тех, кто решил взять на вооружение молниеносное написание кода. Вообще, этой заметкой я сам буду пользоваться, как шпаргалкой, так как постоянно что-то забывается.

Emmet — это не отдельная сущность, не отдельное приложение и т.д. Это дополнение к редактору кода, к тому редактору в котором мы пишем код при кодировании. В большинстве популярных редакторов кода Emmet уже установлен из коробки. В некоторых же нужно устанавливать, как отдельное дополнение. Например, в редакторе Sublime Text 3 изначально он не установлен. Нужно ставить, воспользовавшись Package control. Для Sublime я записывал видеоурок по установке и работы Emmet, можете посмотреть.

Начнем с того, что ознакомиться с Emmet вы можете на официальном сайте — emmet.io. Документация на английском языке — docs.emmet.io.

Давайте обратимся к простому примеру. Вот как можно развернуть сокращенную запись в полноценный html-код.

Сокращение вида

#page>ul.navigation>li*5>a[href="#"]{Пункт $}

будет преобразовано в

<div id="page">
    <ul class="navigation">
        <li><a href="#">Пункт 1</a></li>
        <li><a href="#">Пункт 2</a></li>
        <li><a href="#">Пункт 3</a></li>
        <li><a href="#">Пункт 4</a></li>
        <li><a href="#">Пункт 5</a></li>
    </ul>
</div>

одним нажатием клавиши «Tab» (обычно это именно Tab). Причем при генерации сохраняется табуляция, что делает код удобочитаемым и красивым. Таким образом вы можете ускорить написание утомительного кода разметки. И я считаю это круто!

Как видите сокращенная запись чем-то похожа на синтаксис css-кода. Поэтому освоить Emmet будет еще легче.

HTML

Элементы

Для создания элементов посредством эммет вы можете указывать любые имена. В эммет нет какого-либо определенного набора, который можете использовать для создания тегов.

Например, div + Tab будет преобразован в <div></div>, также mytag + Tab будет преобразован в <mytag></mytag>.

Вложенность (ребенок): >

Для создания вложенных элементов достаточно указать символ > после родительского имени.

div>ul>li

… конвертируется в

<div>
    <ul>
        <li></li>
    </ul>
</div>

Соседний элемент: +

Для создания элемента на одном уровне (соседний элемент) можно воспользоваться символом +.

div+p+span

… преобразуется в

<div></div>
<p></p>
<span></span>

Количество (умножение): *

С помощью оператора * (умножение) вы можете указать требуемое количество элементов.

p*3

… выведет

<p></p>
<p></p>
<p></p>

Группировка: ()

С помощью скобок () можно группировать сокращения, таким образом, образуя поддеревья в html-коде.

div>(header>ul>li*2>a)+footer>p

… преобразуется в

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Атрибуты

Помимо создания самих элементов в emmet предусмотрено создание и атрибутов, то есть элемент создается с указанными атрибутами. Например, создадим элементы с идентификаторами и классами.

#page>.container>nav#navigation>ul.navlist

получим

<div id="page">
    <div class="container">
        <nav id="navigation">
            <ul class="navlist"></ul>
        </nav>
    </div>
</div>

Если элементу необходимо задать несколько классов, то сокращение будет выглядеть так:

ul.nav.menu.navigation__list>li*3

выведет

<ul class="nav menu navigation__list">
    <li></li>
    <li></li>
    <li></li>
</ul>

Настраиваемые атрибуты: []

Если необходимо добавить определенный атрибут элементу, то можно воспользоваться квадратными скобками []. То есть атрибуты вписываются в квадратных скобках — [attr].

a[href="#"]
button[disabled]
img[src="#" alt="Title"]

выведет соответственно

<a href="#"></a>
<button disabled></button>
<img src="#" alt="Title">

• Можно указывать столько атрибутов для одного элемента сколько это необходимо. Атрибуты разделяются пробелами.
• Необязательно указывать значения атрибутов, они создадутся пустыми: div[title] + Tab <div title=""></div>. При этом табулятор встанет автоматически между кавычками атрибута.
• Можно использовать одинарные или двойные кавычки для указания значения атрибута
• Не обязательно заключать в кавычки значения атрибутов, если они не содержат пробелов: div[title=Заголовок] + Tab <div title="Заголовок"></div>

Нумерация позиции: $

Если необходимо создать некий счетчик в коде, например, пронумеровать элементы, то можно воспользоваться символом $ (доллар). Пример записи emmet:

ul.list>li.list__item-$*5

будет преобразовано в

<ul class="list">
    <li class="list__item-1"></li>
    <li class="list__item-2"></li>
    <li class="list__item-3"></li>
    <li class="list__item-4"></li>
    <li class="list__item-5"></li>
</ul>

Если нумерация должна начинаться с нуля, то необходимо указать два символа $ подряд — $$.

ul.list>li.list__item-$$*3

<ul class="list">
    <li class="list__item-01"></li>
    <li class="list__item-02"></li>
    <li class="list__item-03"></li>
</ul>

Вообще, чтобы дополнить нумерацию нулями можно добавить столько $ сколько это необходимо.

ul.list>li.list__item-$$$$$*3

<ul class="list">
    <li class="list__item-00001"></li>
    <li class="list__item-00002"></li>
    <li class="list__item-00003"></li>
</ul>

Направление и база нумерации

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

Изменим порядок нумерации. Для этого после знака доллара $ добавим модификатор @- (со знаком минус).

ul.list>li.list__item-$@-*5

<ul class="list">
    <li class="list__item-5"></li>
    <li class="list__item-4"></li>
    <li class="list__item-3"></li>
    <li class="list__item-2"></li>
    <li class="list__item-1"></li>
</ul>

Теперь давайте изменим начальное значение. Скажем, начнем не с единицы, а с цифры 3.

ul.list>li.list__item-$@3*5

<ul class="list">
    <li class="list__item-3"></li>
    <li class="list__item-4"></li>
    <li class="list__item-5"></li>
    <li class="list__item-6"></li>
    <li class="list__item-7"></li>
</ul>

Теперь обратный порядок, но начинается с цифры — 3.

ul.list>li.list__item-$@-3*5

<ul class="list">
    <li class="list__item-7"></li>
    <li class="list__item-6"></li>
    <li class="list__item-5"></li>
    <li class="list__item-4"></li>
    <li class="list__item-3"></li>
</ul>

Текст: {}

Для вставки текста в создаваемый элемент можно воспользоваться фигурными скобками — {}.

a[href="#"]{Ссылка}

<a href="#">Ссылка</a>

Хотел бы отметить, что конструкция {...текст...} рассматривается emmet’ом, как отдельный элемент. Поэтому текст в фигурных кавычках необходимо указывать сразу после элемента. Иначе код может сформироваться неправильно.

Вот более сложный пример реализации текста:

p>{Текст }+a{Ссылка}+{ продолжение текста}

<p>Текст <a href="">Ссылка</a> продолжение текста</p>

HTML сокращения

Для ускоренного написания кода можно воспользоваться некоторыми дополнительными сокращениями. Их вообще много, но приведу лишь основные, которыми я лично часто пользуюсь.

! или html:5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

a:link, a:mail, a:tel

Соответственно

<a href="http://"></a>
<a href="mailto:"></a>
<a href="tel:+"></a>

link, link:css, link:favicon, link:rss

<link rel="stylesheet" href="">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="alternate" href="rss.xml" type="application/rss+xml" title="RSS">

style, script, script:src

<style></style>
<script></script>
<script src=""></script>

img, img:srcset или img:s, img:sizes или img:z

<img src="" alt="">
<img src="" alt="" srcset="">
<img src="" alt="" sizes="" srcset="">

Формы: form, input, label, inp …

form
input
label
inp

<form action=""></form>
<input type="text">
<label for=""></label>
<input type="text" name="" id="">

Для создания поля формы с определенным типом необходимо указать поле input и через двоеточие указать тип поля. Например:

input:email
input:url
input:password
input:tel
...

Соответственно

<input type="email" name="" id="">
<input type="url" name="" id="">
<input type="password" name="" id="">
<input type="tel" name="" id="">

textarea
select
select:disabled или select:d
select+

<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id=""></select>
<select name="" id="" disabled></select>
<select name="" id="">
    <option value=""></option>
</select>

bq

<blockquote></blockquote>

pic, pic+

<picture></picture>
<picture>
    <source srcset="">
    <img src="" alt="">
</picture>

table, table+

<table></table>
<table>
    <tr>
        <td></td>
    </tr>
</table>

ol+, ul+, dl+

<ol>
    <li></li>
</ol>

<ul>
    <li></li>
</ul>

<dl>
    <dt></dt>
    <dd></dd>
</dl>

Примечание

Как видели из примеров выше все символы сокращения emmet пишутся слитно без пробелов. И если у вас возникнет соблазн отформатировать запись, например, добавить пробелы между символами, чтобы выглядело более читаемо, то знайте — ничего не сработает. Пробел — это точка останова для Emmet, синтаксический анализ сокращения прекращается.

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

Генератор Lorem Ipsum

Lorem Ipsum — это известный текст-рыба, которые используют многие разработчики в качестве демонстрации текста. Есть специальные сервисы, которые генерируют такие тексты. Но с Emmet отвлекаться на сторонние сервисы не придется. Генератор рыбы-текста включен уже в редактор.

Для генерации фиктивного текста необходимо написать lorem или lipsum (сокращенно) и нажать клавишу Tab. Сгенерируется текст из 30 слов. Причем это не просто сниппет, а полноценный текст, разбитый на предложения. При каждом вызове будет генерироваться уникальный текст.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dolores est expedita mollitia nesciunt nostrum odit optio, porro quasi quo rem sequi suscipit tempora. Enim illum magni odit sint unde?

Если вам не нужно 30 слов или вы хотите больше, то количество слов можно указать прямо в сокращении.

lorem15

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam eveniet, explicabo fuga natus quidem similique.

Можно также сгенерировать текст с тегами абзацев. Например:

p*4>lorem10

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, maxime!</p>
<p>Incidunt ipsum labore perferendis quaerat quasi quod rerum similique totam.</p>
<p>Asperiores error libero tempore voluptate voluptatem! Consequuntur mollitia repellat tempore.</p>
<p>A nostrum reprehenderit tempora voluptatum! Ab harum nulla quasi temporibus!</p>

CSS

Это конечно хорошо, что мы можем писать сокращенно html-код и конвертировать в полноценный html одной клавишей, но что на счет CSS? Ведь по сути пишем мы сокращенно код похожий на css. Зачем конвертировать селекторы css опять в селекторы? И можно предположить, что здесь он может быть бесполезным. Но разработчики Emmet нашли применение и в css.

Идея применения Emmet в css состоит в том, что мы можем писать сокращенно свойства и их значения и разворачивать по нажатию той же клавишей Tab.

Например, можно написать свойство margin сокращенно m и нажать клавишу Tab. Если хотим задать сразу значение, то m10 + Tab margin: 10px. Если хотите задать несколько значений, то: m10-20 + Tab margin: 10px 20px. Можно также указать и отрицательные значения: m-10--20 + Tab margin: -10px -20px. Хотите указать значение в других единицах? Нет проблем: m10em + Tab margin: 10em. Вообще, если после значения указать любое имя, то оно будет успешно отработано: m10foo + Tab margin: 10foo.

Чтобы указать несколько css-свойств одной строкой можно воспользоваться оператором +. Например:

p0+m0+fz20

+ Tab, выведет

padding: 0;
margin: 0;
font-size: 20px;

Псевдонимы значений

В Emmet предусмотрены псевдонимы для часто используемых единиц.

• p → %
• e → em
• x → ex

w100p
m10e20p

Соответственно

width: 100%;
margin: 10em 20%;

Как видим, можно ускоряться и в css с помощью Emmet. На самом деле, когда пишешь много свойств и используешь такие сокращения, то скорость возрастает в разы. Испробовано лично мною и очень здорово!

Безблочные свойства

В css есть некоторые свойства, которые определяются как безразмерные, то есть без указания единиц. Например, line-height, font-weight, z-index и другие. В Emmet это уже предусмотрено и мы может указывать только значения для таких свойств. Например:

lh1.5
fw500
z100
op1
...

line-height: 1.5;
font-weight: 500;
z-index: 100;
opacity: 1;
...

Модификатор !important

Чтобы значению свойства указать модификатор !important достаточно в конце значения установить знак !.

m10-20!

margin: 10px 20px !important;

CSS сокращения

margin

m
mt
mr
mb
ml

будет преобразовано соответственно в…

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding

p
pt
pr
pb
pl

padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

position

pos
pos:s
pos:a
pos:r
pos:f

t
r
b
l

position: relative;
position: static;
position: absolute;
position: relative;
position: fixed;

top: ;
right: ;
bottom: ;
left: ;

background

bg
bg+
bgc
bgc:t
bgi
bgr
bgp
bgsz

background: #000;
background: #fff url() 0 0 no-repeat;
background-color: #fff;
background-color: transparent;
background-image: url();
background-repeat: ;
background-position: 0 0;
-webkit-background-size: ;
background-size: ;

z-index

z
z:a

z-index: ;
z-index: auto;

border

bd
bd+
bdc
bdt или bt
bdt+
bdr или br
bdr+
bdb, bb
bdb+
bdl или bl
bdl+
bdrs

border: ;
border: 1px solid #000;
border-color: #000;
border-top: ;
border-top: 1px solid #000;
border-right: ;
border-right: 1px solid #000;
border-bottom: ;
border-bottom: 1px solid #000;
border-left: ;
border-left: 1px solid #000;
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

text-transform

tt
tt:n
tt:c
tt:u
tt:l

text-transform: uppercase;
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;

opacity

op

opacity: ;

height

h
h:a

height: ;
height: auto;

width

w
w:a

width: ;
width: auto;

transition

trs
trsde
trsdu
trsp

transition: prop time;   
transition-delay: time;   
transition-duration: time;   
transition-property: prop;

display

d
d:b
d:n
d:f
d:if
d:i
d:ib
d:li
d:tb
d:tbc

display: block;
display: block;
display: none;
display: flex;
display: inline-flex;
display: inline;
display: inline-block;
display: list-item;
display: table;
display: table-cell;

font-family, font-size, font-weight

ff
fz
fw

font-family: ;
font-size: ;
font-weight: ;

visibility

v
v:v
v:h
v:c

visibility: hidden;
visibility: visible;
visibility: hidden;
visibility: collapse;

overflow

ov
ov:v
ov:h
ov:s
ov:a

overflow: hidden;
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

color

c
c:r
c:ra

color: #000;
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 0.5);

transform

trf
trf:r
trf:sc
trf:sc3
trf:t
trf:t3

transform: ;
transform: rotate(angle);
transform: scale(x, y);
transform: scale3d(x, y, z);
transform: translate(x, y);
transform: translate3d(tx, ty, tz);

flex

fx
fxb
fxd
fxf
fxg
fxsh
fxw
fxw:n
fxw:w

flex: ;
flex-basis: ;
flex-direction: ;
flex-flow: ;
flex-grow: ;
flex-shrink: ;
flex-wrap: ;
flex-wrap: nowrap;
flex-wrap: wrap;

justify-content

jc
jc:c
jc:fe
jc:fs
jc:sa

justify-content: ;
justify-content: center;
justify-content: flex-end;
justify-content: flex-start;
justify-content: space-around;

align-items

ai
ai:b
ai:c
ai:fe
ai:fs
ai:s

align-items: ;
align-items: baseline;
align-items: center;
align-items: flex-end;
align-items: flex-start;
align-items: stretch;

content

cnt

content:'';

text-decoration

td или td:n
td:u
td:o
td:l

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

line-height

lh

line-height:;

letter-spacing

lts
lts-n

letter-spacing: ;
letter-spacing: normal;

outline

ol
ol:n

outline: ;
outline: none;

Шпаргалка

В официальной документации Emmet есть ссылка на прекрасную шпаргалку по сокращенному написанию кода с помощью Emmet. Шпаргалка довольно объемная, но визуально оформлена довольно приятно в темном фоне (как любят многие кодеры и я в том числе).

Ссылка — https://docs.emmet.io/cheat-sheet/.

Пожалуй я уже завершу. Да, заметка получилась не маленькой. Но шпаргалки по большому счету маленькие не бывают.

На этом все. Если есть вопросы/пожелания, задаем в комментариях. Всем удачи! Всем пока!