theming have changed under the hood in Drupal 8.
Basethemes pre-drupal 8 was basically a reset theme to fix Drupal’s divits markup, it give you some decent default markup elements & class structures (zen, mothership etc)
In Drupal8 we have fixed the worst of the markup/divitis patterns & underlying wtfs, and were giving you the themer a important choice of what you want to start out with- Are you gonna Stable or Classy? whats it gonna be punk ?

2 ways of markup

When we started the Quest for a better Drupal Frontend back in 2012(!) on of the core principles we build on was “Start with nothing - only add as needed”. 


During the development of Drupal8, we had alot of discussion’s of what defaults of Drupal markup should be. One camp was steadfast in their belives that Drupal should not put anything out besides of a {{ foo }} with absolutely nothing else, no css selectors or markup -The less agreessive & non markup elitist wanted a better default way, so there was something to build on, if you just popped on a drupal 8 site -guess 3 times which camp i was in ;)


The original discussion around seperating core and theme was later to be known as "the banan concensus
 

classy - Sensible defaults aka Drupals markup & selectors.

You can look at the classy basetheme as having the same function that older versions of Drupal core had - it puts out Drupals default markup & classes, this time though we cleaned out the divitis and build a css architecture build on BEM naming.

yes classy got its name cause thats where the classes lives (more about that later)

We basically moved out all the markup & css selectors out of Drupal core, and into classy, so it now lives in the theme instead of inside of cores modules.

Stable - the clone of Drupal8.0 

When building core, its not everything that you get around to fix there’s still bugs around and even worse: the internet & especially the frontend changes! Back in 2010 when Drupal7 was getting ready to be released, that was when that responsive thing happend - we went from 960px-wide-3col-websites to mediaquery’s & rethinking how a website was designed & behaved.
The problem was that all the Drupal themes all over the world was relying on Drupals core markup, so for core to change so it could become responsive & moderne would break the internet, as en example imaging we removed the field or node selectors from your drupal7 site the next time you upgrade, would be fun right.

Now learning from the past - Drupals core templates got cloned  into a theme cleverly named Stable by Alex Pott “cause its where we try to keep the wild west of the markup in control” , So now WHEN we need to change something inside of Drupal core markup or selectors we can do that & wont break anything, cause you theme is using classy or stable.
 

Basetheme definition

Ok enough talk lets create a super duper theme based on stable, lets call the theme for bulldog, inside of /themes/ you create a folder “bulldog” and the info file bulldog.info.yml both files can be downloaded under the code snippet
 

yaml Created with Sketch. bulldog.info.yml

yaml
name: bulldog #the name of your theme
type: theme
description: ’English Bulldogs snores like little princesses ’
base theme: stable #stable or classy
core: 8.x
screenshot: bulldog-skateboard.gif #yes you can have a gif !

Now what do i do ?

Ok so now we have created the info file, then you can choose multiple ways of working with your theme in the future.

  1.  copy and overwrite template files as you need em. 
  2.  clone classy / stable’s template folder and drop em into you theme.

I personally prefer just to clone everything over from core, then i know where it is, I can look at the templates, and i can reorganize them as I want to. 

copy: /core/themes/classy/templates/
into: /themes/bulldog/templates/

Living on the edge


You can choose if you really really want & your ready to upgrade you theme when core changes markup or css selectors, then you can choose to set <code>basetheme:false </code> that tells drupal to read the templates from the core module that puts em out, but dont come whining when your sites explodes, when we get around to fix some of the crap that still floating around in Drupal8 (classes that we never got moved out to classy, stupid markup etc) 

Hope that helped you out in the big Question about “what basetheme to use” - Classy and Stable theming thats Drupal8.
 

The difference: Classy & stable

so lets take a  look at a template from Classy: the node, 

 

{# classy:  node.htm.twig #}
{%
  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,
  ]
%}
<article{{ attributes.addClass(classes) }}>

 

First in the node template, we create a twig variable using {% set %} the variable "classes" is an array where we define each class.

'node', 

Just the class name nothing fancy here

'node--type-' ~ node.bundle|clean_class,

will create a class ala "node--type-article"

  • the tilde ~ is used for adding to the the string 'node'
  • the pibe | is used in twig to do all kinds of magic to data, in this case we use drupals very own clean_class function, that makes sure that our class names wong come out with illegal characters.
node.isPromoted() ? 'node--promoted',

With twig we can test for true or false so in this case we ask the node if its set to be promoted if it is then add in the class node--promoted, this is very usefull for testing on all kinds of things, the syntax goes like this 

is something true ? 'yes' : nope

Now that we have created all the classes then the next step is to add them to the article tag, we do that inside of the {{ attribute }} with .addClass()

<article{{ attributes.addClass(classes) }}>

.addClass is adding in the classes we have generated to the class attributes, so that node when printed would have something like this 

<article class="node node-type--article node--promoted">

twig Created with Sketch. node.html.twig (classy)

twig
{# classy:  node.htm.twig #}
{%
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,
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>

{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}

{% if display_submitted %}
<footer class="node__meta">
{{ author_picture }}
<div{{ author_attributes.addClass('node__submitted') }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
{{ metadata }}
</div>
</footer>
{% endif %}

<div{{ content_attributes.addClass('node__content') }}>
{{ content }}
</div>

</article>

twig Created with Sketch. node.html.twig (stable)

twig

<article{{ attributes }}>

{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}

{% if display_submitted %}
<footer>
{{ author_picture }}
<div{{ author_attributes }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
{{ metadata }}
</div>
</footer>
{% endif %}

<div{{ content_attributes }}>
{{ content }}
</div>

</article>

two starting points one common goal

Hope this clears up some of the confusion that have been around the two new "basethemes" in Drupal8, how they are saving us from mistakes we have made earlier, and gives you the best starting position for theming in Drupal8 without having to look for a "good base to start from" 

Now go and design something pretty

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.