name: Calypso
type: theme
base theme: classy
description: 'A theme in dedication to the goddess of the sea.'
core_version_requirement: ^8 || ^9

global:
  version: VERSION
  css:
    component:
      css/styles.css: {}

libraries:
- fluffiness/global

body {
    background-color: hotpink;
}

background: url('/themes/fluffiness/assets/images/cat.jpg')

{# region.html.twig
/**
 * @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 %}

{# comment #}

{{ variable }}

{% functional %}

.container {
	max-width: 1200px;
    margin: 0 auto;
}

  twig.config:
    # Twig debugging:
    #
    # When debugging is enabled:
    # - The markup of each Twig template is surrounded by HTML comments that
    #   contain theming information, such as template file name suggestions.
    # - Note that this debugging markup will cause automated tests that directly
    #   check rendered HTML to fail. When running automated tests, 'debug'
    #   should be set to FALSE.
    # - The dump() function can be used in Twig templates to output information
    #   about template variables.
    # - Twig templates are automatically recompiled whenever the source code
    #   changes (see auto_reload below).
    #
    # For more information about debugging Twig templates, see
    # https://www.drupal.org/node/1906392.
    #
    # Not recommended in production environments
    # @default false
    debug: false

{% filter upper %}
    uppercase is awesome
{% endfilter %}

{{ variable|upper }}

{{ var|clean_class }}
{{ var|clean_id }}
{{ var|format_date }}
{{ var|raw }}
{{ var|render }}
{{ var|safe_join }}
{{ var|without }}

<a 
    href="{{ url('<front>') }}" 
    title="{{ 'Home'|t }}" 
    rel="home" 
    class="site-logo"
></a>

{% trans %}Translatable text{% endtrans %}

{{ content|without('field') }}

.row {
    margin-left: -1rem;
    margin-right: -1rem;
}

.column {
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media only screen and (min-width: 768px)  {
    .col-md-6 {
        width: 50%;	
    }
}

{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
  ]
%}

{{ dump(var) }}  -> not reliable

{{ dpm(var) }}   -> outputs a lot

{{ kpr(var) }}   -> similar to dpm

{{ kint(var) }}  -> most readable;
                 -> very heavy on memory
                 -> crashes a lot on big objects

{{ dpm(content) }}

{# Print only field_body information #}
{{ dpm(content.field_body) }}

{# Printing image url value #}
{{ dpm(content.field_bg_image.0.entity.uri.value) }}

{# Printing a media image url value #}
{{ file_url(content.field_media_image|field_target_entity.field_media_image.entity.uri.value) }}

<div class="nickelback">

<div {{
    attributes
        .removeClass('nickelback')
        .addClass('rush')
        .setAttribute('id', 'top')
    }}>

<div id="top" class="rush">

global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }

js-header:
  header: true
  js:
    header.js: {}

js-footer:
  js:
    footer.js: {}

base:
 foo.css: { weight: - 666 }

js-header:
  header: true
  js:
    header.js: {}

theme:
 http://fonts.googleapis.com/css?
  family=Loved+by+the+King: { type: external }

global-styling:
  version: 1.x
    js:
      js/scripts.js: {}

global-styling:
  version: 1.x
    js:
      js/scripts.js: {}
      /libraries/cycle2/jquery.cycle2.min.js: {}

global-styling:
  version: 1.x
  css:
    base:
      css/d8imd.css: {}
  js:
    js/d8imd.js: {}
  dependencies:
    - core/jquery

libraries:
  - core/normalize
  - d8imd/global-styling

{{ attach_library('d8imd/global-styling') }}

{{ attach_library(active-theme()~'/global-styling') }}

{% if id == "view_carousel" %}
  {{ attach_library('theme/carousel') }}
{% endif %}

(function () {
  'use strict';
  // Custom javascript
})();

(function () {
  'use strict';
  window.alert("sometext");
})();

(function ($) {

  'use strict';

  $( document ).ready(function() {
    console.log( "ready!" );
  });

})(jQuery);

/**
 * @file
 * Placeholder file for custom sub-theme behaviors.
 *
 */
(function ($, Drupal) {

  'use strict';

  /**
   * Example drupal behavior
   */
  Drupal.behaviors.exampleBehavior = {
    attach: function (context, settings) {
      $('.example', context).once('example-behavior').each(function () {

      });
    }
  };

})(jQuery, Drupal);

/**
 * @file
 * Placeholder file for custom sub-theme behaviors.
 *
 */
(function ($, Drupal) {

})(jQuery, Drupal);

/**
 * Example drupal behavior
 */
Drupal.behaviors.awesome = {
  attach: function(context, settings) {
    $('main', context).once('awesome').append('<p>Hello world</p>');
  }
};

attach: function (context, settings) {
  $('.example', context).once('example-behavior').each(function () {
    alert('I\'m helping!');
  });
}

$('main', context).once('awesome').append('<p>Hello world</p>');

  // Engine
  Drupal.sbs_nu_v2.startAnimation = function() {
    Drupal.sbs_nu_v2.animateActiveItem();
    window.setInterval(function(){
      Drupal.sbs_nu_v2.animateActiveItem();
    }, 20000);
  };


  // Init
  Drupal.behaviors.sbs_nu_v2 = {
    attach: function (context, settings) {
      $('#sbs-nu-v2', context).once('init-epg-box', function () {
        Drupal.sbs_nu_v2.container = $(this);
        Drupal.sbs_nu_v2.init();
      });
    }
  };

// Make string available on translate interface
var close = Drupal.t('Close');

// Same, but with @placeholder 
var nodesOfType = Drupal.t('Showing nodes of @type', {@type: nodeType});

console.log('Hi');
console.log(Drupal);

<?php
/**
 * @file
 * template.php
 */
 
// Add these when/if needed
use Drupal\Component\Utility\Html;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Url;
use Drupal\media\Entity\Media;

// add functions below

/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
  // If there is not an existing class array, create an empty array.
  if (!isset($variables['attributes']['class'])) {
    $variables['attributes']['class'] = [];
  }
  // Merge with any classes that may have been set
  // by other hook_preprocess_menu invocations
  $variables['attributes']['class'] = 
           array_merge($variables['attributes']['class'], ['my-menu']);
}

/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {

  var_dump($variables);
  var_dump($variables['main_menu']);

  dsm($variables);
}

/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    if (!isset($variables['attributes']['class'])) {
      $variables['attributes']['class'] = [];
    }
    $variables['attributes']['class'] = 
      array_merge($variables['attributes']['class'], ['my-main-menu']);  }
}

/**
* Implements hook_preprocess_node().
*/
function mytheme_preprocess_node(&$variables) {

  if(isset($variables['content']['#node'])) {
    $node = $variables['content']['#node'];

    // Add node url
    $variables['url'] = $node->toUrl();
  }

}

<a href="{{ url }}" class="inner">

/**
 * Implements hook_preprocess_paragraph().
 */
function mytheme_preprocess_paragraph(&$variables) {

  if ($entity = $variables['elements']['#paragraph']) {
    
    // Title align.
    if ($entity->hasField('field_title_align')) {
      $field_title_align = $entity->get('field_title_align')->getValue();
      $field_title_align = reset($field_title_align);

      if ($field_title_align) {
        $variables['attributes']['class'][] = 'title-align--' 
        . Html::cleanCssIdentifier(reset($field_title_align));
      }
    }
  }
}

<section{{ attributes.addClass(classes) }}>
  <div class="container">
    <div class="layout paragraph__layout">

function foo_form_system_theme_settings_alter(
           &$form,
           \Drupal\Core\Form\FormStateInterface &$form_state,
           $form_id = NULL
) {
  // Work-around for a core bug affecting admin themes. See issue #943212.
  if (isset($form_id)) {
    return;
  }

  $form['foo_example'] = array(
    '#type'          => 'textfield',
    '#title'         => t('Widget'),
    '#default_value' => theme_get_setting('foo_example'),
    '#description'   => t("Place this text in the widget spot on your site."),
  );
}

foo_example: blue bikeshed

$foo_example = theme_get_setting('foo_example');

<?php
function foo_preprocess_node(&$variables) {
  $variables['foo_example'] = theme_get_setting('foo_example');
}

{{ foo_example }}