Using Core Themes in Drupal 8

U S I N G C O R E B A S E
T H E M E S I N D R U PA L 8
B A C K T O B A S I C S

S U Z A N N E K E N N E D Y
D E R G A C H E VA
• Co-founder of Evolving
Web
• Training, Development,
Consulting

D R U PA L 8
T R A I N I N G
• July 20-21 in Ottawa
• Aug 22-26 in Montreal
• Sept 12-16 in Ottawa
• Sept 26-30 in Toronto
• October 3-4 in Chicago
• evolvingweb.ca/training

– S E L I M T O L G A
“For a happier life keep only the things you love
and use.”

A R E Y O U U S I N G A
C O N T R I B B A S E T H E M E ?

W H Y U S E A C O R E B A S E T H E M E ?
• Because Drupal 8 core is awesome
• You get understanding, control over what’s added in
your theme
• Fewer customizations that you don’t know are there
• Less code to maintain
• Easier to on-board new themers

W H Y C L A S S Y A N D S TA B L E A R E
I N V I S I B L E
C L A S S Y. I N F O . Y M L , S TA B L E . I N F O . Y M L
hidden: true

S TA B L E
• Includes all core template
files, which WON’T change
if core changes
• The default base theme for
Drupal 8

S TA B L E T E M P L AT E S
H T M L . H T M L . T W I G I N S TA B L E
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
</head>
<body{{ attributes }}>
<a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token|raw }}">
</body>
</html>

C L A S S Y
• Includes all core template
files, which WON’T change
if core changes
• These templates add many
wonderful, useful classes
• We get classes body
classes, classes for nodes,
fields, views, etc.

C L A S S Y T E M P L AT E S
H T M L . H T M L . T W I G
{%
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|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
</head>
<body{{ attributes.addClass(body_classes) }}>
<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|raw }}">
</body>
</html>

Stable
Classy
My Theme Zen Bootstrap
Core Templates
base theme: falsebase theme: classy
Adaptive
base theme: stable
Omega

A L L Y O U R B A S E A R E B E L O N G T O U S ,
U N L E S S …
M Y T H E M E . I N F O . Y M L
base theme: false

E X T E N D I N G C L A S S Y
base theme: classy

N O R M A L I Z E . C S S
M O D E R N I Z R . J S
Y O U G E T

C S S F O R
D R U PA L
C O M P O N E N T S
Y O U G E T
base:
version: VERSION
css:
component:
css/components/action-links.css: { weight: -10
css/components/breadcrumb.css: { weight: -10 }
css/components/button.css: { weight: -10 }
css/components/collapse-processed.css: { weigh
css/components/container-inline.css: { weight:
css/components/details.css: { weight: -10 }
css/components/exposed-filters.css: { weight:
css/components/field.css: { weight: -10 }
css/components/form.css: { weight: -10 }
css/components/icons.css: { weight: -10 }
css/components/inline-form.css: { weight: -10
css/components/item-list.css: { weight: -10 }
css/components/link.css: { weight: -10 }
css/components/links.css: { weight: -10 }
css/components/menu.css: { weight: -10 }
css/components/more-link.css: { weight: -10 }
css/components/pager.css: { weight: -10 }
css/components/tabledrag.css: { weight: -10 }
css/components/tableselect.css: { weight: -10
css/components/tablesort.css: { weight: -10 }
css/components/tabs.css: { weight: -10 }
css/components/textarea.css: { weight: -10 }
css/components/ui-dialog.css: { weight: -10 }
!
book-navigation:
version: VERSION
css:
component:
css/components/book-navigation.css: {}

D E FA U LT
R E G I O N S
Y O U G E T
regions:
header: Header
primary_menu: Primary Menu
secondary_menu: Secondary Menu
breadcrumb: Breadcrumb
highlighted: Highlighted
help: Help
content: Content
sidebar_first: Sidebar first
sidebar_second: Sidebar second
footer: Footer
page_top: Page Top
page_bottom: Page Bottom

H T M L 5
Y O U G E T
<header role="banner">
{{ page.header }}
</header>
!
<main role="main">
<a id="main-content" tabindex="-1"></a>
!
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
</main>
!
{% if page.footer %}
<footer role="contentinfo">
{{ page.footer }}
</footer>
{% endif %}

C L E A N E R M A R K U P
Y O U G E T
<div class="field field-name-field-name field-type-text
field-label-hidden”>
<div class="field-items">
<div class="field-item even">Ella</div>
</div>
</div>
<div class="field field--name-field-name field--type-
string field--label-hidden field__item">Ella</div>
S I N G L E VA L U E F I E L D I N D 7
S I N G L E VA L U E F I E L D I N D 8

T W I G T E M P L AT E S G A L O R E
Y O U G E T

B E M C L A S S E S
Y O U G E T
B L O C K , E L E M E N T, M O D I F I E R
<div class="field field--name-field-name
field--type-string field--label-hidden
field__item">Ella</div>

W H AT ’ S
M I S S I N G ?
S TA R I N G W I T H C L A S S Y

W H AT ’ S M I S S I N G ?
• Pre-existing, organized stylesheets
• Layout CSS or a grid system
• Extra regions to place your content
• So… how do we add these?

C U S T O M I Z I N G
R E G I O N S
• Define them in
your .info.yml file
• Use them in your
page.html.twig file
regions:
header: Header
primary_menu: Primary Menu
secondary_menu: Secondary Menu
breadcrumb: Breadcrumb
highlighted: Highlighted
help: Help
content: Content
content_bottom: Content bottom
pre_footer: Pre-footer
footer: Footer
page_top: Page Top
page_bottom: Page Bottom

O R G A N I Z I N G Y O U R C S S
M Y T H E M E . L I B R A R I E S . Y M L
global-styling:
css:
base:
css/base/normalize.css
css/base/elements.css
layout:
css/layout/layout.css
css/layout/layout--medium.css
css/layout/layout--wide.css
component:
css/node.css
css/block.css
css/menu.css
theme:
css/styles.css
css/typography.css

O R G A N I Z I N G Y O U R C S S
!
libraries:
- 'mytheme/global-styling'

C L A S S Y L O O K I N G S A S S Y
M Y T H E M E . L I B R A R I E S . Y M L
global-styling:
css:
base:
css/base.css
layout:
css/layout.css
component:
css/components.css
theme:
css/styles.css
sass/base.scss
sass/layout.scss
sass/_layout-wide.scss
sass/_layout-small.scss
sass/components/scss
sass/_block.scss
sass/_node.scss
sass/_menu.scss
sass/styles.scss
sass/_branding.scss
sass/_typography.scss

R E M O V I N G C S S
!
!
libraries-override:
classy/messages: false
!
stylesheets-remove:
- core/assets/vendor/normalize-css/normalize.css

G R I D S , G R I D S E V E RY W H E R E !

Y O U H AV E S O M E O P T I O N S …
• Add a CSS grid system to your theme - then apply the
appropriate classes in your templates (Boostrap, Zurb
Foundation, Skeleton, Simple Grid, etc.)
• Use a grid system like Zen grids, which you apply by
writing CSS using Classy classes
• Create your own grid system css-tricks.com/dont-
overthink-it-grids
• Write CSS using Classy classes to create a layout/grid

I M P L E M E N T I N G
A G R I D S Y S T E M
• Add grid CSS to your
theme
• Add appropriate classes
to:
• Your Twig templates
• Views config
• Your content (if needed)

I M P L E M E N T I N G A G R I D L AY O U T
PA G E . H T M L . T W I G
{%
set content_classes = [
page.sidebar_first and page.sidebar_second ? 'col-sm-6',
page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9',
page.sidebar_second and page.sidebar_first is empty ? 'col-sm-9',
page.sidebar_first is empty and page.sidebar_second is empty ? 'col-
sm-12'
]
%}
<section{{ content_attributes.addClass(content_classes) }}>
{{ page.content }}
</section>

C R E AT I N G A
L AY O U T W I T H C S S
• Add layout classes to your
body tag
• Add a layout.css file that
positions regions
• Add CSS for any grid-like
elements
• Use media queries to
adjust the layout for
different screen sizes
{%
set body_classes = [
logged_in ? 'user-logged-in',
…
page.sidebar_first ? 'sidebar-first',
page.sidebar_second ? 'sidebar-second',
]
%}

C R E AT I N G A
L AY O U T W I T H C S S
• Add layout classes to your
body tag
• Add a layout.css file that
positions regions
• Add CSS for any grid-like
elements
• Use media queries to
adjust the layout for
different screen sizes
#content {
width: 100%;
}
@media screen and (min-width: 800px){
body.sidebar-first #content {
width: 80%;
left: 20%; /* LTR */
}
body.sidebar-second #content {
width: 80%;
}
body.two-sidebars #content {
width: 60%;
left: 20%;
}
#sidebar-first {
width: 20%;
left: -80%; /* LTR */
}
body.two-sidebars #sidebar-first {
left: -60%; /* LTR */
}
#sidebar-second {
float: right; /* LTR */
width: 20%;
}
}

T O O M U C H W O R K ?
• Contrib base themes provide:
• Settings
• Grid system integration out-of-the-box:
• Templates with correct classes
• CSS for layout and styling of elements

bit.ly/d8-layouts
Webinar: Creating Mobile-Proof Layouts in Drupal 8
June 27 at 12-1pm

Using Core Themes in Drupal 8

Related slideshows

More Related Content

Using Core Themes in Drupal 8