Draft theme template

Get started

• yarn install
• yarn dev — a watching mode for development
• yarn build — a building not watching mode for production
• yarn explore — an interactive mode with a map of bundles for analyzing
• yarn lint:js — check js files by eslint
• yarn lint:scss — check scss files by stylelint
• yarn format — format js and scss files

How to organize components? Essentials.

app.scss — base entry point, a place where general styles are included. I mean styles which are fair for the whole app. That is the default entry point. ❗️Do not rename this file to keep the same base entry point per project ( and it will cause an error). Accordingly we have default corresponding Drupal library app-styles which is defined in the draft_starter.libraries.yml and applied in the draft_starter.info.yml.

src/components — the place where every component should live in an appropriate folder. There are available Atoms, Molecules, Organisms, Templates, Pages folders. The component folder could consist of

• js less component example component-a.scss file will be the entry point for Webpack

    ├── src
      ├── components
        ├── organisms
          ├── component-a
            ├── component-a.scss
            ├── component-a.html.twig
  

• js component example component-a.js file will be the entry point and _component-a.scss would be imported inside.

  // component-a.js
  
  import './_component-a.scss';

  ├── src
    ├── components
      ├── organisms
        ├── component-a
          ├── component-a.js
          ├── _component-a.scss
          ├── component-a.html.twig
  

• ⛔️ DON'T DO EXAMPLE. Don't make two entry points for one component

  ├── src
    ├── components
      ├── organisms
        ├── component-a
        ├── component-a.js
        ├── component-a.scss
        ├── component-a.html.twig
  

Build

build/components — the folder where transpiled results of components are living. Every component placed there in a separate folder.

build/app.css — placed in the root of build folder.

build/vendors/ — folder for vendors. Webpack set up in a way to make own vendor file in a case we have a separate vendor for the component. For example, we have slider.js where we make import of forEach nodeList polyfil. In a case only slider.js component uses forEach nodeList polyfil, you would find externals-slick.js file in a build/vendors/ folder. Then we could make a cute and tiny Drupal library. Otherwise, if a few components import forEach nodeList polyfil, you should find in the vendor folder externals.js. That means you have to make separate library externals and put it as a dependency for your both components. See examples, bellow.

We could have three types of vendors

• externals goes from src/externals
• shared small self-writting helpers, goes from src/shared
• commons goes from node_modules

So, for all of them behavior described above and examples provided bellow is fair.

# the only one component imports forEach nodeList polyfil
slider:
  version: 1.0
  js:
    build/vendors/externals-slider.js: {}
    build/components/slider/slider.js: {}

# a few components import forEach nodeList polyfil
slider:
  version: 1.0
  js:
    build/components/slider/slider.js: {}
  dependencies:
    - draft_starter/externals

accordion:
  version: 1.0
  js:
    build/components/accordion/accordion.js: {}
  dependencies:
    - draft_starter/externals

externals:
  version: 1.0
  js:
    build/vendors/externals.js: {}

General tips

• Make general variables and mixins are available in the component scss file

  @import '../../init';

• Where to put static assets

  images — that's the folder for static images fonts — that's the folder for fonts

  ├── fonts
    ├── icomoon
    ├── comic-sans
  

• Bring to scss component file static image. $base-path general variable could help you to avoid a bit ugly paths like this ../../images/joshua-coleman-671580-unsplash.png

  @import '../../init';
  
  .hero {
    background-image: url(#{$base-path}/images/joshua-coleman-671580-unsplash.png);
  }

Foundation tips

• Foundation used as a base framework, 4 general components inclued in app.scss via _foundation-general.scss partition by default

  // _foundation-general.scss
  
  // Global styles
  @include foundation-global-styles;
  @include foundation-forms;
  @include foundation-typography;
  @include foundation-table;

  _foundation-general.scss file contains commented references to all kind of Foundation components

• Foundation variables could be customized in src/settings/_settings.scss file

• Foundation scss component example

  // src/components/button/button.scss
  
  @import '../../init';
  @include foundation-button;
  ...

• Foundation js component example

  // src/components/tabs/tabs.js
  
  import $ from 'jquery';
  import { Foundation } from 'foundation-sites/dist/js/plugins/foundation.core';
  import 'foundation-sites/dist/js/plugins/foundation.tabs';
  import 'foundation-sites/dist/js/plugins/foundation.util.keyboard';
  import 'foundation-sites/dist/js/plugins/foundation.util.imageLoader';
  import './_tabs.scss';
  
  ...
  const foundationTabs = new Foundation.Tabs($tabs, {});
  ...

Naming folder and files and variables convention

• Folders, files, variables should be named in a kebab-case-started-with-small-letter

  // _variables.scss
  
  $primary-color: #c00;

• Partitions should start with an underscore _i-am-a-partition.scss.

❗️EXCEPTION, if you have a js component which is a Class — component js file should start with capital letter. For example, Slider-testimonials.js.