Я собираюсь выступить на Drupalcon Vienna, и я невероятно взволнован ⁽¹⁾. Выступление на конференции может потребовать много усилий, поэтому, естественно, я начал с того, что избегал настоящей работы и вместо этого делал продуктивную прокрастинацию:
- Обязуюсь тренироваться на Уистлер ГранФондо
- Создайте тему Reveal.js для нового бренда Myplanet
Возможно, было проще просто использовать великолепно выглядящий шаблон Keynote, уже созданный нашими дизайнерами, но я могу оправдать усилия, предоставив возможность экспериментировать. В отличие от создания веб-сайтов, которые должны выжить в дебрях Интернета, это то, что должно работать только на моем компьютере (и на компьютерах моих коллег), где, как я знаю, это будет видно в последней версии браузера и может полагаться на такие вещи, как Viewport Units, Flexbox и CSS Grids, не беспокоясь о необходимости полифилов, резервных вариантов или исправления ошибочного поведения в старых браузерах.
Это также уникальная среда для применения адаптивного веб-дизайна. Во время презентации проектор может быть HDMI с разрешением 1280 × 720 или 1920 × 1080. На прошлой конференции в одной из комнат, в которой я оказался, неожиданно было только VGA для проектора, поддерживающего разрешение 1024 × 768 пикселей. Поскольку моя презентация также будет опубликована после конференции, люди смогут просматривать ее при любом разрешении рабочего стола своего компьютера, какой-либо части экрана нестандартного размера, установленной в их браузере, или даже на мобильном устройстве. Хотя размер шрифта 16 пикселей может быть легко читаемым на настольном компьютере любого размера, он будет казаться тем меньше, чем выше разрешение проектора; не подходит для людей в дальнем конце комнаты, пытающихся прочитать и понять пример кода.
По умолчанию Reveal.js действует как большинство настольных программ для презентаций: вы устанавливаете размеры своей презентации (обычно в соотношении 4: 3 или 16: 9), а затем все размещается в фиксированных единицах. При презентации все будет пропорционально масштабировано для сохранения относительных размеров. Например, если вы установите для презентации высоту 720 пикселей и базовый размер шрифта 16 пикселей, при представлении на экране высотой 1080 пикселей ваш базовый размер шрифта от 1,5 до 24 пикселей будет масштабироваться. Если экран, на который вы выводите изображение, не соответствует соотношению сторон, на котором вы создали презентацию, ваша презентация масштабируется так, чтобы соответствовать наименьшему размеру экрана, и при необходимости добавляется дополнительное пространство для заполнения остальной части экрана. Первым шагом является указание Show.js, что вместо этого он должен изменять размер слайдов до полного размера области просмотра, а не масштабировать их:
Reveal.initialize({
width: "100%",
height: "100%",
margin: 0,
minScale: 1,
maxScale: 1
});
Теперь, когда слайды адаптивны, абсолютный размер шрифта становится проблемой. Переменная $ mainFontSize SASS применяется к контейнеру .reveal и по умолчанию имеет значение 40 пикселей, что будет гигантским на маленьких дисплеях и не будет настраиваться для отображения с постоянным размером между Дисплеи 720p и 1080p. Чтобы настроить размер экрана, это должна быть относительная единица области просмотра, а для использования единиц rem необходимо установить базовый размер шрифта в элементе html. Использование 16 пикселей на дисплее с разрешением 1280 × 720 пикселей в качестве размера шрифта по умолчанию после небольшого округления, которое дает 2,25 об / мин; использование vmin вместо vh сохраняет размер шрифта постоянным, если дисплей ориентирован в книжной, а не в альбомной ориентации. Затем, чтобы переменная $ mainFontSize не имела приоритета над корневым значением, для нее устанавливается значение наследовать вместо единицы длины. Наконец, единицы просмотра работают отрицательно на очень маленьких дисплеях (на iPhone6 2,25vmin составляет всего 8,4 пикселя), поэтому медиа-запрос гарантирует, что на самом маленьком из дисплеев базовый размер шрифта составляет 14 пикселей. Единицы области просмотра также полезны для полей и отступов, сохраняя согласованность пробелов между размерами отображения.
Больше всего мне хотелось поэкспериментировать с использованием CSS Grids для верстки. Хотя конечный результат довольно прост, использование сеток значительно упрощает позиционирование элементов, используя гораздо меньше разметки, чем старые стратегии. Столбцы и строки могут иметь фиксированный размер, настраиваться по размеру их содержимого или расширяться, чтобы заполнить доступное пространство. В макете титульного слайда информация об авторе презентации размещается внизу слайда, 40% доступной ширины от правого края. Заголовок и описание, помещенные внутри содержащего элемента, выравниваются по вертикали в пределах доступного пространства, оставшегося между логотипом вверху и информацией об авторе внизу.
.reveal .slides section.title .grid-wrapper {
box-sizing: border-box;
display: grid;
grid-template-areas:
"header header"
"content content"
". credit";
grid-template-columns: auto 40%;
grid-template-rows: 6vmin 1fr auto;
grid-column-gap: 10vmin;
height: 100%;
padding: 10vmin;
}
.logo {
grid-area: header;
}
.content {
align-self: center;
grid-area: content;
}
.credit {
grid-area: credit;
}
Также легко настроить макет с помощью медиа-запросов. Для небольших дисплеев сетка изменяется на один столбец, а информация об авторе смещается вправо.
@media (max-width: 568px) {
.grid-wrapper {
grid-template-areas: "header" "content" "credit";
grid-template-columns: auto;
}
.credit {
justify-self: end;
}
}
На более широких дисплеях контейнер содержимого получает свою собственную сетку, помещая заголовок и описание в одну строку и выравнивая описание с информацией об авторе.
@media (min-width: 1280px) {
.content {
display: grid;
grid-template-areas: "title description";
grid-template-columns: auto 40%;
grid-column-gap: 10vmin;
}
h1 {
grid-area: title;
}
.description {
grid-area: description;
}
}
И вот оно; Тема Reveal.js для нашего нового бренда. Я с нетерпением жду возможности продолжить работу с CSS Grid, чтобы воспроизвести некоторые из более сложных шаблонов слайдов. Теперь мне нужно проехать несколько километров ²⁾.
⁽¹⁾ И невероятно нервничал.
⁽²⁾ И подготовить содержание моей презентации.
