Episode 01 • Drupal 8 theming

Theme Setup

In this episode of Drupal 8 Theming tutorial series we are going to setup our theme, add our css file to it, remove some default css files and add our main JavaScript file.

Drupal uses .yml files for dealing with libraries (css and js), this is great. But the setup of those files in your theme isn't exactly intuitive, but it's not hard either.

In this tutorial you will learn how to register your theme and add css and JavaScript files to your theme.

Code used in this video

endymion.info.yml

name: Endymion
description: Drupal 8 Starter Theme
type: theme
core: 8.x
libraries:
  - endymion/global-css
  - endymion/global-js
stylesheets-remove:
  - core/themes/stable/css/views/views.module.css
  - core/themes/stable/css/system/components/align.module.css
```**endymion.libraries.yml**

 ```yml 
global-css:
  css:
    theme:
      css/style.css: {}

global-js:
  js:
    js/main.js: {}
  dependencies:
    - core/jquery
  • Episode 00 • Duration 07:31

    Installing Drupal 8

  • Episode 01 • Duration 20:16

    Theme Setup

  • Episode 02 • Duration 16:27

    Disable Cache, Enable Twig Debug

  • Episode 03 • Duration 13:40

    Gulp.js, Sass, LiveReload

  • Episode 04 • Duration 16:01

    Blocks and Regions

  • Episode 05 • Duration 08:09

    Let's Update Drupal 8

  • Episode 06 • Duration 22:43

    Theming the Header

  • Episode 07 • Duration 15:10

    Adding Main Navigation

  • Episode 08 • Duration 07:12

    Creating Partials

  • Episode 09 • Duration 21:29

    Introduction to Views

  • Episode 10 • Duration 14:36

    Creating and Displaying Content Types and Fields

  • Episode 11 • Duration 14:56

    Displaying Fields

  • Episode 12 • Duration 13:37

    Images and Image Sizes

  • Episode 13 • Duration 19:47

    Kint, Arrays, Twig, Foreach, If

  • Episode 14 • Duration 12:48

    Field Collections

  • Episode 15 • Duration 11:48

    Reference Fields

  • Episode 16 • Duration 18:43

    Working With CSS Frameworks

  • Episode 17 • Duration 24:24

    Regions and Blocks from Views

  • Episode 18 • Duration 26:19

    Taxonomy and Drop Down Menu

  • Episode 19 • Duration 16:23

    Rewriting Views Fields

  • Episode 20 • Duration 20:19

    Using Drush

  • Episode 21 • Duration 10:05

    Pathauto

  • Episode 00 • Duration 07:31

    Installing Drupal 8

  • Episode 01 • Duration 20:16

    Theme Setup

  • Episode 02 • Duration 16:27

    Disable Cache, Enable Twig Debug

  • Episode 03 • Duration 13:40

    Gulp.js, Sass, LiveReload

  • Episode 04 • Duration 16:01

    Blocks and Regions

  • Episode 05 • Duration 08:09

    Let's Update Drupal 8

  • Episode 06 • Duration 22:43

    Theming the Header

  • Episode 07 • Duration 15:10

    Adding Main Navigation

  • Episode 08 • Duration 07:12

    Creating Partials

  • Episode 09 • Duration 21:29

    Introduction to Views

  • Episode 10 • Duration 14:36

    Creating and Displaying Content Types and Fields

  • Episode 11 • Duration 14:56

    Displaying Fields

  • Episode 12 • Duration 13:37

    Images and Image Sizes

  • Episode 13 • Duration 19:47

    Kint, Arrays, Twig, Foreach, If

  • Episode 14 • Duration 12:48

    Field Collections

  • Episode 15 • Duration 11:48

    Reference Fields

  • Episode 16 • Duration 18:43

    Working With CSS Frameworks

  • Episode 17 • Duration 24:24

    Regions and Blocks from Views

  • Episode 18 • Duration 26:19

    Taxonomy and Drop Down Menu

  • Episode 19 • Duration 16:23

    Rewriting Views Fields

  • Episode 20 • Duration 20:19

    Using Drush

  • Episode 21 • Duration 10:05

    Pathauto