sedona-blocks

Блоки

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

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

Типы

Системные

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

• scene
• wysiwyg

Шаблонные

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

• contact
• footer
• header
• heading
• pricing
• testimonials
• teams

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

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

• card
• carousel
• collapse
• grid
• slider
• tabs

Инлайновые

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

• form
• social
• table

Установка

npm i sedona-blocks

Подключение

В файле gulpfile.js:

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

Настройка

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

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