Setup for Emulsify & Foundation (Drupal 8)

emulsify-foundation.md

TODO

• Gulp clean task for JS files
• Load individual Foundation JS plugins vs. the minified version

Require

• components
• paragraphs
• unified-twig-extensions
• field_layout

Setup

1. Install the Emulsify theme, after the cloned theme has been created, change to it's directory and use npm install instead of yarn install
2. Install Foundation:

$ npm install foundation-sites --save-dev
$ npm install motion-ui --save-dev

3. Create local.gulp-config.js with the following:

/* globals module */

((() => {
  const themeDir = './';
  const paths = {
    js: [
      `${themeDir}/components/_patterns/**/*.js`,
      /* TODO - Load individual Foundation components */
      `${themeDir}/node_modules/foundation-sites/dist/js/foundation.min.js`
    ],
    dist_js: `${themeDir}/dist/js`,
    sass: themeDir,
    img: `${themeDir}/images`,
    dist_css: `${themeDir}/dist/css`,
    dist_img: `${themeDir}/dist/img`,
    pattern_lab: `${themeDir}/pattern-lab/public`,
  };

  module.exports = {
    host: 'http://127.0.0.1:8888/',
    themeDir,
    paths,
    sassOptions: {
      outputStyle: 'expanded',
      eyeglass: {
        enableImportOnce: false,
      },
    },
    cssConfig: {
      enabled: true,
      src: `${themeDir}/components/_patterns/**/*.scss`,
      dest: paths.dist_css,
      flattenDestOutput: true,
      lint: {
        enabled: false,
        failOnError: true,
      },
      sourceComments: false,
      sourceMapEmbed: false,
      outputStyle: 'expanded',
      autoPrefixerBrowsers: [
        'last 2 versions',
        'IE >= 10',
      ],
      includePaths: (['./node_modules', './node_modules/foundation-sites/scss', './node_modules/motion-ui/src']),
    },
    iconConfig: {
      shape: {
        dimension: {
          maxWidth: 15,
          maxHeight: 15,
        },
        spacing: {
          padding: 10,
        },
      },
      mode: {
        css: {
          bust: false,
          dest: '../../dist',
          prefix: '@mixin sprite-%s',
          render: {
            scss: {
              dest: '../components/_patterns/01-atoms/04-images/icons/_icon_sprite.scss',
              template: 'node_modules/emulsify-gulp/gulp-tasks/svg-icons/sprite.scss.handlebars',
            },
          },
        },
      },
    },
    patternLab: {
      enabled: true,
      configFile: `${themeDir}pattern-lab/config/config.yml`,
      watchedExtensions: (['twig', 'json', 'yaml', 'yml', 'md', 'jpg', 'jpeg', 'png']),
      scssToYAML: [
        {
          src: `${themeDir}/components/_patterns/00-base/01-colors/_colors.scss`,
          dest: `${themeDir}/components/_patterns/00-base/01-colors/colors.yml`,
          lineStartsWith: '$',
          allowVarValues: false,
        },
        {
          src: `${themeDir}/components/_patterns/00-base/02-fonts/_fonts.scss`,
          dest: `${themeDir}/components/_patterns/00-base/02-fonts/fonts.yml`,
          lineStartsWith: '$',
          allowVarValues: false,
        },
      ],
    },
    browserSync: {
      enabled: true,
      baseDir: './',
      startPath: 'pattern-lab/public/',
      // Uncomment below if using a specific local url
      // domain: 'emulsify.dev',
      notify: false,
      openBrowserAtStart: false,
      reloadOnRestart: true,
      ui: false,
    },
    wpt: {
      // WebPageTest API key https://www.webpagetest.org/getkey.php
      // key:
    },
  };
}))();

7. Edit THEME_NAME.info.yml, add the foundation library above the global: - 'THEME_NAME/foundation'

8. Delete all files and directories in the theme templates & components folder

9. Run the following commands within themes/custom/THEME_NAME/components/js:

ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./
ln -s ../../../../../core/misc/drupal.js ./

Run npm start to generate Pattern Lab, start the local Pattern Lab server and watch for changes in files.