CSS-club – настройка внешнего вида сайта

Некоторые плюшки, которые не описаны в документации по /bb_codes.

Пользовательский элемент<div> и <span>

---

С помощью BBCode вы можете создать блочный HTML-элемент <div>:

[div]Текст в контейнере[/div]

А также строчный HTML-элемент <span>:

[span]Текст в контейнере[/span]

К этому элементу можно добавить любой класс в том числе уже используемые на сайте классы:

[div=subheadline]Заголовок[/div]

Класс записывается через знак равно, последующие классы – через пробел:

[div=subheadline red]Заголовок[/div]

Классы subheadline и red – это классы, используемые на сайте Шикимори в его собственном css стиле. Больше примеров использования заголовков можно найти тут.
Вы можете добавить свой класс с произвольным именем и оформить его через настройки внешнего вида сайта.


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

[div=subheadline data-sync]Заголовок[/div]
[div=subheadline data-sync=header_sub]Заголовок[/div]
[div data-sync=header_sub]Заголовок[/div]

На название и содержимое атрибута накладывается жёсткое ограничение: только английский алфавит, цифры и нижнее подчёркивание.
Подробно про использование data-* атрибутов: developer.mozilla.org

Спойлеры

---

[spoiler=Спойлер]Скрытый текст[/spoiler]

Новый вид спойлеров отображается только, если его код написан в начале новой строки (иногда требуется дополнительный перевод строки от предыдущих bb-кодов).

[spoiler=Спойлер is-fullwidth]Скрытый текст[/spoiler]

Добавление атрибута is-fullwidth для заполнения всей доступной ширины.

[spoiler=Спойлер is-fullwidth is-centered]Скрытый текст[/spoiler]

При добавлении атрибута is-centered текст будет расположен по центру.

Дополнительно:
Вы можете создать свой спойлер из любых элементов с помощью класса to-process и атрибута data-dynamic:

[div=to-process data-dynamic=spoiler_block]
[div=b-button]Кнопка[/div]
[div=hidden]Контент[/div]
[/div]

Первый элемент внутри блока to-process всегда будет кнопкой для спойлера, а второй — контентом. Изначально контент не скрывается, поэтому к этому элементу добавляется класс hidden. Результат:

Если вам нужен изначально открытый спойлер, то к контейнеру нужно добавить класс is-opened, при этом класс hidden для контента добавлять не нужно:

[div=is-opened to-process data-dynamic=spoiler_block]
[div=b-button]Кнопка[/div]
[div]Контент[/div]
[/div]

Flexbox

---

Немного utility-классов на Шики!

Возможности Flexbox можно изучить тут:

• https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox
  
• https://codepen.io/enxaneta/full/adLPwv
  

Использование Flexbox позволит вам выравнивать контент по вертикали:



Делать отступы между элементами на основе доступного пространства:


Выравнивать текст по левому краю внутри блока [center]:

Utility-классы

---

Еще немного utility-классов на Шики!

Настройка свойства display у элементов.

Строчный элемент:

[div=d-inline]Строчный div[/div]

Блочный элемент:

[span=d-block]Блочный span[/span]

Блочный элемент с поведением строчного:

[div=d-inline-block]Блочный div[/div]

Блочный элемент с flex-содержимым:

[div=d-flex]Flex-контейнер[/div]

Блочный элемент с flex-содержимым и поведением строчного элемента:

[div=d-inline-flex]Flex-контейнер[/div]

Скрытый элемент:

[div=hidden]Скрытый элемент[/div]

Изменение свойства padding у элементов. Класс начинается с p-, затем добавляется цифра от 0 до 10, обозначающая размер отступа (производная от размера шрифта сайта, а не конкретного элемента). Отступы можно настраивать отдельно для каждой стороны, изменив начало класса на pt-, pr-, pb- или pl- для отступов сверху (padding-top), справа (padding-right), снизу (padding-bottom) или слева (padding-left) соответственно.

Обычная цитата:

Countin' flowers on the wall

> Countin' flowers on the wall

[div=b-quote-v2][div=quote-content]Countin' flowers on the wall[/div][/div]

Цитата с большими отступами:

[div=b-quote-v2 p-5][div=quote-content]Countin' flowers on the wall[/div][/div]

Цитата с большими отступами везде, кроме левого края:

[div=b-quote-v2 p-5 pl-0][div=quote-content]Countin' flowers on the wall[/div][/div]

Изменение свойства margin у элементов. Настраивается точно также как и padding. Существуют похожие классы, такие как m0, m8, m30 и т.д., но они устанавливают только нижний отступ, поэтому лучше использовать универсальные классы.

[div=b-quote-v2 p-1][div=quote-content m-5]Countin' flowers on the wall[/div][/div]

[div=b-quote-v2 p-1][div=quote-content m-4 mt-0 mb-2]Countin' flowers on the wall[/div][/div]

Цветной текст

---

Пример:

[span=text-blue]text-blue[/span]

Возможные значения:
text-blue
text-brown
text-gray
text-green
text-magenta
text-orange
text-pink
text-powderblue
text-purple
text-red
text-skyblue
text-yellow

Колонки

---

С помощью элемента <div> и классов в стандартном стиле Шики можно создать разные виды колонок.
Код самих колонок неизменен: [div=c-column]Содержимое[/div].
А код контейнера меняется в зависимости от размера колонок, расстояния между ними и отсутствия мобильной адаптации:

• cc- – общее начало для класса контейнера.
  
• Цифра от 2 до 9 – определяет размер колонок: 100% контейнера будут поделены на эту цифру. Расстояние между колонками будет равно 4%.
  
• Чтобы изменить расстояние между колонками для колонок сс-6 – сс-9 надо добавить -g15 или -g0 для расстояния между колонками 1.5% и 0% соответственно.
  
• Для отключения мобильной адаптации после цифры для колонок сс-2 – сс-4 можно добавить букву a после цифры.
  

Кроме того, можно изменить стандартные колонки с помощью utility-классов:

Переключатель класса active

---

Класс user-defined добавленный к любому div-элементу превратит его в переключатель. При нажатии на элемент к нему будет добавлен класс active (или убран, если он уже имеется).

[div=user-defined]Переключатель[/div]

Переключатель класса active (несколько элементов)

---

В отличие от предыдущего переключателя, этот переключает класс active между несколькими элементами. И требует куда большего кол-ва кода:

[div=to-process data-dynamic=switcher data-switcher=sw1]Элемент 1[/div]
[div=to-process data-dynamic=switcher data-switcher=sw1]Элемент 2[/div]

В атрибуте data-switcher можно указать название переключателя (без пробелов, только символы A-z,0-9,-,_), чтобы сделать несколько различных переключателей.

Табы

---

Класс to-process и атрибут data-dynamic=tabs обязательны для контейнера с табами. Внутри этого контейнера скрипт находит элементы с атрибутом data-tab-switch и data-tab, которые будут расцениваться как "Кнопки табов" и "Табы" соответственно. Порядок "кнопка1 кнопка2 таб1 таб2" строгий ("кнопка1 кнопка2 таб2 таб1" работать не будет), т.к. считывается положение элемента в контейнере. Между кнопками переключается класс active, между табами – класс hidden.


Обратите внимание, что data-параметры в коде – это атрибуты, а не классы, поэтому, если у элемента нет классов, атрибут указывается через пробел после div, а не знак равно. Значение атрибута указывается через знак равно.

Атрибуты в CSS указываются в квадратных скобках:

/* Стиль кнопок для табов */
[data-tab-switch] {
  color: #176093;
}

/* Стиль активной кнопки для табов */
.active[data-tab-switch] {
  color: #ff1402;
}

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