sedona-blocks

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

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

Типы

Глобальные

• global

Системные

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

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

Шаблонные

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

• 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/global/global.less',
  '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: [
  'node_modules/sedona-blocks/src/global/global.js',
  'node_modules/sedona-blocks/src/header/header.js',
  'node_modules/sedona-blocks/src/slider/slider.js',
  'node_modules/sedona-blocks/src/form/form.validate.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',
  'src/js/app.js'
]
…