skellyCSS

СкеллиCSS

Легкий CSS-фреймворк для быстрого внедрения скелетов в ваши проекты.

Оглавление

• СкеллиCSS
  • Установка
    • НПМ
    • CSS
    • JavaScript
  • Быстрое использование
  • Использование
    • Заголовки
    • Абзацы
    • Ширина линии
    • Выравнивание
    • Изображения
      • Размеры
      • Формы
    • Анимация
  • Утилита JavaScript
    • Атрибуты данных JavaScript
      • Все атрибуты данных

Установка

НПМ

Для установки через менеджер пакетов узла:

npm install @ritterim/skellycss

CSS

Включите CSS-файл Skelly везде, где вы добавляете CSS:

 < link rel =" stylesheet " href =" ..@ritterim/skellycss/dist/style.css " >

JavaScript

Включите файл skelly.js везде, где вы добавляете свой JavaScript:

 < script src =" ..@ritterim/skellycss/dist/skelly.js " > </ script > 

Быстрое использование

Вы можете быстро начать использовать skellyCSS с помощью утилиты JavaScript, например:

 < h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 4 " data-animation =" true " > </ p >

Полную документацию по утилите JavaScript см. ниже.

Использование

Скелеты можно быстро добавить в любой проект с помощью нескольких простых строк кода.

Заголовки

Примените класс skeleton к любому типу заголовка, и он автоматически подстроится под размер шрифта стилей заголовка:

 < h1 class =" skeleton " > </ h1 >
< h2 class =" skeleton " > </ h2 >
< h3 class =" skeleton " > </ h3 >
< h4 class =" skeleton " > </ h4 >
< h5 class =" skeleton " > </ h5 >
< h6 class =" skeleton " > </ h6 >

Абзацы

Вы можете создать скелеты абзацев, применив класс skeleton к тегу абзаца, а затем включив в абзац любое количество тегов диапазона с классом skeleton__line . Чтобы скелет абзаца больше походил на абзац, ширина последней строки установлена ​​на 50%.

 < div >
  < p class =" skeleton " >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
  </ p >
</ div >

Ширина линии

Вы можете настроить толщину линии, применив класс модификатора размера:

Ширина	Класс модификатора
Малый, 25%	.skeleton--sm
Средний, 50%	.skeleton--md
Большой, 75%	.skeleton--lg
Полный, 100%	.skeleton--full

 < h1 class =" skeleton skeleton--sm " > </ h1 >
< h1 class =" skeleton skeleton--md " > </ h1 >
< h1 class =" skeleton skeleton--lg " > </ h1 >
< h1 class =" skeleton skeleton--full " > </ h1 >

Выравнивание

Вы можете выровнять скелет по тексту, используя классы модификаторов выравнивания:

Выравнивание	Класс модификатора
Левый	.skeleton--left
Центр	.skeleton--center
Верно	.skeleton--right

 <!-- Left Align -->
< p class =" skeleton skeleton--left " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

<!-- Center Align -->
< p class =" skeleton skeleton--center " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

<!-- Right Align -->
< p class =" skeleton skeleton--right " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

Изображения

Вы можете создать скелет изображения, используя класс .skeleton-image . По умолчанию будет применен скелет изображения со 100% высотой и шириной родительского контейнера.

Размеры

Вот некоторые размеры по умолчанию, которые мы включили для изображений скелетов:

Размер	Класс модификатора
Маленький, 50х50	.skeleton-image--sm
Средний, 100x100	.skeleton-image--md
Большой, 200x200	.skeleton-image--lg
X-большой, 400x400	.skeleton-image--xl
Полный, 100% x 100%	.skeleton-image--full

 < img class =" skeleton-image skeleton-image--md " />
< img class =" skeleton-image skeleton-image--sm " />
< img class =" skeleton-image skeleton-image--lg " />
< img class =" skeleton-image skeleton-image--xl " />

Формы

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

Форма	Описание	Класс модификатора
Квадрат	Устанавливает соотношение сторон изображения 1/1 (по умолчанию).	.skeleton-image--square
Круг	Устанавливает радиус границы на 50%	.skeleton-image--circle
Пейзаж Прямоугольник	Устанавливает соотношение сторон изображения 4/3.	.skeleton-image--landscape
Портретный прямоугольник	Устанавливает соотношение сторон изображения 3/4.	.skeleton-image--portrait
Широкий прямоугольник	Устанавливает соотношение сторон изображения 16/9.	.skeleton-image--wide
Высокий прямоугольник	Устанавливает соотношение сторон изображения 9/16.	.skeleton-image--tall

 < div class =" skeleton-image skeleton-image--lg skeleton-image--square " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--circle " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--landscape " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--portrait " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--wide " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--tall " > </ div >

Анимация

Чтобы добавить анимацию, добавьте span.skeleton--animation в элементы .skeleton__line в заголовках или параграфах.

 < div >
  < p class =" skeleton " >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
        < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
  </ p >
</ div > 

Утилита JavaScript

Самый простой и предпочтительный способ добавления скелетов — использование прилагаемых утилит JavaScript.

В тег заголовка или тег абзаца добавьте класс skeleton и атрибут data-lines с указанием количества строк, которое вы хотите иметь в скелете:

 < h2 class =" skeleton skeleton--md " data-lines =" 2 " > </ h2 >
< p class =" skeleton " data-lines =" 7 " > </ p >

Вы также можете создать анимацию скелета, добавив атрибут data-animation и установив для него значение true :

 < h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-animation =" true " > </ p >

Атрибуты данных JavaScript

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

 <!-- Opacity -->
< h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-opacity =" 0.3 " > </ p >

<!-- Color -->
< h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-color =" tomato " > </ p > 

Все атрибуты данных

Атрибут	Описание	Тип
data-lines	Определяет, сколько строк выводить	Целое число
data-animation	Добавляет анимацию к линиям скелета.	логическое значение
data-opacity	Устанавливает непрозрачность линий скелета (устанавливает непрозрачность от 0 до 1).	Плавать
data-color	Устанавливает цвет линий скелетона	Цвет