regions:
  header: Header
  content: Content
  sidebar_first: Sidebar First
  footer: Footer
  page_top: Page top
  page_bottom: Page bottom

{# Twig Tweak file_uri filter #}
{% set image_uri = 
   paragraph.field_image|file_uri // also node.field_image works
%}
{% if image_uri is not empty %}
  {# Use Twig Tweak image_style filter to get url #}
  {% set image_url = 
   image_uri|image_style('image_style_machine_name')
  %}
{% endif %}
{% if image_uri is not empty %}
  {# Use Twig Tweak to render image #}
  {{ drupal_image(image_uri, 'image_style_machine_name') }} // 
{% endif %

// file: THEME.theme
<?php
use Drupal\Component\Render\FormattableMarkup;
use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_preprocess_page()
 */
function THEME_preprocess_page(&$variables) {
    // Add container class to page.html.twig template
    $variables['attributes']['class'][] = 'container';
}

/**
 * Implements hook_preprocess_block().
 */
function THEME_preprocess_block(&$variables) {
  // Add layout class to Featured Blocks
  $featured = array('block-customblockone','block-customblocktwo','block-customblockthree');
  $id = $variables['attributes']['id'];

  // If block id matches list - add class
  if(in_array($id, $featured)) {
    $variables['attributes']['class'][] = 'col-md-4';
  }

}
/**
 * Implements hook_preprocess_field().
 */
function THEME_preprocess_field__block_content__hero(&$variables) {
   $variables['my_date'] = '<h3>'. date("Y-m-d") . '</h3>';
}

/**
 * Implements hook_preprocess_field().
 */
function THEME_preprocess_field__block_content__field_learn_more__hero(&$vars) {
  // <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &gt;&gt;</a></p>

  $vars['items'][0]['content']['#options']['attributes']['class'][] = 'btn btn-primary btn-lg';
  $vars['items'][0]['content']['#options']['attributes']['role'] = 'button';
  $title = $vars['items'][0]['content']['#title'];
  $title = new FormattableMarkup(
    '@title&nbsp;&nbsp;<span style="font-size:0.7em;" class="glyphicon glyphicon-forward" aria-hidden="true"></span>', [
    '@title' => $title,
  ]);

  $vars['items'][0]['content']['#title'] = $title;
}

/**
 * Implements hook_preprocess_node().
 */
function THEME_preprocess_node(&$variables) {
  // Get the node's content type
  $type = $variables['node']->getType();

  // Get its view mode
  $mode = $variables['view_mode'];

  // Make sure we have a class array
  if (!isset($variables['attributes']['class'])) {
    $variables['attributes']['class'] = [];
  }

  // Add our classes
  $variables['attributes']['class'][] = 'node--type-' . $type; // ex: node--type-article
  $variables['attributes']['class'][] = 'node--mode-' . $mode; // ex: node--mode-teaser
  $variables['attributes']['class'][] = 'node--type-' . $type . '--mode-' . $mode; // ex: node--type-article--mode-teaser
}

/**
 * Implements template_preprocess_image
 */
function THEME_preprocess_image(&$variables) {
  // Add class to <img> tag based on the image style
  // Check the image style.
  if ($variables['style_name'] == 'blog_image') {
    // Set class.
    $variables['attributes']['class'][] = 'img-fluid';
  }
}

/**
 * Implements hook_form_FORM_ID_alter
 */
function THEME_form_user_register_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  // Add alterations specific to the user registration form
  // FORM_ID is the CSS id of the form
  // In this example id = user-registration-form
  // In the function name convert "-" (hyphens) in form id to "_"  (underscores)
}

/**
 * Implements hook_form_alter().
 */
function THEME_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if ($form_id == 'user_register_form') {
    // Modify form
  }
}

/**
 * Implements hook_theme_suggestions_HOOK_alter
 */
function THEME_theme_suggestions_container_alter(&$suggestions, $vars) {
  $element = $vars['element'];
  if (isset($element['#type'])) {
    if ( $element['#type'] == 'webform_actions' &&  $element['#webform'] == 'newsletter_signup') {
      // container--webform-actions-newsletter-signup.html.twig
      $suggestions[] = 'container__' . $element['#type'] . '_' . $element['#webform'];
    }
  }
}

/**
 * Implements hook_theme_suggestions_HOOK_alter
 */
function THEME_theme_suggestions_input_alter(&$suggestions, $vars) {
  $element = $vars['element'];
  // Newsletter submit button
  if (isset($element['#attributes']['data-twig-suggestion'])) {
    // input--submit--webform-newsletter-submit.html.twig
    $suggestions[] = 'input__' . $element['#type'] . '__' . $element['#attributes']['data-twig-suggestion'];
  }

  // Search form input field in Header
  if ($element['#attributes']['name'] == 'search_api_fulltext') {
    //  input--textfield--search-api-fulltext.html.twig
    $suggestions[] = 'input__' . $element['#type'] . '__' . $element['#attributes']['name'];
  }
}

function THEME_theme_suggestions_image_alter(&$suggestions, $vars) {
  dsm($vars);
}

html.html.twig
  page.html.twig
    block.html.twig
      views-view.html.twig
        form.html.twig
          views-exposed-form.html.twig
            form-element.html.twig
              form-element-label.html.twig
              input.html.twig
            form-element.html.twig
              form-element-label.html.twig
              input.html.twig
            container.html.twig
              input.html.twig
        views-view-table.html.twig
          views-view-fields.html.twig
            views-view-field.html.twig
            views-view-field.html.twig
            views-view-field.html.twig
        pager.html.twig
        container.html.twig
          views-view.html.twig

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
   include $app_root . '/' . $site_path . '/settings.local.php';
}

/**
 * Disable CSS and JS aggregation.
 */
$config['system.performance']['css']['preprocess'] = TRUE;
$config['system.performance']['js']['preprocess'] = TRUE;
...

/**
 * Disable the render cache (this includes the page cache).
 */
$settings['cache']['bins']['render'] = 'cache.backend.null';
...

/**
 * Disable Dynamic Page Cache.
 */
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

/**
 * Allow test modules and themes to be installed.
 */
$settings['extension_discovery_scan_tests'] = FALSE;

parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

drush cr all

{{ dump(content)}}
{{ dsm(content)}}

...
base theme: false
...

...
base theme: classy
...

# sassy.info.yml
name: Sassy
type: theme
description: 'A Classy sub theme but a little more Sassy'
core: 8.x
base theme: classy
libraries-override:
  classy/messages: sassy/messages

# sassy.libraries.yml
messages:
  version: VERSION
  css:
    theme:
      css/messages.css: {}

* Design Theme for fictional Elegant Gardens website
* Page mockups and assets are located in ```Development/mockups/eg```
* This design uses a Sub-theme based on ```classy``` base theme

### Design Mockup Review
* Mockups should provide all html/css/javascript files_
* For each page (home, products, services, contact, search etc.)
  * Identify page layout (note differences page to page)
  * Identify regions needed
  * Is page responsive ?
  * Note user experience features and characteristics
    * Fonts
    * Fixed header
    * Search box behavior
    * Full page "slider"
    * Icons
    * Animations
* Identify content types
* Identify taxonomy categories / terms
* Identify views
* Select Layout tool (Layout Builder, isplay Suite, Paragraphs, Panels)
      
#### Responsive
* Site doesn't appear to take responsive design into  consideration
   
#### Navigation
* Horizontal, selected link is highlighted
* Logo is svg file
* Doesn't adjust for smaller screen sizes

#### Home Page
* Header image
* Three columns of content, middle column has a set of links
* Probably can just create a front page and use custom css to produce the columns ?
  * Also consider creating a Landing Page content type
  * Use a block for each column ?
* Note: Author used Banner content type and blocks for home / front page but  
doesn't explain this decision
           
#### Services Page
* Need to create Services content type
* Need to create page view to show services in a grid

#### Blog Page
* Create Blog content type
  * Uses sprites for author, post date, comments icon
  * Replace with font-awesome icons ?
* Two column page design, use block view for archive list
* Note: Author decided to use basic Article content type for blog instead of Blog content type
  
#### Contact Page
* Use standard Contact form
* Will need custom css styling

### Sub-Theme Implementation
* Create ```themes/custom/eg``` folder
* Create ```eg.info.yml``` file
* Create ```eg.libraries.yml``` file
  * Add google fonts
* Copy mockup ```screenshot.png, logo.svg and favicon.ico``` to theme folder
* Copy ```Development/mockups/eg/css/styles.css``` to theme ```css/base/```
* Decide on and add desired regions to ```eg.info.html```
  * Author doesn't explain why he chose these particular regions
* _At this point enough of the sub-theme iniital work is done - move to  
initial site building phase_

### Site Building
#### Create content types
* Service Content type
* Banner Content - for site front page
* Article (Blog) Content type
* _Generate various content before working on templates_
  * Articles
  * Banner
  * Services
  
#### Create Views  
* Create Services Page view
* Create Article / Blog page view
* Note: Author uses fields option to build Blog view
* Construct Home Page as a set of blocks
  * Create "Work" block view
    * This is a view for articles tagged with work
    * Note: The need for this view wasn't very obvious from the analysis of the  
    mockup
  * Create "Banner View" block view
  * Create "Who" custom block
  * Create "My Philosophy" custom block
  * Place blocks in appropriate regions
* **_Note:_** Not sure why author didn't use built-in Front page view for the front page

#### Contact form
* Create contact form
* Add contact form link to main navigation menu

### Sub-Theme Template Overrides
* Create ```web/themes/custom/eg/templates/page--front.html.twig``` from  
```web/core/themes/classy/templates/layout/page.html.twig```
* Note: At this point suthor has us copy CSS files he built  
  BUT DOESN'T EXPLAIN HOW THEY WERE BUILT!! 
* This is really a lot of the work of integrating the Mockup CSS into the theme  
  
### Misc Additions
* Replace floats with flexbox -- DONE
* Add and style Article page  -- DONE
* Review CKEditor config and style content with CKEditor 
* Implement responsive navigation bar / site header - DONE but revisit
* Make site responsive -- DONE
* Add Blog Image style and Responsive Image style -- DONE
* Use font-awesome for Article / Blog icons  -- DONE
* Style and get search box working  -- TODO
  * Re-style search box button
   * Fix search form border - doesn't look right on FF
* Add footer regions and style -- DONE
  * Use footer-mockup.png  -- TODO
  * Add social media icons -- DONE
* Fix block region demonstration page  -- DONE
* Review and set up Responsive Images  -- DONE
* Check site on all browsers and mobile devices
  * Use ngrok
* Use layout builder to style Article and Service content -- TODO
* Add and style pagers for Blog and Services page -- TODO
* Investigate Smart Trim module -- TODO
* Center content on mobile and tablet views
* Experiment with e-commerce solutions