sedona-blocks

Блоки

Набор типовых блоков для построения структуры страниц.

Гайдлайн по созданию

Типы

Системные

Основа без которой не обойтись.

• scene (пример)
• wysiwyg (пример)

Шаблонные

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

• contact
• footer
• header
• heading
• notify (пример)
• pricing
• testimonials
• teams

Содержательные

Могут использоваться как самостоятельные блоки, так и вкладываться в другие, но не сами в себя.

• carousel
• collapse
• grid (пример)
• slider (пример)
• tabs

Инлайновые

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

• card (пример)
• form (пример)
  • file (пример)
  • range (пример)
• social (пример)
• table (пример)

Установка

npm i sedona-blocks

Подключение

В файле gulpfile.js:

…
main: [
  'node_modules/sedona-blocks/src/scene/scene.less',
  'node_modules/sedona-blocks/src/wysiwyg/wysiwyg.less',
  'node_modules/sedona-blocks/src/footer/footer.less',
  'node_modules/sedona-blocks/src/header/header.less',
  'node_modules/sedona-blocks/src/notify/notify.less',
  'node_modules/sedona-blocks/src/grid/grid.less',
  'node_modules/sedona-blocks/src/slider/slider.less',
  'node_modules/sedona-blocks/src/card/card.less',
  'node_modules/sedona-blocks/src/form/form.less',
  'node_modules/sedona-blocks/src/file/file.less',
  'node_modules/sedona-blocks/src/range/range.less',
  'node_modules/sedona-blocks/src/social/social.less',
  'node_modules/sedona-blocks/src/table/table.less',
  'src/less/main.less'
]
…
app: [
  'src/js/app.js',
  'node_modules/sedona-blocks/src/header/header.js',
  'node_modules/sedona-blocks/src/slider/slider.js',
  'node_modules/sedona-blocks/src/file/file.js',
  'node_modules/sedona-blocks/src/range/range.js',
  'node_modules/sedona-blocks/src/table/table.js'
]
…

Настройка

Некоторые блоки имеют свой набор переменных. Их можно переопределить, добавив в конец файла variables.less:

…
@footer-font-size: @font-size-smaller;
@footer-line-height: @line-height-smaller;
@footer-color: @dark-secondary;
…