started materiO's theme

.gitignore

@@ -22,3 +22,6 @@
 
 # Ignore .env files as they are personal
 /.env
+
+# npm
+node_modules/

web/themes/custom/materiotheme/README.md

@@ -0,0 +1 @@
+# Mateerio's drupal 8 theme

web/themes/custom/materiotheme/assets/dist/scripts/main.min.js

@@ -0,0 +1,3 @@
+
+(function($,Drupal,drupalSettings){MaterioTheme=function(){var _$body=$('body');function init(){void 0;};init();}
+$(document).ready(function($){if(drupalSettings.path.isFront){var materiotheme=new MaterioTheme();}else{$('body').attr('booted','booted');}});})(jQuery,Drupal,drupalSettings);

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -0,0 +1,28 @@
+(function($, Drupal, drupalSettings) {
+
+  MaterioTheme = function(){
+    var _$body = $('body');
+    // var _is_front = drupalSettings.path.isFront;
+
+    //  ___      _ _
+    // |_ _|_ _ (_) |_
+    //  | || ' \| |  _|
+    // |___|_||_|_|\__|
+    function init(){
+      console.log("MaterioTheme init()");
+
+    };
+
+
+    init();
+  } // end MaterioTheme()
+
+  $(document).ready(function($) {
+    if(drupalSettings.path.isFront){
+      var materiotheme = new MaterioTheme();
+    }else{
+      $('body').attr('booted', 'booted');
+    }
+  });
+
+})(jQuery, Drupal, drupalSettings);

web/themes/custom/materiotheme/assets/styles/app.scss

@@ -0,0 +1,18 @@
+// @Author: Bachir Soussi Chiadmi <bach>
+// @Date:   18-12-2017
+// @Email:  bachir@figureslibres.io
+// @Filename: app.scss
+// @Last modified by:   bach
+// @Last modified time: 20-12-2017
+// @License: GPL-V3
+
+@import 'base/reset';
+@import 'base/colors';
+@import 'base/grid';
+@import 'base/layout';
+@import 'base/fonts';
+
+
+html{
+  background-color: red;
+}

web/themes/custom/materiotheme/assets/styles/base/README.md

@@ -0,0 +1 @@
+# Do NOT EDIT _variables.scss as it is automaticly generated with gulp from assets/json/variables.json

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -0,0 +1 @@
+$transparent-bg: rgba(255,255,255, 0.95);

web/themes/custom/materiotheme/assets/styles/base/_grid.scss

@@ -0,0 +1,93 @@
+// http://www.thesassway.com/intermediate/simple-grid-mixins
+
+$default_gap: 1em;
+$default_sum: 12;
+
+$small-bp:768px;
+$med-bp:1080px;
+$large-bp:1900px;
+
+@mixin row() {
+  // font-size: 0;
+  // white-space: nowrap;
+  position: relative;
+  >*{
+    font-size: 16px;
+  }
+}
+
+%col-reset {
+    width: 100%;
+    // display: inline-block;
+    // white-space:normal;
+    // font-size: 16px;
+    float:left;
+    box-sizing: border-box;
+}
+
+@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
+  @extend %col-reset;
+  padding-left: $gap*$offset;
+  @if $col == $default_sum {
+    padding-right: 0;
+  }@else{
+    padding-right: $gap;
+  }
+  &:last-child{padding-right: 0;}
+
+  margin-left: percentage(($col/$sum)*$offset);
+
+  // @media only screen and (min-width: 768px) {
+    width: percentage($col/$sum);
+    // vertical-align: $align;
+  // }
+}
+
+.row{
+  @include row;
+  // html:not(.js) &{
+  //   overflow-y: auto;
+  // }
+}
+
+@for $c from 1 through $default_sum {
+  .col-#{$c} {
+      @include col($c);
+  }
+
+  // small
+  .small-col-#{$c} {
+    @media only screen and (max-width: $small-bp) {
+      @include col($c);
+    }
+  }
+
+  // medium
+  .med-col-#{$c} {
+    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
+      @include col($c);
+    }
+  }
+
+  // large
+  .large-col-#{$c} {
+    @media only screen and (min-width: $med-bp+1) {
+      @include col($c);
+    }
+  }
+
+}
+
+@for $c from 1 through $default_sum - 1 {
+  @for $o from 1 through $default_sum - $c {
+    .col-#{$c}-offset-#{$o} {
+      @include col($c, $o);
+    }
+  }
+}
+
+.col.float-right{
+  float: right;
+  padding-right: 0;
+  padding-left: $default_gap;
+}

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -0,0 +1,13 @@
+
+body, html{
+  position: relative;
+  width: 100%;
+  height:100%;
+  font-family: sans-serif;
+  font-style: normal;
+  margin:0;
+  padding:0;
+}
+body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
+  padding-top: 24px!important;
+}

web/themes/custom/materiotheme/assets/styles/base/_reset.scss

@@ -0,0 +1,10 @@
+body {
+	background: white;
+}
+
+a{
+	color: inherit;
+	text-decoration: none;
+}
+a, a:focus, a:active { outline: none; }
+a:focus{ -moz-outline-style: none; }

web/themes/custom/materiotheme/gulpfile.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var gulp = require('gulp');
+var gulpif = require('gulp-if');
+var sass = require('gulp-sass');
+var watch = require('gulp-watch');
+var autoprefixer = require('gulp-autoprefixer');
+var jsmin = require('gulp-jsmin');
+var stripDebug = require('gulp-strip-debug');
+var cssmin = require('gulp-cssmin');
+var rename = require('gulp-rename');
+// var mainBowerFiles = require('main-bower-files');
+var svgmin = require('gulp-svgmin');
+
+// to get minified assets run `gulp --env=prod`
+var argv = require('minimist')(process.argv.slice(2));
+console.dir(argv);
+var prod = argv.env == 'prod' ? true : false;
+
+function handleError(err) {
+  console.log(err.toString());
+}
+
+gulp.task('scripts', gulp.series(function (done) {
+  gulp.src(['./assets/scripts/main.js'])
+    // .pipe(concat('main.js'))
+    .pipe(gulpif(prod, stripDebug()))
+    .pipe(gulpif(prod, jsmin()))
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest('./assets/dist/scripts/'));
+  done();
+}));
+
+gulp.task('styles', gulp.series(function (done) {
+  gulp.src(['./assets/styles/app.scss'])
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer({
+        browsers: ['last 2 versions'],
+        cascade: false
+    })).on('error', handleError)
+    // .pipe(prod ? cssmin() : util.noop())
+    .pipe(gulpif(prod, cssmin()))
+    // .pipe(cssmin())
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest('./assets/dist/styles/'));
+    done();
+}));
+
+// gulp.task('bower', function() {
+//     gulp.src(mainBowerFiles({
+//       "overrides":{
+//         "masonry-layout":{
+//           "main":"./dist/masonry.pkgd.min.js"
+//         },
+//         "imagesloaded":{
+//           "main":"./imagesloaded.pkgd.min.js"
+//         },
+//         "jquery":{"ignore":true},
+//         "ev-emitter":{"ignore":true},
+//         "fizzy-ui-utils":{"ignore":true},
+//         "get-size":{"ignore":true},
+//         "outlayer":{"ignore":true},
+//       }
+//     }))
+//       .pipe(gulp.dest('./assets/dist/bower/'));
+// });
+
+gulp.task('svg', gulp.series(function (done) {
+  gulp.src(['./assets/img/*.svg'])
+    .pipe(svgmin())
+    .pipe(gulp.dest('./assets/dist/img'));
+  done();
+}));
+
+// default gulp task
+ //'bower',
+gulp.task('default', gulp.series(['scripts', 'styles', 'svg'], function(done) {
+  gulp.watch('./assets/styles/*.scss', gulp.series('styles'));
+  gulp.watch('./assets/styles/base/*.scss', gulp.series('styles'));
+  gulp.watch('./assets/scripts/*.js', gulp.series('scripts'));
+  gulp.watch('./assets/img/*.svg', gulp.series('svg'));
+  done();
+}));

web/themes/custom/materiotheme/materiotheme.info.yml

@@ -0,0 +1,16 @@
+name: Materio
+description: 'Materio Drupal 8 theme with gulp'
+type: theme
+base theme: classy
+core: 8.x
+libraries:
+  - core/normalize
+  - materiotheme/global-css
+  - materiotheme/global-js
+
+regions:
+  header: Header
+  content: Content
+  footer_left: 'Footer Left'
+  footer_center: 'Footer Center'
+  footer_right: 'Footer Right'

web/themes/custom/materiotheme/materiotheme.libraries.yml

@@ -0,0 +1,30 @@
+global-css:
+  version: VERSION
+  css:
+    theme:
+      assets/dist/styles/app.min.css: {}
+
+global-js:
+  version: VERSION
+  js:
+    # assets/dist/bower/jquery.hotkeys.js: { scope: footer }
+    # assets/dist/bower/imagesloaded.pkgd.min.js: { minified: true }
+    # assets/dist/bower/masonry.pkgd.min.js: { minified: true }
+    assets/dist/scripts/main.min.js: { minified: true }
+  dependencies:
+    - core/drupal
+    # - core/drupal.ajax
+    # - core/drupal.autocomplete
+    - core/matchmedia
+    - core/matchmedia.addListener
+    - core/jquery
+    # - core/jquery.once
+    # - core/jquery.ui.draggable
+    # - core/jquery.ui.dropable
+    # - core/jquery.ui.sortable
+    # - edlp_corpus/corpus
+    # - edlp_studio/edlp_studio-library
+    # - edlp_search/edlp_search-library
+    # - url_to_video_filter/player_embed
+    # - url_to_video_filter/vimeo_embed
+    # - url_to_video_filter/youtube_embed

web/themes/custom/materiotheme/materiotheme.theme

@@ -0,0 +1,124 @@
+<?php
+
+/**
+ * @file
+ * Functions to support theming in the edlp theme.
+ */
+
+use Drupal\Core\Url;
+use Drupal\Core\Link;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Template\Attribute;
+use Drupal\Component\Utility\Unicode;
+use Drupal\Core\Render\Element;
+
+
+/**
+ * Implements hook_page_attachments().
+ * @param array $attachments
+ */
+ // this does not work with themes
+// function materiotheme_page_attachments(array &$attachments) {
+//   dpm('materiotheme_page_attachments', $attachments);
+// }
+
+/**
+ * Prepares variables for HTML document templates.
+ *
+ * Default template: html.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - page: A render element representing the page.
+ */
+function materiotheme_preprocess_html(&$vars) {
+  // $head_title = $vars['head_title'];
+  // dpm($vars);
+  $site_config = \Drupal::config('system.site');
+  // dpm($site_config->get('slogan'));
+  // array_push($head_title, [
+  //   'name' => $site_config->get('name'),
+  // ]);
+  // $vars['head_title'] = $head_title;
+
+  $description = [
+    '#tag' => 'meta',
+    '#attributes' => [
+      'name' => 'description',
+      'content' => $site_config->get('slogan'),
+    ],
+  ];
+
+  $vars['page']['#attached']['html_head'][] = [$description, 'description'];
+
+  // $gv = [
+  //   '#tag' => 'meta',
+  //   '#attributes' => [
+  //     'name' => 'google-site-verification',
+  //     'content' => "Y6PSbMfj67bXtMRAT-mFTAxrIeZPzC5jWSpH3M7yhkk",
+  //   ],
+  // ];
+  // $vars['page']['#attached']['html_head'][] = [$gv, "google-site-verification"];
+}
+
+function materiotheme_preprocess_page(&$vars){
+  // dsm($vars, 'vars');
+}
+
+function materiotheme_preprocess_node(&$vars){
+  $node = $vars['elements']['#node'];
+  $options = ['absolute' => TRUE];
+  $url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
+  $system_path = $url->getInternalPath();
+  $vars['link_attributes'] = new Attribute(array(
+    'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path
+  ));
+}
+
+/**
+ * Implements hook_form_alter
+ */
+function materiotheme_form_user_login_form_alter(&$form, FormStateInterface $form_state, $form_id) {
+  // dpm($form_id, 'form_id');
+  // dpm($form, 'form');
+  $form['name']['#attributes']['placeholder'] = (string) $form['name']['#title'];
+  unset($form['name']['#title']);
+  $form['pass']['#attributes']['placeholder'] = (string) $form['pass']['#title'];
+  unset($form['pass']['#title']);
+}
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+
+/**
+ * Prepares variables for image formatter templates.
+ *
+ * Default template: image-formatter.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - item: An ImageItem object.
+ *   - item_attributes: An optional associative array of html attributes to be
+ *     placed in the img tag.
+ *   - image_style: An optional image style.
+ *   - url: An optional \Drupal\Core\Url object.
+ */
+function materiotheme_preprocess_image_formatter(&$vars){
+  if(isset($vars['url'])){
+    $system_path = $vars['url']->getInternalPath();
+    $vars['link_attributes'] = new Attribute(array(
+      'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path,
+      'class' => array('ajax-link')
+    ));
+    // dpm($vars);
+  }
+}
+
+function materiotheme_preprocess_links__language_block(&$vars){
+  // dpm($vars);
+  foreach ($vars['links'] as $lang_code => $link) {
+    $vars['links'][$lang_code]['text'] = $lang_code;
+    $vars['links'][$lang_code]['link']['#title'] = $lang_code;
+  }
+}

web/themes/custom/materiotheme/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "materiotheme",
+  "version": "0.0.1",
+  "description": "Materio's theme for drupal 8.",
+  "main": "gulpfile.js",
+  "author": "Bachir Soussi Chiadmi",
+  "license": "GPLv3",
+  "homepage": "https://materio.com",
+  "devDependencies": {
+    "gulp": "latest",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-concat": "latest",
+    "gulp-cssmin": "latest",
+    "gulp-if": "^2.0.2",
+    "gulp-jsmin": "latest",
+    "gulp-json-to-sass": "latest",
+    "gulp-json2js": "latest",
+    "gulp-rename": "latest",
+    "gulp-sass": "^4.0.1",
+    "gulp-strip-debug": "^3.0.0",
+    "gulp-svgmin": "^1.2.4",
+    "gulp-util": "latest",
+    "gulp-watch": "latest",
+    "main-bower-files": "latest",
+    "minimist": "^1.2.0"
+  },
+  "dependencies": {}
+}

web/themes/custom/materiotheme/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>

web/themes/custom/materiotheme/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 #}

web/themes/custom/materiotheme/templates/layout/page.html.twig

@@ -0,0 +1,77 @@
+{#
+/**
+ * @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">
+    <div class="wrapper">
+      {{ page.header }}
+    </div>
+  </header>
+
+  {% if page.content.messages %}
+    <aside class="messages">
+      {{ page.content.messages }}
+    </aside>
+  {% endif %}
+
+  <main role="main">
+    <div class="layout-content">
+      <div class="row">
+        {{ page.content|without('messages') }}
+      </div>
+    </div>{# /.layout-content #}
+  </main>
+
+  {% if page.footer_left or page.footer_center or page.footer_right %}
+    <footer role="contentinfo">
+      <div class="wrapper">
+        {{ page.footer_left }}
+        {{ page.footer_center }}
+        {{ page.footer_right }}
+      </div>
+    </footer>
+  {% endif %}
+
+{#</div> /.layout-container #}

web/themes/custom/materiotheme/templates/layout/region--content.html.twig

@@ -0,0 +1 @@
+{{ content }}

web/themes/custom/materiotheme/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 %}