Автоматические отступы у картинок с обтеканием

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

img[style*="right"] {
  margin-left:  20px;
}
img[style*="left"] {
  margin-right:  20px;
}

Допиливаем возможность вставки адаптивного видео в tinymce

  1. Ищем в файле tinymce/plugins/media/plugin.min.js фрагмент:
    <iframe src="'+h.source1+'"

    и оборачиваем видеофрейм:

    <div class="videocontainer"><iframe src="'+h.source1+'" width="'+h.width+'" height="'+h.height+'"'+p+"></iframe></div>
    
    
  2. В scss-файл добавляем:
    .videocontainer {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
      iframe, object, embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

Альтернативный вариант — подключить специальную библиотеку FitVids.js.

Очистка HTML-кода от мусора

Весьма распространенная операция — перенос на сайт форматированного текста, созданного, например, в Word’е, который вставляет тонны ненужных инлайновых стилей. Далеко не всегда с этим успешно справляются популярные WYSIWYG-редакторы типа TinyMCE, хотя, казалось бы, нет особых проблем встроить в них качественный клинер. Пока же будем пользоваться он-лайновыми сервисами, один из них — лаконичный и качественный — word2cleanhtml.

Компактный вывод блоков разной высоты в несколько колонок

Найдена и опробована в действии неплохая masonry-библиотека Salvattore, которая легко внедряется в проект, например, с использованием bootstrap. В CSS-код с нашей стороны было внесено маленькое дополнение для создания отступов у колонок:

#grid .size-1of2:nth-child(2n) {
    margin-left: 10%;
}
#grid .size-1of3:nth-child(3n+2) {
    margin-left: 5%;
    margin-right: 5%;
}

Действующий пример можно посмотреть здесь.

CSS tooltips

Обнаружен годный онлайн-генератор тултипов на чистом CSS.  Код требует некоторой последующей доводки, но в большинстве случаев все будет работать как задумывалось.

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

Адаптивные таблицы

Простой и быстрый способ сделать так, чтобы таблицы подстроились под мобильные устройства — это обернуть их div’ом, используя следующий код в духе bootstrap:

div.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}