Added layout configiration

STARTERKIT/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

STARTERKIT/.gitignore

@@ -1,9 +1,5 @@
 node_modules
-components/asset-builds/css
-components/asset-builds/twig
-components/asset-builds/sprites
 styleguide
 libraries
 *.map
-images/sprites
-components/init/_sprites.scss
+dist

STARTERKIT/.sass-lint.yml

@@ -3,7 +3,7 @@
 
 files:
   ignore:
-    - 'components/init/_sprites.scss'
+    - 'src/sass/abstractions/_sprites.scss'
 
 options:
   formatter: stylish

STARTERKIT/Plugins/Layout/DefaultConfigLayout.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace Drupal\Starterkit\Plugin\Layout;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Layout\LayoutDefault;
+use Drupal\Core\Plugin\PluginFormInterface;
+
+class DefaultConfigLayout extends LayoutDefault implements PluginFormInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function defaultConfiguration() {
+    return [
+      'class' => '',
+    ];
+  }
+
+  public function build(array $regions) {
+    $build = parent::build($regions);
+    if (!empty($this->configuration['class'])) {
+      $build['#attributes']['class'][] = $this->configuration['class'];
+    }
+    return $build;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
+    $form['class'] = [
+      '#type' => 'textfield',
+      '#title' => 'Extra Classes',
+      '#default_value' => $this->configuration['class'],
+    ];
+    $form['media'] = [
+      '#title' => $this->t('Background Media'),
+      '#type' => 'entity_autocomplete',
+      '#target_type' => 'media',
+      '#selection_handler' => 'default',
+      '#selection_settings' => [
+        'target_bundles' => ['image', 'video'],
+      ],
+    ];
+    if (!empty($this->configuration['media'])) {
+      $form['media']['#default_value'] = \Drupal::entityTypeManager()->getStorage('media')->load($this->configuration['media']);
+    }
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function validateConfigurationForm(array &$form, FormStateInterface $form_state) {
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
+    $this->configuration['class'] = $form_state->getValue('class');
+    $this->configuration['media'] = $form_state->getValue('media');
+  }
+
+}

STARTERKIT/STARTERKIT.info.yml

@@ -87,7 +87,7 @@ libraries:
 component-libraries:
   STARTERKIT:
     paths:
-      - components
+      - src/sass
       - templates
 
 

STARTERKIT/STARTERKIT.layouts.yml

@@ -0,0 +1,13 @@
+layout_onecolumn:
+  label: 'My One column'
+  class: '\Drupal\Starterkit\Plugin\Layout\DefaultConfigLayout'
+  path: starterkit/layouts/
+  template: onecolumn/layout--onecolumn
+  library: STARTERKIT/layout_onecolumn
+  category: 'STARTERKIT'
+  default_region: first
+  icon_map:
+    - [first]
+  regions:
+    first:
+      label: First

STARTERKIT/STARTERKIT.libraries.yml

@@ -9,176 +9,186 @@ base:
       # media. For example, you can specify this is a print media stylesheet by
       # specifying: { media: print } Note: this isn't recommended since
       # separate print stylesheets is bad for front-end performance.
-      components/asset-builds/css/base.css: {}
+      dist/css/base.css: {}
   # If this library had JavaScript you could specify it like this:
-  # js:
-  #   js/script.js: {}
+  js:
+    dist/app.js: {}
   dependencies:
+    - core/jquery
+    - core/drupal.ajax
+    - core/drupal
+    - core/drupalSettings
+    - core/jquery.once
     - STARTERKIT/clearfix
     - STARTERKIT/visually-hidden
 
 layouts:
   css:
     # The SMACSS category, "layout", is loaded after "base" styles.
     layout:
-      components/asset-builds/css/layouts.css: {}
+      dist/css/layouts.css: {}
+
+layout_onecolumn:
+  css:
+    layout:
+      dist/css/layout--onecolumn.css: {}
 
 autocomplete:
   css:
     component:
-      components/asset-builds/css/autocomplete.css: {}
+      dist/css/autocomplete.css: {}
 
 breadcrumb:
   css:
     component:
-      components/asset-builds/css/breadcrumb.css: {}
+      dist/css/breadcrumb.css: {}
   dependencies:
     - STARTERKIT/visually-hidden
 
 box:
   css:
     component:
-      components/asset-builds/css/box.css: {}
+      dist/css/box.css: {}
 
 clearfix:
   css:
     component:
-      components/asset-builds/css/clearfix.css: {}
+      dist/css/clearfix.css: {}
 
 collapsible-fieldset:
   css:
     component:
-      components/asset-builds/css/collapsible-fieldset.css: {}
+      dist/css/collapsible-fieldset.css: {}
 
 comment:
   css:
     component:
-      components/asset-builds/css/comment.css: {}
+      dist/css/comment.css: {}
 
 footer:
   css:
     component:
-      components/asset-builds/css/footer.css: {}
+      dist/css/footer.css: {}
 
 form-item:
   css:
     component:
-      components/asset-builds/css/form-item.css: {}
+      dist/css/form-item.css: {}
 
 form-table:
   css:
     component:
-      components/asset-builds/css/form-table.css: {}
+      dist/css/form-table.css: {}
 
 header:
   css:
     component:
-      components/asset-builds/css/header.css: {}
+      dist/css/header.css: {}
   dependencies:
     - STARTERKIT/clearfix
 
 hidden:
   css:
     component:
-      components/asset-builds/css/hidden.css: {}
+      dist/css/hidden.css: {}
 
 highlight-mark:
   css:
     component:
-      components/asset-builds/css/highlight-mark.css: {}
+      dist/css/highlight-mark.css: {}
 
 inline-links:
   css:
     component:
-      components/asset-builds/css/inline-links.css: {}
+      dist/css/inline-links.css: {}
 
 inline-sibling:
   css:
     component:
-      components/asset-builds/css/inline-sibling.css: {}
+      dist/css/inline-sibling.css: {}
 
 messages:
   css:
     component:
-      components/asset-builds/css/messages.css: {}
+      dist/css/messages.css: {}
 
 more-link:
   css:
     component:
-      components/asset-builds/css/more-link.css: {}
+      dist/css/more-link.css: {}
 
 nav-menu:
   css:
     component:
-      components/asset-builds/css/nav-menu.css: {}
+      dist/css/nav-menu.css: {}
 
 navbar:
   css:
     component:
-      components/asset-builds/css/navbar.css: {}
+      dist/css/navbar.css: {}
   dependencies:
     - STARTERKIT/clearfix
     - STARTERKIT/visually-hidden
 
 pager:
   css:
     component:
-      components/asset-builds/css/pager.css: {}
+      dist/css/pager.css: {}
 
 print-none:
   css:
     component:
-      components/asset-builds/css/print-none.css: {}
+      dist/css/print-none.css: {}
 
 progress-bar:
   css:
     component:
-      components/asset-builds/css/progress-bar.css: {}
+      dist/css/progress-bar.css: {}
 
 progress-throbber:
   css:
     component:
-      components/asset-builds/css/progress-throbber.css: {}
+      dist/css/progress-throbber.css: {}
 
 resizable-textarea:
   css:
     component:
-      components/asset-builds/css/resizable-textarea.css: {}
+      dist/css/resizable-textarea.css: {}
 
 responsive-video:
   css:
     component:
-      components/asset-builds/css/responsive-video.css: {}
+      dist/css/responsive-video.css: {}
 
 skip-link:
   css:
     component:
-      components/asset-builds/css/skip-link.css: {}
+      dist/css/skip-link.css: {}
 
 table-drag:
   css:
     component:
-      components/asset-builds/css/table-drag.css: {}
+      dist/css/table-drag.css: {}
 
 tabs:
   css:
     component:
-      components/asset-builds/css/tabs.css: {}
+      dist/css/tabs.css: {}
   dependencies:
     - STARTERKIT/clearfix
     - STARTERKIT/visually-hidden
 
 visually-hidden:
   css:
     component:
-      components/asset-builds/css/visually-hidden.css: {}
+      dist/css/visually-hidden.css: {}
 
 watermark:
   css:
     component:
-      components/asset-builds/css/watermark.css: {}
+      dist/css/watermark.css: {}
 
 wireframe:
   css:
     component:
-      components/asset-builds/css/wireframe.css: {}
+      dist/css/wireframe.css: {}