Гайд для настройки грида для друида-хилера. Полное руководство по CSS Grid

Примеры:

minmax() - функция

Позволяет задавать минимальное и максимальное значения для ряда/колонки. Используется в свойствах, где нужно задавать размер: grid-template-rows: , grid-template-columns: , grid-template: .

Minmax(мин_значение, макс_значение)

Значение может быть:

px, em, rem, ... - единицы длины (100px)
% - проценты (10%)

fr - гибкие размеры. Может использоваться только для макс. значения.

max-content - наименьший возможный размер ячейки, при котором содержимое свободно в ней умещается. Например, если в ячейке текст, идеальной шириной ячейки будет вся длина текста (в одну строку без переносов).

min-content - наименьший размер, при котором ячейка не переполняется. Например, если в ячейке текст то ширина будет равна самому длинному слову в тексте.

auto - зависит от того, используется оно как максимальное или минимальное значение в функции minmax() :

если в качестве максимума, то тоже самое что max-content .
если в качестве минимума, то значение будет минимальным возможным размером для ячейки. Такой размер отличается от min-content и задается свойствами min-width или min-height .

Примеры:

Варианты использования:

Grid-template-columns: minmax(100px, 200px) 1fr 1fr; grid-template-columns: minmax(200px, 50%) 1fr 1fr; grid-template-columns: minmax(200px, 1fr) 1fr 1fr; grid-template-columns: minmax(min-content, max-content) 1fr 1fr; grid-template-columns: minmax(auto, auto) 1fr 1fr; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Если указанное максимальное значение окажется меньше минимального, оно игнорируется и работает только мин. значение.

grid-row-gap: grid-column-gap: grid-gap:

grid-row-gap: задает разрыв между рядами.
grid-column-gap: задает разрыв между колонками.
grid-gap: задает разрыв для рядов и колонок разом. Это сокращение для двух предыдущих свойств. Если указать один параметр он будет выставлен для обоих значений.

// синтаксис: grid-row-gap: размер; grid-column-gap: размер; grid-gap: размер размер; /* row column */ grid-gap: размер;

Примеры:

grid-column-gap: 10px; grid-row-gap: 15px;

Заметка: префикс grid- будет удален и названия свойств станут: column-gap: и row-gap: . Chrome 68+, Safari 11.2 и Opera 54+ уже поддерживают свойства без этого префикса.

align-content: justify-content: place-content:

Выравнивает ряды/колонки. Выравниваются ячейки сетки, не элементы внутри ячеек. Чтобы выровнять элементы, используйте: justify-items , align-items , place-items .

// синтаксис: align-content: значение; // выравнивает ряды по вертикали ↓ justify-content: значение; // выравнивает колонки по горизонтали ←→ place-content: значение; // сокращенная запись: установит оба значения place-content: align-content justify-content; // сокращенная запись

Значение может быть:

stretch (default) - растягивает ряды/колонки (ячейки) полностью. Все пространство контейнера заполняется. Имеет смысл только если у рядов/колонок размер не задан жестко (они резиновые). Если они не резиновые, то работает как start .
start - ряды/колонки упакованы вплотную друг к другу к начальному краю контейнера.
end - ряды/колонки упакованы вплотную друг к другу к конечному краю контейнера.
center - ряды/колонки упакованы вплотную друг к другу и находятся по середине контейнера.
space-around - свободное пространство равномерно распределяется между рядами/колонками и добавляется по краям. Получается, что крайние ряд/колонка не прижимаются к краям контейнера, но расстояние до края в два раза меньше, чем между рядами/колонками.
space-evenly - тоже что и space-around , только расстояние до краев контейнера такое же как и между рядами/колонками.
space-between - крайние ряд/колонка прижимаются к краям контейнера и свободное место равномерно распределяется между рядами/колонками.

Редкие значения:

Примеры:

Полный синтаксис:

left - для justify-content , не работает для align-content . Колонки упакованы вплотную друг к другу к левому краю контейнера.

right - для justify-content , не работает для align-content . Колонки упакованы вплотную друг к другу к правому краю контейнера.

flex-start

flex-end

baseline , first baseline , last baseline

Все варианты значений:

// базовое выравнивание align-content: center; align-content: start; align-content: end; align-content: flex-start; align-content: flex-end; align-content: normal; // выравнивание по линии текста align-content: baseline; align-content: first baseline; align-content: last baseline; // распределение align-content: space-between; align-content: space-around; align-content: space-evenly; align-content: stretch; // когда элемент перекрывает контейнер align-content: safe center; align-content: unsafe center; // глобально align-content: inherit; align-content: initial; align-content: unset;

justify-content:

// базовое выравнивание justify-content: center; justify-content: start; justify-content: end; justify-content: flex-start; justify-content: flex-end; justify-content: left; justify-content: right; align-content: normal; // выравнивание по линии текста не имеет смысла // распределение justify-content: space-between; justify-content: space-around; justify-content: space-evenly; justify-content: stretch; // когда элемент перекрывает контейнер justify-content: safe center; justify-content: unsafe center; // глобально justify-content: inherit; justify-content: initial; justify-content: unset;

// базовое выравнивание // align-content не может быть left или right place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; // выравнивание по линии текста // для второго параметра (justify-content) не имеет смысла place-content: baseline center; place-content: first baseline space-evenly; place-content: last baseline right; // распределение place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; // глобально place-content: inherit; place-content: initial; place-content: unset;

align-items: justify-items: place-items:

Выравнивает элементы сетки - то что находится внутри ячеек сетки. Срабатывает для всех элементов grid. Чтобы выровнять сами ячейки (ряды колонки), используйте: justify-content , align-content , place-content .

// синтаксис: align-items: значение; // выравнивает элементы по вертикали ↓ justify-items: значение; // выравнивает элементы по горизонтали ←→ place-items: значение; // сокращенная запись: установит оба значения place-items: align-items justify-items; // сокращенная запись

Значение может быть:

auto (default) - указывает использовать значение justify-items: , которое задается для контейнера. Если элемент позиционирован через absolute , то применяется normal .

stretch - растягивает все элементы на всю ширину/высоту ячеек.
start - размещает все элементы в начале ячеек (слева или сверху).
end - размещает все элементы в конце ячеек (справа или внизу).
center - размещает все элементы по центру ячеек.

Редкие значения:

Примеры:

Полный синтаксис:

Выше для упрощения был не полный синтаксис, однако он покрывает 99% нужного.

left - для justify-items , не работает для align-items . Все элементы прижимаются к левому краю ячеек.

right - для justify-items , не работает для align-items . Все элементы прижимаются к правому краю ячеек.

flex-start - тоже что start для грид-сетки. Т.е. если элементы не являются детьми flex контейнера ведет себя как start .

flex-end - тоже что end для грид-сетки. Т.е. если элементы не являются детьми flex контейнера ведет себя как end .

baseline , first baseline , last baseline - выравнивает по линии текста (первой или последней). Обратная совместимость: для first baseline это start , для last baseline это end .

legacy - позволяет управлять тем, как будет наследоваться значение детьми.
Если legacy указано без left , right , center , то значение просто наследуется у родителя или равно normal .
Когда justify-self:auto ссылается на значение justify-items: , берется значение без слова legacy , например у legacy left будет взято left . Это нужно для правильного выравнивания тега или элемента с атрибутом align .

Все варианты значений:

// базовые значения align-items: normal; align-items: stretch; // выравнивание позиции // align-items не может быть left или right align-items: center; align-items: start; align-items: end; align-items: flex-start; align-items: flex-end; align-items: self-start; align-items: self-end; // выравнивание по линии текста align-items: baseline; align-items: first baseline; align-items: last baseline; // когда элемент перекрывает контейнер align-items: safe center; align-items: unsafe center; // глобально align-items: inherit; align-items: initial; align-items: unset;

// базовые значения justify-items: auto; justify-items: normal; justify-items: stretch; // выравнивание позиции justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; // выравнивание по линии текста justify-items: baseline; justify-items: first baseline; justify-items: last baseline; // когда элемент перекрывает контейнер justify-items: safe center; justify-items: unsafe center; // выравнивание с приоритетом заимствования значения у родителя justify-items: legacy right; justify-items: legacy left; justify-items: legacy center; // глобально justify-items: inherit; justify-items: initial; justify-items: unset;

// базовые значения place-items: auto center; place-items: normal start; // выравнивание позиции place-items: center normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right normal; // выравнивание по линии текста place-items: baseline normal; place-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; // глобально place-items: inherit; place-items: initial; place-items: unset;

grid-auto-rows: grid-auto-columns:

Устанавливает размер для авто-создаваемых (неявных) рядов/колонок.

Колонки/ряды создаются автоматически, когда в сетке элементов больше чем помещается в определенные ряды/колонки (ячейки) или когда элемент размещается за пределы указанной сетки.

// синтаксис: grid-auto-columns: размер; grid-auto-rows: размер;

Возможные значения размеров смотрите в описании и - может быть px, em, %, fr и т.д.

Примеры:

Чтобы понять как создаются авто-ячейки сетки, давайте представим что у нас есть сетка 2x2 - 2 ряда и 2 колонки:

Grid-template-columns: 60px 60px; grid-template-rows: 90px 90px

Теперь, попробуем разместить элементы в сетку указав им позиции через свойства:

Item-a { grid-column: 1; grid-row: 2; } .item-b { grid-column: 5; grid-row: 2; }

Элемент.item-b мы попросили разместиться в несуществующей колонке 5. У нас только 2 колонки, поэтому сетка автоматически расшириться и ей будут добавлены еще 3 колонки с auto шириной. Текущие свойства позволяют нам задать размеры для таких неявных колонок:

Grid-auto-columns: 60px;

Интересный момент для неявных колонок рядов и repeat() :

grid-auto-flow:

Позволяет изменить логику размещения элементов в пустые ячейки. По умолчанию алгоритм такой → ↓ → можно сделать так ↓ → ↓ .

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

// синтаксис: grid-auto-flow: row | column | row dense | column dense

row (default) - расставляет элементы в сетке по рядам → ↓ → . Добавляет ряды если в сетке нет места.

column - расставляет элементы в сетке по колонкам ↓ → ↓ . Добавляет колонки если в сетке нет места.

dense - включает «dense» алгоритм заполнения, который пытается разместить элементы так, чтобы не оставалось пустых пространств (по умолчанию работает алгоритм «sparse»). При этом элементы могут располагаться не по-порядку. При вставке каждого следующего элемента, алгоритм проверяет нет ли пустой ячейки сзади куда может поместиться текущий элемент, если есть, помещает его туда а не в следующую ячейку. dense имеет смысл только при наличии областей в сетке - это когда элементу указано разместиться сразу в несколько ячеек (через span), тогда он как правило не помещается в одну ячейку и остается пустое место.

Примеры:

Допустим у нас есть такой HTML:

item-a

item-b

item-c

item-d

item-e

Теперь, мы создали сетку с 5-ю колонками и двумя рядами и два элемента расположили в конкретные ячейки:

Grid { display: grid; grid-template: 60px 60px 60px 60px 60px / 30px 30px; /* по умолчанию: grid-auto-flow: row; */ }

Теперь установим grid-auto-flow: column:

grid:

Позволяет сокращенно записать свойства:

grid-template-rows:
grid-template-columns:
grid-template-areas:
grid-auto-rows:
grid-auto-columns:
grid-auto-flow:

Т.е. в этом свойстве можно описать почти все свойства грид-сетки. Однако, тут можно описать свойства только для «явных» или «неявных» рядов/колонок, сразу для тех и других не получиться. Если нужно указать свойства для тех и других, то нужно дописывать соответствующие свойства в дополнении к grid: .

// синтаксис: grid: none grid: grid-template grid: grid-template-rows / grid-template-columns grid: grid-template-areas grid: grid-template-rows / grid-auto-columns? grid: grid-auto-rows? / grid-template-columns // то что в или до? - можно не указывать

none - устанавливает все свойства в начальное состояние.

grid-template-rows / grid-auto-columns? - ключевое слово auto-flow с правой стороны слэша устанавливает grid-auto-flow: column . dense включает алгоритм упаковки «dense». Если не указан grid-auto-columns , то он будет равен auto .

grid-auto-rows? / grid-template-columns - ключевое слово auto-flow с левой стороны слэша устанавливает grid-auto-flow: row . dense включает алгоритм упаковки «dense». Если не указан grid-auto-rows , то он будет равен auto .

Примеры:

grid: "header header header header" "main main main right right" "footer footer footer footer"; // тоже что: grid-template-areas: "header header header header" "main main main right right" "footer footer footer footer"; grid: 100px 300px / 3fr 1fr; // тоже что: grid-auto-flow: row; grid-template-columns: 200px 1fr; grid: auto-flow dense 100px / 1fr 2fr; // тоже что: grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 2fr; grid: 100px 300px / auto-flow 200px; // тоже что: grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px;

Также можно указать более сложный, но удобный для настройки все и сразу:

Grid: "header header header" 1fr "footer footer footer" 25px / auto 50px auto; // тоже что: grid-template-areas: "header header header" "footer footer footer"; grid-template-rows: 1fr 25px ; grid-template-columns: auto 50px auto;

И еще варианты:

Grid: repeat(auto-fill, 5em) / auto-flow 1fr; grid: auto-flow 1fr / repeat(auto-fill, 5em); grid: auto 1fr auto / repeat(5, 1fr); grid: repeat(3, auto) / repeat(4, auto);

Для элементов

CSS свойства: float , display:inline-block , display:table-cell , vertical-align и column-* никак не влияют на элементы grid контейнера. У grid сетки свои правила...

Grid-row-start: grid-row-end: grid-column-start: grid-column-end: grid-row: grid-column:

Указывает положение элемента в сетке. Т.е. размещает элемент в указанную ячейку. Указывать нужно имя или номер линии к которой относится ячейка и к которой нужно прикрепить элемент.

grid-column и grid-row - это сокращение для свойств: grid-column-start/grid-column-end и grid-row-start / grid-row-end . Можно указать только первое (одно) значение, оно будет относиться к начальной линии и элемент будет растягиваться на 1 ряд/колонку (т.е. будет помещен в одну ячейку начальная линия которой указана).

// синтаксис: grid-row-start: значение; // где начинается линия ряда grid-row-end: значение; // где кончается линия ряда grid-column-start: значение; // где начинается линия колонки grid-column-end: значение; // где кончается линия колонки grid-row: grid-row-start / grid-row-end; grid-column: grid-column-start / grid-column-end; // можно указать одно значение, второе значение будет span 1 grid-row: grid-row-start; grid-column: grid-column-start;

Значение может быть:

Примеры:

.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 }

.item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2 grid-row-end: span 2 }

Если не установлены свойства grid-column-end/grid-row-end элемент по умолчанию будет растягиваться на 1 ряд/колонку. align-self: justify-self: place-self:

Выравнивает текущий элемент внутри ячейки. Применяется к отдельному элементу контейнера.

// синтаксис: align-self: значение; // выравнивает элемент внутри ячейки по вертикали ↓ justify-self: значение; // выравнивает элемент внутри ячейки по горизонтали ←→ place-self: значение; // сокращенная запись: установит оба значения place-self: align-self justify-self; // сокращенная запись

Значение может быть:

stretch (defailt) - растягивает текущий элемент на всю ширину/высоту ячейки.
start - размещает текущий элемент в начале ячейки (слева или сверху).
end - размещает текущий элемент в конце ячейки (справа или внизу).
center - размещает текущий элемент по центру ячейки.

Редкие значения:

safe значение - если ширина или высота элемента превышает размер ячейки, то значение переключается на start. В значении тут может быть только: center или end .

# Каркас для игрового приложения

Game Title

Score

Stats

Board

Controls

Усложним задачу.

Теперь нам нужно сделать так чтобы при повороте мобильного устройства, каркас менялся и получалось так:

В этом случае удобнее будет использовать области Grid сетки.

/* книжная ориентация */ @media (orientation: portrait) { #grid { display: grid; /* создадаим структуру сетки и укажем названия областей, * Такая структура будет работать по умолчанию и подоходиь для альбомной ориентации. */ grid-template-areas: "title stats" "score stats" "board board" "ctrls ctrls"; /* укажем размеры для рядов и колонок. */ grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; height: 100vh; } } /* альбомная ориентация */ @media (orientation: landscape) { #grid { display: grid; /* создадаим структуру сетки и укажем названия областей, * Такая структура будет работать по умолчанию и подоходиь для альбомной ориентации. */ grid-template-areas: "title board" "stats board" "score ctrls"; /* укажем размеры для рядов и колонок. */ grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; height: 100vh; } } /* расположим элементы в именованные областя сетки */ #title { grid-area: title; } #score { grid-area: score; } #stats { grid-area: stats; } #board { grid-area: board; } #controls { grid-area: ctrls; justify-self: center; }

Game Title

Score

Stats

Board

Controls

Поддержка браузерами

Grid поддерживают 92% браузеров.

Ниже поддержка Grid браузерами по данным CanIuse . Число указывает, что браузер поддерживает функцию в этой версии и выше.

Desktop

Chrome	Opera	Firefox	IE	Edge	Safari
57	44	52	11*	16	10.1

Mobile / Tablet

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
10.3	-	-	62	66	57

Чтобы проверить в css поддерживает ли текущий браузер Grid, можно использовать @supports (в IE не работает):

@supports(display: grid) { /* grid поддерживается браузером */ div { display: grid; } } @supports not(display: grid) { /* grid НЕ поддерживается браузером */ div { display: flex; } }

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

Итак, Grid. Мне, если честно, сложновато привести комплексный обзор на тему «почему Grid- это манна небесная, а остальные хилботы – отстой» . Вероятно, потому что они не отстой, но у меня что-то c ними не срослось, а, все таки, тупо писать о том, о чем у тебя знания на уровне чтения замечаний «хилбот форева он крутой низачтоего не брошу потому что он хороший!». Есть какие-то комплексообразные стереотипы на тему VuhDo, Healbot и прочих и пусть они есть. Наша тема сегодня – Grid и, кстати, по этой же причине я не хотел бы видеть в комментариях замечания формата «йопт, так хилбот может» (если я не сравниваю – это не повод играть в КО) и «мляговно, хилбот может круче» (лучше спросите – а может ли грид «вот так»).

Grid из коробки
Первичная настройка
Суть Grid
Добавляем индикатор маны
Визуализируем лечение для друида
Настройка IconBar
Настраиваем мышь
Заключение

1. Grid из коробки

Первое что мы делаем – устанавливаем Grid. Вот список того, что нам пригодится:

Grid – как бы это, ядро =)
GridAutoFrameSize – этот плагин автоматически будет подстраивать размер грида под текущий состав рейда.
GridClickSets – альтернатива Clique вроде как. Clique не видел, этот использую, но хитро – возможно, вам не понравится
GridIndicatorIconBar – моя манна небесная, облегчившая жизнь раз так в десять. Суть – показывает панель иконок =)
GridManaBars – показывает ману. Полезно. Даже энергию и силу рун показывает…
GridStatusHots – показывает хоты друида

После этого переходим ко второму шагу

2. Первичная настройка

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

Зайдите во вкладку «Расположение» Вы увидите следующее окно:

Тут все просто по идее, например, если вы не хотите, чтобы на ОЛО вылезала рамка на 40 человек – просто поставьте в «Расположение на ПС» опцию «Для группы из 25 чел». Тут же вам предлагается выбрать горизонтальное или вертикальное отображение групп (близзард, например, располагает группу вертикально, слева под вашим портретом) , а также запретить Grid-у вылазить за рамки экрана и закрепить его на установленном месте. Чуть ниже расположены настройки, которые отвечают за внешние параметры. Рекомендую ужать заполнение в ноль, Интервалов хватит равным 2. Масштаб – на ваше усмотрение. Цвета фона и границы – тоже на ваше усмотрение =)

Теперь переходим в следующую вкладку «Фреймы – Дополнительно»:

Высота фреймов (у меня = 30)
Ширина фреймов (60)
Ориентация фреймов (горизонтально – здоровье убывает справа налево, вертикально – сверху вниз)
Текстура фреймов (да, кому-то очень важно, например, я не могу видеть красявые всякие – мне нужен именно минимализм – и так переизбыток информации)
Размер шрифта

«Текст в центре 2 индикатор» нужно включить чтобы сдвинуть имя персонажа вверх.

И напоследок зайдем еще в одну вкладку «Фреймы»:

Возможно, тут понадобится кому-то функция обращения цвета полос и нужно будет увеличить длину текста в центре. По умлочанию длина – 4 символа и мое имя было «Пече», что меня крайне раздражало =)

3. Суть Grid

Китайцы советовали учить ловить рыбу, а не кормить рыбой, так что возьмите в руки удочки. Настройка Grid представляет собой две задачи:

Сперва вы настраиваете модули, которые отвечают за слежение во вкладке «Статус»
Затем вы настраиваете «ячейки», куда можно будет запихнуть модули во вкладке «Фреймы».

По сути, это очень простое и эффективное решение, но не до всех сразу доходит. Первое действие вполне годится «из коробки» для большинства модулей, так что примером сразу возьмемся за второе.

Выбираем в закладке «Фреймы» ячейку «Текстовая строка» и смотрим что там есть:

Все чекбоксы (такие квадратики куда можно тыкнуть галочку, если не в курсе) представляют собой разные модули. Включение модуля позволяет выводить информацию модуля в редактируемой ячейке. Небольшой прикол в том, что одновременно может выводиться несколько модулей, но только один из них будет виден. Grid определяет кто заслужил видимость больше всего с помощью опции модулей «Приоритет» (естественно, выставляется в самих модулях) – чей приоритет больше – тот и будет виден. Если, конечно, задействован – вы не увидите модуля «Предупреждение о смерти» если игрок не мертв.

Все это говорит нам о том, что необходимую информацию нужно отметить, лишнюю – снять (и, если нужно, отметить в другой ячейке).

4. Добавляем индикатор маны

Наша первая домашняя работа – пример добавления индикатора маны. Наш первый шаг – настроить его модуль.

Приоритет может быть любым – мана будет единственной в нашей ячейке для маны =)
Я выставляю игнор всех, у кого маны нет – мне мало важно сколько у роги энергии или ДК силы рун. Если вам это важно – снимите флажки.
Фильтр радиуса по сути не нужен – хватит того, что на здоровье
Флажок «Включено» нужен =)
На вкладке «Окраска» можно выбрать себе другой цвет маны, энергии, ярости или силы рун. Ну так, чисто поржать =)

Я выбираю положение полоски маны снизу. Кому-то нравится полоска маны сбоку, но мне это не по душе. Также, во вкладке «Фреймы – Полоса маны» проверьте установлен ли флажок «Мана» и сняты ли все другие флажки.

На этом установка полосы маны закончена. Просто, не правда ли?

5. Визуализируем лечение для друида

Приступаем к тому, что в последнее время очень сильно мне упростило процесс лечения – настройка отображения хотов. Сейчас, если вы настроили все так же, как и я, ваш фрейм выглядит примерно так:

Мы видим на нем поступающее лечение, хп и ману. Все. Для проверки хотов нам надо выделить цель, посмотреть на ее баффы, прикинуть время. Долго и неудобно, а от количества баффов зависит не только ХПС ХоТов, но и эффективность нуриша с одноименным символом (+6% за каждый ХоТ – это здорово, это здорово, это очень-очень хорошо). Короче, надо как-то получить визуализацию наших ХоТов на всем рейде, причем, со временем действия, чтобы видно было когда ХоТ упадет. Сперва мне в голову пришла идея с полосками вроде quartz баффов, но по размеру как полоса маны, но количество едущих элементов просто зашкалило бы, да и неудобно следить за временем по полосам, которые движутся с разной скоростью (правда неудобно. У кварца спасает только сортировка).

Выход из ситуации выглядит так когда ХоТы только что были развешены:

В данном случае у нас закончился буйный рост (его значок первый и его уже не видно) , через пару секунд кончится омоложение (второй значок, красный – пора кастовать), цело восстановление (третий, зеленый значок) и терпит жизнецвет (последний, желтый значок). ХоТов всего 4, так что 4 квадратиков нам хватает.

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

6. Настройка IconBars

Спонсором визуализации является IconBar из аддона GridIndicatorIconBar . Нам нужно настроить, как уже говорилось ранее, модуль и ячейку. Начинаем с модуля:

Нам понадобится вкладка «Статус – Мои ХоТы». Сразу установим там частоту обновления (0.2-0.5 хватает) и приступим к настройке подпунктов «Моих ХоТов»:

Нам потребуется настроить 4 ХоТа: Восстановление, Омоложение, Буйный рост и Жизнецвет. Настройки у всех идентичны:

Цвет определяет цвет квадратика
Приоритет нам мало важен, так как для каждого квадратика будет своя ячейка
Показывать количество хотов – я не понял ваще что это но отметил ибо пусть будет если не мешает =)
Порог для цвета №2 – это оставшееся время действия хота, по достижении которого будет включен цвет № 2
Порог для цвета №3 – см. выше =)
Цвет №2 - цвет первого порога
Цвет №3 – цвет второго порога

Важна возможность самостоятельно устанавливать порог. Как писалось выше, я выбрал желтый цвет для предупреждения об окончании ХоТа, а оранжевый – для сигнала к немедленному касту. Делая поправку в 0.5-1.5 секунды на реакцию глаза-мозг-руки, я установил время второго порога = 2*время_каста или 2*ГКД, а время первого – 2*время_второго_порога. Таким образом, когда я кастую одно заклинание, я уже знаю что я буду кастовать после =)

Шаг следующий – размещаем наши квадратики. Вообще IconBar с легкостью поддерживает и иконки, то есть, можно прямо в него вставить иконки жизнецвета или того же восстановления, но я счет это нецелесообразным ввиду слишком мелкого размера квадратика. да и наглядности меньше, а где какой ХоТ я запомнил через пару минут очередного героика =)

Кстати, давайте сразу разберем мой порядок – почему он именно таков. А он таков только лишь по той причине, что именно этот порядок ярче всего отображает силу лечения каждого отдельного игрока в моем случае.

В идеале ДД (я в этой партии хожу от дд) лечатся только от БР и какую-то часть времени на всех, кроме танка, висит только БР. Первый квадратик подходит для роли почти всегда работающего лучше всего. он и сигнализирует мне о том, что в этого игрока можно влить нуриш с 20% прибавкой.

Вторым заклинанием лечение будет омоложение – оно мощное, довольно долгое и дешевое по времени. Поэтому оно висит реже БР, но чаще других спеллов (бывает и чаще БР, но это исключительные случаи).

Третьим идет Восстановление. Ввиду того, что оно еще и лечит сразу после каста – оно третье, применяемое при «как все плохо».

Четвертым остается Лайфблум, который висит 95% времени только на танке.

Полоска из 4 баффов показывает, что персонаж под максимальным ХоТом и готов к максимальному по эффективности вливанию нуриша. Помимо этого, через несколько секунд он взорвется и отхилит себя (о чем любезно подсказывает цвет четвертого квадратика). Три квадратика – это ДД некисло получил по щщам. Два квадратика – обычное АОЕ, готов к воздействию усиленного нуриша. Один второй квадратик – пациенту можно вставить быстрое восстановление.

Тестовый режим позволит увидеть без лечения где будут размещаться иконки. Удобно при выборе местоположения иконок
Number of icons – количество иконок. Нам хватит 4. На первое время =)
Icon scale – это масштаб иконок. Мне хватает 0.6
Numbers of icons per row – количество иконок на строку. Если у вас штук 10 иконок – это полезно. При 4 – полезно разве что при размещении квадратом.
Icon spacing – расстояние между иконками. У меня оно крайне большое для того, чтобы быстро осознавать взглядом какой ХоТ активен. Чем иконки ближе, тем проще ошибиться в разных комбинациях ХоТов
Bar anchoring point – якорь, к которому привяжется местоположение панели
Unit frame attaching point – якорь фрейма
X-axis и Y-axis офсеты – это смещение по осям X и Y. Важны при выборе позиции вашего IconBar

Теперь настроим порядок, о котором я писал выше. Открываем вкладку «Фреймы – IconBar».

Grid из коробки
Первичная настройка
Суть Grid
Добавляем индикатор маны
Визуализируем лечение для друида
Настройка IconBar
Настраиваем мышь
Заключение

1. Grid из коробки

Первое что мы делаем – устанавливаем Grid. Вот список того, что нам пригодится:

Grid – как бы это, ядро =)
GridAutoFrameSize – этот плагин автоматически будет подстраивать размер грида под текущий состав рейда.
GridClickSets – альтернатива Clique вроде как. Clique не видел, этот использую, но хитро – возможно, вам не понравится
GridIndicatorIconBar – моя манна небесная, облегчившая жизнь раз так в десять. Суть – показывает панель иконок =)
GridManaBars – показывает ману. Полезно. Даже энергию и силу рун показывает…
GridStatusHots – показывает хоты друида

После этого переходим ко второму шагу

2. Первичная настройка

Зайдите во вкладку «Расположение» Вы увидите следующее окно:

Теперь переходим в следующую вкладку «Фреймы – Дополнительно»:

Высота фреймов (у меня = 30)
Ширина фреймов (60)
Ориентация фреймов (горизонтально – здоровье убывает справа налево, вертикально – сверху вниз)
Текстура фреймов (да, кому-то очень важно, например, я не могу видеть красявые всякие – мне нужен именно минимализм – и так переизбыток информации)
Размер шрифта

«Текст в центре 2 индикатор» нужно включить чтобы сдвинуть имя персонажа вверх.

И напоследок зайдем еще в одну вкладку «Фреймы»:

3. Суть Grid

Сперва вы настраиваете модули, которые отвечают за слежение во вкладке «Статус»
Затем вы настраиваете «ячейки», куда можно будет запихнуть модули во вкладке «Фреймы».

Выбираем в закладке «Фреймы» ячейку «Текстовая строка» и смотрим что там есть:

4. Добавляем индикатор маны

Наша первая домашняя работа – пример добавления индикатора маны. Наш первый шаг – настроить его модуль.

Приоритет может быть любым – мана будет единственной в нашей ячейке для маны =)
Я выставляю игнор всех, у кого маны нет – мне мало важно сколько у роги энергии или ДК силы рун. Если вам это важно – снимите флажки.
Фильтр радиуса по сути не нужен – хватит того, что на здоровье
Флажок «Включено» нужен =)
На вкладке «Окраска» можно выбрать себе другой цвет маны, энергии, ярости или силы рун. Ну так, чисто поржать =)

На этом установка полосы маны закончена. Просто, не правда ли?

5. Визуализируем лечение для друида

Выход из ситуации выглядит так когда ХоТы только что были развешены:

6. Настройка IconBars

Цвет определяет цвет квадратика
Приоритет нам мало важен, так как для каждого квадратика будет своя ячейка
Показывать количество хотов – я не понял ваще что это но отметил ибо пусть будет если не мешает =)
Порог для цвета №2 – это оставшееся время действия хота, по достижении которого будет включен цвет № 2
Порог для цвета №3 – см. выше =)
Цвет №2 - цвет первого порога
Цвет №3 – цвет второго порога

Четвертым остается Лайфблум, который висит 95% времени только на танке.

Тестовый режим позволит увидеть без лечения где будут размещаться иконки. Удобно при выборе местоположения иконок
Number of icons – количество иконок. Нам хватит 4. На первое время =)
Icon scale – это масштаб иконок. Мне хватает 0.6
Numbers of icons per row – количество иконок на строку. Если у вас штук 10 иконок – это полезно. При 4 – полезно разве что при размещении квадратом.
Icon spacing – расстояние между иконками. У меня оно крайне большое для того, чтобы быстро осознавать взглядом какой ХоТ активен. Чем иконки ближе, тем проще ошибиться в разных комбинациях ХоТов
Bar anchoring point – якорь, к которому привяжется местоположение панели
Unit frame attaching point – якорь фрейма
X-axis и Y-axis офсеты – это смещение по осям X и Y. Важны при выборе позиции вашего IconBar

Теперь настроим порядок, о котором я писал выше. Открываем вкладку «Фреймы – IconBar».

Чтобы открыть полный потенциал Grid, можно изменять способы установки размеров каждой строки и колонки. Элемент Grid поддерживает следующие стратегии изменения размеров:

Абсолютные размеры

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

Автоматические размеры

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

Пропорциональные размеры

Пространство разделяется между группой строк и колонок. Это стандартная установка для всех строк и колонок.

GridSplitter - разделенные окна

Каждый пользователь Windows встречался с разделительными полосами - перемещаемыми разделителями, которые отделяют одну часть окна от другой. Например, в проводнике Windows слева находится список папок, а справа - список файлов. Перетаскивая разделительную полосу, можно устанавливать пропорции между этими двумя панелями в окне.

В WPF полосы разделителей представлены классом GridSplitter и являются средствами Grid. Добавляя GridSplitter к Grid, вы предоставляете пользователю возможность изменения размеров строк и колонок.

Большинство программистов считают GridSplitter наиболее интуитивно понятной частью WPF. Чтобы разобраться, как использовать его для получения требуемого эффекта, нужно лишь немного поэкспериментировать. Ниже предлагается несколько подсказок:

GridSplitter должен быть помещен в ячейку Grid. Его можно поместить в ячейку с существующим содержимым - тогда понадобится настроить установки полей, чтобы они не перекрывались. Лучший подход заключается в резервировании специальной колонки или строки для GridSplitter, со значениями Height или Width, равными Auto.

GridSplitter всегда изменяет размер всей строки или колонки (вне отдельной ячейки). Чтобы сделать внешний вид GridSplitter соответствующим такому поведению, необходимо растянуть GridSplitter по всей строке или колонке, а не ограничиваться единственной ячейкой. Для этого используются свойства RowSpan иColumnSpan .

Изначально GridSplitter настолько мал, что его не видно. Чтобы сделать его удобным, понадобится указать его минимальный размер. В случае вертикальной разделяющей полосы нужно установить VerticalAlignment в Stretch (чтобы он заполнил всю высоту доступной области), a Width - в фиксированный размер (например, 10 независимых от устройства единиц). В случае горизонтальной разделительной полосы следует установить HonzontalAlignment в Stretch, a Height - в фиксированный размер.

Выравнивание GridSplitter также определяет, будет ли разделительная полоса горизонтальной (используемой для изменения размеров строк) или вертикальной (для изменения размеров колонок). В случае горизонтальной разделительной полосы необходимо установить VerticalAlignment в Center (что принято по умолчанию), указав тем самым, что перетаскивание разделителя изменит размеры строк, находящихся выше и ниже. В случае вертикальной разделительной полосы понадобится установить HorizontalAlignment в Center, чтобы изменять размеры соседних колонок.

Изменить поведение установки размеров можно через свойства ResizeDirection и ResizeBehavior объекта GridSplitter. Однако проще поставить это поведение в зависимость от установок выравнивания, что и принято по умолчанию.

Всем привет. Февраль-Март 2017 года запомнились для многих, кто работает с HTML и CSS тем, что большинство браузеров выпустили обновления, среди которых были и обновления для CSS. Теперь можно использовать спецификацию CSS Grid Layout без флагов в следующих браузерах: Firefox 52 , Chrome 57 , Opera 44 , Safari 10.1 . Какой из браузеров остался позади, думаю, вы догадываетесь. Точнее он поддерживает старую версию спецификации . Но разработчики этого браузера делают все возможное , чтобы внедрить новую спецификацию. Внедрение поддержки новой CSS Grid Layout спецификации - это самое значимое событие за прошедшие пять лет. Эта спецификация поменяет полностью подход к разработке пользовательских интерфейсов. И это круто.

Я использую Flexible Box Layout

Многие задаются вопросом: «Стоп, я использую flexbox, зачем мне еще какие-то grid’ы?». Вопрос более чем уместен. CSS Grid не заменит Flexbox и наоборот. Первое отличие - это то, что Flexbox работает только в одном измерении. Из этого следует, что мы можем размещать flex элементы только вдоль главной оси или вдоль поперечной оси. Мы не можем разместить flex элементы сразу на нескольких осях. CSS Grid в свою очередь нам позволяет работать с разметкой в двухмерном пространстве и выравнивать содержимое в обоих измерениях. Мне нравится как объясняет эту разницу Tab Atkins .

Одна из самых больших проблем при разработке пользовательских интерфейсов - это то, что при изменении дизайна, функционала или поведения любого блока приходится менять его разметку (в большинстве случаев). CSS Grid позволяет менять расположение grid элементов не меняя сам HTML. Ниже пример простой разметки на Flexbox и CSS Grid.

Основные термины

Прежде чем приступать к работе с CSS Grid, нужно разобраться с основными терминами. На основе этих терминов построена вся спецификация.

Grid container - это набор пересекающихся горизонтальных и вертикальных grid линий, которые делят пространство grid контейнера на grid области, в которые могут быть помещены grid элементы. Внутри grid контейнера есть два набора grid линий: один определяет ось столбцов, другой определяет ось строк.

Grid lines - это горизонтальные и вертикальные разделители grid контейнера. Эти линии находятся по обе стороны от столбца или строки. Автор может задать для данного элемента имя или числовой индекс, которые может использовать дальше в стилях. Нумерация начинается с единицы. Важный нюанс, данный элемент восприимчив к режиму написания, который используется на вашем ресурсе. Например, вы используете Арабский язык или любой другой язык у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.

Grid track - это пространство между двумя смежными grid линиями, вертикальными или горизонтальными.

Grid cell - это наименьшая неделимая единица grid контейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.

Grid area - это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.

Каждый элемент тесно связан друг с другом и отвечает за определенную часть grid контейнера.

Первый CSS Grid макет

Мы разобрались с основными терминами. Пришло время сделать наш первый grid макет. Ничего сложного, простенький макет три строки на три колонки, чтобы разобраться с основами. Ниже вы можете увидеть пример.
В первом варианте из примера мы создаем три колонки размером 150px 1fr 150px и три строки размером 50px auto 50px соответственно. Обратите внимание на такие значения: 1fr , auto . Давайте разберемся, что это за значения.

1fr - это специальная единица измерения введенная в данной спецификации. Она не измеряется в каких-то конкретных единицах измерения (px , em , rem , др.) Из этого следует, что мы не можем использовать ее вместе с функцией calc() . Эта единица измерения не может быть меньше единицы, а также не может принимать отрицательные значения. Она рассчитывается после того, как все остальные значения, отличные от fr , были рассчитаны.

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

Для разметки колонок и строк используются следующие правила:

Grid-template-columns: 150px 1fr auto; grid-template-rows: 50px auto 50px;
Сокращенная форма записи выглядит так:

Grid-template: 50px auto 50px / 150px 1fr auto;

Типичный шаблон на grid’ах

Давайте сделаем простенький шаблон с которым мы все знакомы. Ничего сложного, шаблон будет состоять из следующих тэгов: header , nav , aside , article , footer . Подавляющее большинство интернет ресурсов использует данный шаблон. Только знаете, даже в таком простом шаблоне наблюдается следующая проблема: «Я дизайнер, я так хочу. Я разработчик, я так не могу». С появлением CSS Grid Layout подобная проблема должна стремиться к нулю.
В данном примере мы знакомимся еще с несколькими свойствами CSS Grid Layout. Первое grid-template-areas . Оно используется для создания именованных областей grid контейнера, которые не связаны с каким-либо конкретным grid элементом. Синтаксис очень удобен, мы сразу видим какой шаблон получится на выходе. Второе свойство grid-area . Оно используется для дочернего элемента grid контейнера. Указывает в какую именованную область поместить grid элемент.

Давайте рассмотрим первый вариант grid-template-areas:

Grid-template-areas: "header header" "nav main" "footer ."
Один или больше идущих подряд символов. (точка) имеют особое значение. Если этот символ используется, то браузер его отрендерит как нулевой токен, что в свою очередь означает следующее: на его месте не будет создана именованная область grid контейнера и в нее нельзя поместить grid элемент.

Если мы не указали для какого-то дочернего grid элемента свойство grid-area , браузер автоматически распределит такие элементы. Такое поведение можно увидеть из последнего варианта, приведенного примера выше.