...
Copenhagens Finest Themes (tm)
"As a themer I want to implement an awesome design into Drupal
I will accept this story when in not loosing my sanity inside a php array"
From the frontend perspective ?
sorry devs you can moan later
wait im just a piece of data
Was not an official thing
Themers are not that Dumb
or 666 reasons why Drupal8 is better than Drupal7
...
37% less id *
counting at alpha9
* kinda
<body class="html facepalm whateverthefuck ">
<body class="">
.notification {
/* general styles for all notifications */
}
.notification--info {
/* blue color adjustments */
}
provide visibility
themes now lives in "/themes"
or "sites/ *** /themes"
modulename/templates/*.html.twig
$settings['twig_debug'] = TRUE;
the twig templates are compiled
(yes its the same thingie that compiling thing)
....
$settings['twig_debug'] = TRUE;
$settings['twig_auto_reload'] = TRUE;
HARD coded
is now a block
its dead easy
/*
comment
*/
<?php print $foo ; ?>
{# comment #}
{{ foo }}
/*
so php template
Now where is that value again
*/
<?php print $foo['bar']['UND']->baz['what']->thefuck['seriously'] ?>
{# hello twig can you find valdo ? #}
{{ foo.bar.baz.done.with.this.shit }}
{{ foo['bar'] }}
{% functions %}
<?php if($foo): ?>
<?php print $var; ?>
<?php endif; ?>
{% if foo %}
{{ var }}
{% endif %}
Team Awesome
{% for user in users %}
- {{ user.username}}
{% endfor %}
Team Awesome
- cottset
- joel
- jen
- mark carver
- mortendk
{{ loop.length }}
{{ loop.first }}
{{ loop.last }}
{{ loop.index }}
{% if loop.first %}
...
{% elseif loop.index == 2 %}
...
{% elseif loop.last %}
...
{% endif %}
{% set foo %}
count-{{ loop.index }}
{% endset %}
{{ foo }},
count-1,count-2, count-3,
{% filter upper %}
uppercase for the win
{% endfilter %}
UPPERCASE FOR THE WIN
{{ foo|dostufftofoo }}
{# name = morten #}
{{ name|striptags|title }}
Morten
name: drupal7themename
description = This is my epic D7 theme
screenshot = screenshot.png
engine = phptemplate
core = 7.x
php = 5.2
regions[header] = Header
regions[logo] = Logo
regions[menu] = Menu
regions[messages] = Messages
regions[content] = Content
regions[footer] = Footer
stylesheets[all][] = css/style.css
#FOAD fix
stylesheets[all][] = donteverloadmeagain.css
name: drupal8themename
type: theme
description: This is my epic D8 theme
package: Core
core: 8.x
stylesheets:
all:
- css/layout.css
print:
- css/print.css
stylesheets-remove:
- system.theme.css
- user.icons.css
- stuffidontwant.css
regions:
header: Header
logo: Logo
menu: Menu
messages: Messages
content: Content
footer: Footer
# engine: phptemplate
# engine: phptemplate
its now build in
stylesheets[all][] = css/style.css
#FOAD fix
;stylesheets[all][] = donteverloadmeagain.css
stylesheets[all][] = system.theme.css
stylesheets[all][] = user.icons.css
stylesheets[all][] = stuffidontwant.css
stylesheets-remove:
- system.theme.css
- user.icons.css
- stuffidontwant.css
<?php if ($page['footer']): ?>
<?php endid ?>
{% if page.footer %}
{% endif %}
<div{{ attributes }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
<div{{ content_attributes }}>
{{ content }}
</div>
</div>
<nav class="{{ attributes.class }}" role="{{ attributes.role}}">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{{ content }}
</nav>
theme hook suggestions
...
{{ attributes.class |replace( {'block': '' }) }}
block.html.
<nav class="{{ attributes.class }}" role="{{ attributes.role}}">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{{ content }}
</nav>
block--system-menu-block.html.twig
Done
{{attributes}}
...
...
....
add .foo
foo
.twig
foo
drupal
Terms
the designer is an idiot
and they wanna support ie "something"
the Markup
<section class="tags">
3 tags:
foo,
bar,
baz.
</section>
the markup
.thedesignerisanidiot{
color: green;
font-style:italic;
}
{# Start the loop #}
{% for delta, item in items %}
{# create a class var #}
{% set class %}
{# odd even #}
{{- cycle(["even", "odd"], delta) }}
{# count-x #}
count-{{ loop.index -}}"
{% endset %}
{{item}},
{# end the loop #}
{% endfor %}
field--field-tags.html.twig
Odin,
Thor,
Freya,
drupal8
tags vs tag
{# first loop #}
{% if loop.first %}
{# set tags / tag #}
{% if loop.length > 1 %}
{{ loop.length }}
tags:
{% else %}
tag:
{% endif %}
...
field--field-tags.html.twig
3 tags:
add a class on 2 tag
{% if loop.first %}
...
{% elseif loop.index == 2 %}
{{item}},
...
{# end the loop #}
{% endfor %}
field--field-tags.html.twig
Odin
Thor
Freya
{% if loop.first %}
{% if loop.length > 1 %}
{{ loop.length }} tags:
{% else %}
tag:
{% endif %}
{{item}},
{% elseif loop.index == 2 %}
{{item}},
{% elseif loop.last %}
{{item}}.
{% else %}
{{item}},
{% endif %}
field--field-tags.html.twig
3 tags:
Odin,
Thor,
Freya.
TWIG BLOCK
{% block foobar %}
{# i can be something else #}
{% endblock %}
{% block headerblock %}
change me if im on the frontpage
{% endblock %}
page.twig.html
{% extends "themes/yggdrasil/templates/page.html.twig" %}
{% block headerblock %}
Im on the frontpage!
{% endblock %}
page--front.html.twig
html.html.twig + page.html.twig
translate
{{ 'last checked: @time ago'| t({'@time':time}) }}
{% trans %}
Hi im a swede and i speak funny: Höidy hoeeeydi
{% endtrans %}
Höidy hoeeeydi
HERO's wanted
Frontend Heros
No more fucking whining!
Drupaltwig.org
twig team
cottser, joel, jen lampton, mortendk, ruben, markcarver, fabianX.
YOU
#Drupaltwig weekly meeting
Thursdays at 1am CET
on IRC: #drupal-twig
Codesprint tomorrow
11:00
Field.twig
codesprints upcoming
Drupal Dev Day's sZeged 24-30 march
Midcamp Chicago 24-30 march
#Drupaltwig
drupaltwig.org
resourses
TWIG documentation: twig.sensiolabs.org/doc/templates.html
drupaltwig.org
Slides: http://mortendk.github.io/drupal8-twig-stockholm-2014
Questions?
@mortendk
#drupaltwig
drupaltwig.org