edlp d8 theme starter operatinal with bower and gulp : y'a plus k'a

sites/all/themes/custom/edlptheme/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.npm-debug-log
+bower_components/

sites/all/themes/custom/edlptheme/assets/dist/bower/jquery.hotkeys.js

@@ -0,0 +1,196 @@
+/*jslint browser: true*/
+/*jslint jquery: true*/
+
+/*
+ * jQuery Hotkeys Plugin
+ * Copyright 2010, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Based upon the plugin by Tzury Bar Yochay:
+ * http://github.com/tzuryby/hotkeys
+ *
+ * Original idea by:
+ * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
+ */
+
+/*
+ * One small change is: now keys are passed by object { keys: '...' }
+ * Might be useful, when you want to pass some other data to your handler
+ */
+
+(function(jQuery) {
+
+  jQuery.hotkeys = {
+    version: "0.8",
+
+    specialKeys: {
+      8: "backspace",
+      9: "tab",
+      10: "return",
+      13: "return",
+      16: "shift",
+      17: "ctrl",
+      18: "alt",
+      19: "pause",
+      20: "capslock",
+      27: "esc",
+      32: "space",
+      33: "pageup",
+      34: "pagedown",
+      35: "end",
+      36: "home",
+      37: "left",
+      38: "up",
+      39: "right",
+      40: "down",
+      45: "insert",
+      46: "del",
+      59: ";",
+      61: "=",
+      96: "0",
+      97: "1",
+      98: "2",
+      99: "3",
+      100: "4",
+      101: "5",
+      102: "6",
+      103: "7",
+      104: "8",
+      105: "9",
+      106: "*",
+      107: "+",
+      109: "-",
+      110: ".",
+      111: "/",
+      112: "f1",
+      113: "f2",
+      114: "f3",
+      115: "f4",
+      116: "f5",
+      117: "f6",
+      118: "f7",
+      119: "f8",
+      120: "f9",
+      121: "f10",
+      122: "f11",
+      123: "f12",
+      144: "numlock",
+      145: "scroll",
+      173: "-",
+      186: ";",
+      187: "=",
+      188: ",",
+      189: "-",
+      190: ".",
+      191: "/",
+      192: "`",
+      219: "[",
+      220: "\\",
+      221: "]",
+      222: "'"
+    },
+
+    shiftNums: {
+      "`": "~",
+      "1": "!",
+      "2": "@",
+      "3": "#",
+      "4": "$",
+      "5": "%",
+      "6": "^",
+      "7": "&",
+      "8": "*",
+      "9": "(",
+      "0": ")",
+      "-": "_",
+      "=": "+",
+      ";": ": ",
+      "'": "\"",
+      ",": "<",
+      ".": ">",
+      "/": "?",
+      "\\": "|"
+    },
+
+    // excludes: button, checkbox, file, hidden, image, password, radio, reset, search, submit, url
+    textAcceptingInputTypes: [
+      "text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime",
+      "datetime-local", "search", "color", "tel"],
+
+    options: {
+      filterTextInputs: true
+    }
+  };
+
+  function keyHandler(handleObj) {
+    if (typeof handleObj.data === "string") {
+      handleObj.data = {
+        keys: handleObj.data
+      };
+    }
+
+    // Only care when a possible input has been specified
+    if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string") {
+      return;
+    }
+
+    var origHandler = handleObj.handler,
+      keys = handleObj.data.keys.toLowerCase().split(" ");
+
+    handleObj.handler = function(event) {
+      //      Don't fire in text-accepting inputs that we didn't directly bind to
+      if (this !== event.target && (/textarea|select/i.test(event.target.nodeName) ||
+          (jQuery.hotkeys.options.filterTextInputs &&
+            jQuery.inArray(event.target.type, jQuery.hotkeys.textAcceptingInputTypes) > -1))) {
+        return;
+      }
+
+      var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[event.which],
+        character = String.fromCharCode(event.which).toLowerCase(),
+        modif = "",
+        possible = {};
+
+      jQuery.each(["alt", "ctrl", "shift"], function(index, specialKey) {
+
+        if (event[specialKey + 'Key'] && special !== specialKey) {
+          modif += specialKey + '+';
+        }
+      });
+
+      // metaKey is triggered off ctrlKey erronously
+      if (event.metaKey && !event.ctrlKey && special !== "meta") {
+        modif += "meta+";
+      }
+
+      if (event.metaKey && special !== "meta" && modif.indexOf("alt+ctrl+shift+") > -1) {
+        modif = modif.replace("alt+ctrl+shift+", "hyper+");
+      }
+
+      if (special) {
+        possible[modif + special] = true;
+      }
+      else {
+        possible[modif + character] = true;
+        possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
+
+        // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
+        if (modif === "shift+") {
+          possible[jQuery.hotkeys.shiftNums[character]] = true;
+        }
+      }
+
+      for (var i = 0, l = keys.length; i < l; i++) {
+        if (possible[keys[i]]) {
+          return origHandler.apply(this, arguments);
+        }
+      }
+    };
+  }
+
+  jQuery.each(["keydown", "keyup", "keypress"], function() {
+    jQuery.event.special[this] = {
+      add: keyHandler
+    };
+  });
+
+})(jQuery || this.jQuery || window.jQuery);

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -0,0 +1,22 @@
+(function($) {
+
+
+  EdlpTheme = function(){
+
+
+    function init(){
+      console.log("EdlpTheme init()");
+      
+    };
+
+
+    init();
+  }
+
+
+  $(document).ready(function($) {
+    var edlptheme = new EdlpTheme();
+  });
+
+
+})(jQuery);

sites/all/themes/custom/edlptheme/assets/dist/styles/app.css

@@ -0,0 +1,14 @@
+body {
+  background: white; }
+
+.btn--hollow {
+  background: red;
+  display: inline-block;
+  padding: 10px; }
+
+body, html {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-family: Georgia, serif;
+  font-style: normal; }

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -0,0 +1,31 @@
+body {
+  background: white; }
+
+.btn--hollow {
+  background: red;
+  display: inline-block;
+  padding: 10px; }
+
+body, html {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-family: Georgia, serif;
+  font-style: normal; }
+
+div.layout-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+header[role="banner"] {
+  outline: 1px solid blue; }
+
+main[role="main"] {
+  outline: 1px solid green; }
+
+footer[role="contentinfo"] {
+  outline: 1px solid pink; }

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -0,0 +1,22 @@
+(function($) {
+
+
+  EdlpTheme = function(){
+
+
+    function init(){
+      console.log("EdlpTheme init()");
+      
+    };
+
+
+    init();
+  }
+
+
+  $(document).ready(function($) {
+    var edlptheme = new EdlpTheme();
+  });
+
+
+})(jQuery);

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -0,0 +1,36 @@
+@import 'base/reset';
+
+@import 'base/vars';
+@import 'base/grid';
+@import 'base/colors';
+@import 'base/buttons';
+
+
+body, html{
+  position: relative;
+  width: 100%;
+  height:100%;
+  font-family: Georgia, serif;
+  font-style: normal;
+}
+
+
+div.layout-container{
+  position: relative;
+  width:100%; height:100%;
+  padding:1em;
+  box-sizing: border-box;
+}
+
+header[role="banner"]{
+  outline: 1px solid blue;
+}
+
+
+main[role="main"]{
+  outline:1px solid green;
+}
+
+footer[role="contentinfo"]{
+  outline: 1px solid pink;
+}

sites/all/themes/custom/edlptheme/assets/styles/base/_buttons.scss

@@ -0,0 +1,25 @@
+
+// Buttons
+//
+// Buttons
+//
+// Markup:
+// <a href="" class="btn {{modifier_class}}">Button</a>
+//
+// .btn--hollow      - Hollow button
+// .btn--hollow-white  - Hollow button
+// .btn--blue        - Blue button
+// .btn--block       - Block button
+// .btn--small       - Small button
+// .btn--plain       - Plain button
+//
+// Styleguide Common.Buttons
+
+
+.btn {
+	&--hollow {
+		background: red;
+		display: inline-block;
+		padding: 10px;
+	}
+}

sites/all/themes/custom/edlptheme/assets/styles/base/_reset.scss

@@ -0,0 +1,3 @@
+body {
+	background: white;
+}

sites/all/themes/custom/edlptheme/bower.json

@@ -0,0 +1,20 @@
+{
+  "name": "edlp_d8_theme",
+  "version": "1.0.0",
+  "authors": [
+    "Bachir Soussi Chiadmi <bachir@figureslibres.io>"
+  ],
+  "license": "MIT",
+  "homepage": "http://encyclopediedelaparole.org",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "history.js": "latest",
+    "jquery.hotkeys": "latest"
+  }
+}

sites/all/themes/custom/edlptheme/edlptheme.info.yml

@@ -0,0 +1,31 @@
+name: edlp
+description: 'EDLP Drupal 8 theme with gulp'
+type: theme
+base theme: classy
+core: 8.x
+libraries:
+  - core/normalize
+  - edlptheme/global-css
+  - edlptheme/history-js
+  - edlptheme/global-js
+
+# stylesheets-remove:
+#   - core/assets/vendor/normalize-css/normalize.css
+#   - core/modules/system/css/system.module.css
+#   - core/modules/system/css/system.theme.css
+#   - core/modules/views/css/views.module.css
+
+# regions:
+#   content: Content
+#   content_top: 'Content Top'
+#   content_bottom: 'Content Bottom'
+#   nav: Navigation
+#   front_one: 'Front One'
+#   front_two: 'Front Two'
+#   front_three: 'Front Three'
+#   front_four: 'Front Four'
+#   front_five: 'Front Five'
+#   front_six: 'Front Six'
+#   front_seven: 'Front Seven'
+#   front_eight: 'Front Eight'
+#   footer: Footer

sites/all/themes/custom/edlptheme/edlptheme.libraries.yml

@@ -0,0 +1,17 @@
+global-css:
+  version: VERSION
+  css:
+    base:
+      assets/dist/styles/app.min.css: {}
+
+global-js:
+  version: VERSION
+  js:
+    bower_components/history.js/scripts/bundled/html4+html5/jquery.history.js: { scope: footer }
+    assets/dist/bower/jquery.hotkeys.js: { scope: footer }
+    assets/dist/scripts/main.min.js: { scope: footer }
+  dependencies:
+    - core/matchmedia
+    - core/matchmedia.addListener
+    - core/jquery
+    - core/jquery.once

sites/all/themes/custom/edlptheme/gulpfile.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var gulp = require('gulp');
+var util = require('gulp-util');
+var sass = require('gulp-sass');
+var watch = require('gulp-watch');
+var autoprefixer = require('gulp-autoprefixer');
+var jsmin = require('gulp-jsmin');
+var cssmin = require('gulp-cssmin');
+var rename = require('gulp-rename');
+var mainBowerFiles = require('main-bower-files');
+
+function handleError(err) {
+  console.log(err.toString());
+}
+
+var config = {
+  assetsDir : './assets',
+  production: !!util.env.production
+}
+
+gulp.task('scripts', function () {
+    gulp.src('./assets/scripts/main.js')
+      .pipe(config.production ? jsmin() : util.noop())
+      .pipe(rename({suffix: '.min'}))
+      .pipe(gulp.dest('./assets/dist/scripts/'));
+});
+
+gulp.task('styles', function () {
+  gulp.src('./assets/styles/app.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer({
+        browsers: ['last 2 versions'],
+        cascade: false
+    })).on('error', handleError)
+    .pipe(config.production ? cssmin() : util.noop())
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest('./assets/dist/styles/'));
+});
+
+gulp.task('bower', function() {
+    gulp.src(mainBowerFiles({
+      "overrides":{
+        "history.js":{
+          "main":"scripts/bundled/html4+html5/jquery.history.js"
+        },
+        "jquery":{
+          "ignore":true
+        }
+      }
+    }))
+      .pipe(gulp.dest('./assets/dist/bower/'));
+});
+
+// default gulp task
+gulp.task('default', ['bower', 'scripts', 'styles'], function() {
+  gulp.watch('./assets/styles/*.scss', ['styles']);
+  gulp.watch('./assets/styles/*/*.scss', ['styles']);
+  gulp.watch('./assets/scripts/*.js', ['scripts']);
+});

sites/all/themes/custom/edlptheme/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "edlpd8theme",
+  "version": "0.0.1",
+  "description": "A theme for drupal.",
+  "main": "gulpfile.js",
+  "author": "Bachir Soussi Chiadmi",
+  "license": "GPLv3",
+  "homepage": "https://encyclopediedelaparole.org",
+  "devDependencies": {
+    "gulp": "latest",
+    "gulp-autoprefixer": "latest",
+    "gulp-cssmin": "latest",
+    "gulp-jsmin": "latest",
+    "gulp-rename": "latest",
+    "gulp-sass": "latest",
+    "gulp-strip-debug": "latest",
+    "gulp-util": "latest",
+    "gulp-watch": "latest",
+    "main-bower-files": "latest"
+  },
+  "dependencies": {}
+}

sites/all/themes/custom/edlptheme/templates/block/block--system-branding-block.html.twig

@@ -0,0 +1,30 @@
+{% extends "block.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for a branding block.
+ *
+ * Each branding element variable (logo, name, slogan) is only available if
+ * enabled in the block configuration.
+ *
+ * Available variables:
+ * - site_logo: Logo for site as defined in Appearance or theme settings.
+ * - site_name: Name for site as defined in Site information settings.
+ * - site_slogan: Slogan for site as defined in Site information settings.
+ */
+#}
+{% block content %}
+  {% if site_logo %}
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
+      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
+    </a>
+  {% endif %}
+  {% if site_name %}
+    <div class="site-name">
+      <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+    </div>
+  {% endif %}
+  {% if site_slogan %}
+    <div class="site-slogan">{{ site_slogan }}</div>
+  {% endif %}
+{% endblock %}

sites/all/themes/custom/edlptheme/templates/layout/html.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Theme override for the basic structure of a single Drupal page.
+ *
+ * Variables:
+ * - logged_in: A flag indicating if user is logged in.
+ * - root_path: The root path of the current page (e.g., node, admin, user).
+ * - node_type: The content type for the current node, if the page is a node.
+ * - head_title: List of text elements that make up the head_title variable.
+ *   May contain one or more of the following:
+ *   - title: The title of the page.
+ *   - name: The name of the site.
+ *   - slogan: The slogan of the site.
+ * - page_top: Initial rendered markup. This should be printed before 'page'.
+ * - page: The rendered page markup.
+ * - page_bottom: Closing rendered markup. This variable should be printed after
+ *   'page'.
+ * - db_offline: A flag indicating if the database is offline.
+ * - placeholder_token: The token for generating head, css, js and js-bottom
+ *   placeholders.
+ *
+ * @see template_preprocess_html()
+ */
+#}
+{%
+  set body_classes = [
+    logged_in ? 'user-logged-in',
+    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
+    node_type ? 'page-node-type-' ~ node_type|clean_class,
+    db_offline ? 'db-offline',
+  ]
+%}
+<!DOCTYPE html>
+<html{{ html_attributes }}>
+  <head>
+    <head-placeholder token="{{ placeholder_token }}">
+    <title>{{ head_title|safe_join(' | ') }}</title>
+    <css-placeholder token="{{ placeholder_token }}">
+    <js-placeholder token="{{ placeholder_token }}">
+  </head>
+  <body{{ attributes.addClass(body_classes) }}>
+    {#
+      Keyboard navigation/accessibility link to main content section in
+      page.html.twig.
+    #}
+    <a href="#main-content" class="visually-hidden focusable skip-link">
+      {{ 'Skip to main content'|t }}
+    </a>
+    {{ page_top }}
+    {{ page }}
+    {{ page_bottom }}
+    <js-bottom-placeholder token="{{ placeholder_token }}">
+  </body>
+</html>

sites/all/themes/custom/edlptheme/templates/layout/maintenance-page.html.twig

@@ -0,0 +1,65 @@
+{#
+/**
+ * @file
+ * Theme override to display a single Drupal page while offline.
+ *
+ * All available variables are mirrored in page.html.twig.
+ * Some may be blank but they are provided for consistency.
+ *
+ * @see template_preprocess_maintenance_page()
+ */
+#}
+<div class="layout-container">
+
+  <header role="banner">
+    {% if logo %}
+      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
+        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
+      </a>
+    {% endif %}
+
+    {% if site_name or site_slogan %}
+      <div class="name-and-slogan">
+        {% if site_name %}
+         <h1 class="site-name">
+           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+         </h1>
+        {% endif %}
+
+        {% if site_slogan %}
+          <div class="site-slogan">{{ site_slogan }}</div>
+        {% endif %}
+      </div>{# /.name-and-slogan #}
+    {% endif %}
+
+  </header>
+
+  <main role="main">
+    {% if title %}
+      <h1>{{ title }}</h1>
+    {% endif %}
+
+    {{ page.highlighted }}
+
+    {{ page.content }}
+  </main>
+
+  {% if page.sidebar_first %}
+    <aside class="layout-sidebar-first" role="complementary">
+      {{ page.sidebar_first }}
+    </aside>{# /.layout-sidebar-first #}
+  {% endif %}
+
+  {% if page.sidebar_second %}
+    <aside class="layout-sidebar-second" role="complementary">
+      {{ page.sidebar_second }}
+    </aside>{# /.layout-sidebar-second #}
+  {% endif %}
+
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
+
+</div>{# /.layout-container #}

sites/all/themes/custom/edlptheme/templates/layout/page.html.twig

@@ -0,0 +1,87 @@
+{#
+/**
+ * @file
+ * Theme override to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+<div class="layout-container">
+
+  <header role="banner">
+    {{ page.header }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
+
+</div>{# /.layout-container #}

sites/all/themes/custom/edlptheme/templates/layout/region.html.twig

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region-' ~ region|clean_class,
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {{ content }}
+  </div>
+{% endif %}

sites/all/themes/custom/edlptheme/theme.theme

@@ -0,0 +1,6 @@
+<?php
+
+/**
+ * @file
+ * Functions to support theming in the edlp theme.
+ */