<commit_before><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Building a custom theme in Drupal 8</title>

		<meta name="description" content="Building a custom theme in Drupal 8">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/moon.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Building a custom theme in Drupal 8</h1>
					<h3>Based on the Classy base theme</h3>
					<p>
						<small>Presented by <NAME></small>
					</p>
				</section>

				<section>
					<h2>Agenda</h2>
					<ul>
						<li>What's changing?</li>
						<li>Let's make a theme</li>
						<li>Twig basics and debugging</li>
					</ul>
				</section>

				<!-- SECTION 1: WHAT'S CHANGING -->

				<!-- 1A: What's new in Drupal 8 -->
				<section>
					<section>
						<h2>What's new in Drupal 8?</h2>
						<ul>
							<li>Twig, a template engine by SensioLabs, is used inside template files in lieu of PHP</li>
							<li>Classy, a new base theme, is introduced</li>
							<li>template.php becomes the slightly better-named [theme-name].theme. Maybe we’ll finally get theme.php in Drupal 9?</li>
						</ul>
					</section>

					<section>
						<h2>What's new in Drupal 8?</h2>
						<ul>
							<li>Responsive design elements are included by default</li>
							<li>Breakpoints can be set and used across modules and themes</li>
						</ul>
					</section>

					<section>
						<h2>What's new in Drupal 8?</h2>
						<ul>
							<li>Support for IE8 and below is dropped meaning the use of jQuery 2.0, HTML5, and CSS3 (including pseudo selectors) are now supported</li>
							<li>CSS: far fewer IDs are used, default classes are no longer in core but are moved to Classy, CSS file structure now uses SMACSS and class names follow the BEM format</li>
							<li>CSS and JS files are attached to pages differently</li>
						</ul>
					</section>

					<section>
						<h2>What's new in Drupal 8?</h2>
						<p>For a more comprehensive list, visit Drupal's <a href="https://www.drupal.org/list-changes/published/drupal?keywords_description=&to_branch=&version=&created_op=%3E%3D&created%5Bvalue%5D=&created%5Bmin%5D=&created%5Bmax%5D=&impacts%5B%5D=3">change log.</a></p>
					</section>
				</section>
				<!-- End 1A -->

				<!-- 1B: Pros of changes -->
				<section>
					<section>
						<h2>Why all the changes?</h2>
						<h3>In summary...</h3>
						<ol>
							<li>So everyone can use Drupal</li>
							<li>To make Drupal more secure, more flexible, more current, more organized, and more semantic</li>
						</ul>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>Accessibility to non-Drupalers</h3>
						<ul>
							<li>Fewer Drupal-specific conventions and more popular, well-documented frameworks (such as Twig), meaning non-Drupalers can jump in much more quickly.</li>
							<li>D8 themers don’t need to know PHP to whip up a theme.</li>
						</ul>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>Security</h3>
						<ul>
							<li>Text is automatically escaped in Twig, meaning a lower chance of XSS attacks.</li>
							<li>Template files are more secure since they no longer contain PHP code.</li>
						</ul>

						<pre><code data-trim>
db_query('DROP TABLE {users}');
						</code></pre>

						<p><small>Scary example courtesy of Sanders at d8.sqndr.com.</small></p>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>Look at all the pretty things we get to use now!!</h3>
						<ul>
							<li>HTML5</li>
							<li>CSS3</li>
							<li>Modern jQuery libraries</li>
							<li>SMACSS</li>
							<li>BEM</li>
							<li>Responsive breakpoints</li>
						</ul>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>...but seriously</h3>
						<ul>
							<li>Separation of logic from appearance, leading to more modular (reusable) code.</li>
							<li>More semantic CSS class names means leaner CSS and a more readable DOM</li>
							<li>A general trend towards more extendable, modular, well-organized, better-performing code</li>
						</ul>
					</section>
				</section>
				<!-- End 1B -->

				<!-- 1C: Cons of changes -->
				<section>
					<section>
						<h2>Any disadvantages?</h2>
						<ol>
							<li>Many contributed themes and modules don't having their 8.x branches ready.</li>
						</ol>
						<p>An intimidating note on the 8.x branch of a popular contrib theme:</p>
						<blockquote>This is a development branch. Please note that this branch is probably severely broken. It is strongly recommended to wait before using this branch or even creating issues regarding it.</blockquote>
					</section>

					<section>
						<h2>Any disadvantages?</h2>
						<ol start=2>
							<li>Lack of documentation online</li>
						</ol>
						<p>Of the documentation that DOES exist, much of it is:</p>
						<ul>
							<li>Outdated, and marked as such.</li>
							<li>Outdated, and NOT marked as such.</li>
						</ul>
					</section>

				</section>
				<!-- End 1C -->

				<!-- END SECTION 1 -->

				<!-- SECTION 2: BUILDING A CUSTOM THEME -->
				<section>
					<h2>Folder structure</h2>
	
				</section>

				<section>
					<h2>Create a .into.yml file</h2>
	
				</section>

				<section>
					<h2>Classy, a new base theme</h2>
	
				</section>
<commit_msg>Add new theme and add content<commit_after><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Building a custom theme in Drupal 8</title>

		<meta name="description" content="Building a custom theme in Drupal 8">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/purple-moon.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Building a custom theme in Drupal 8</h1>
					<h3>Based on the Classy base theme</h3>
					<p class="centered">
						<small>Presented by <NAME></small>
					</p>
				</section>

				<section>
					<h2>Agenda</h2>
					<ul>
						<li>What's changing?</li>
						<li>Let's make a theme</li>
						<li>Twig basics and debugging</li>
					</ul>
				</section>

				<!-- SECTION 1: WHAT'S CHANGING -->

				<!-- 1A: What's new in Drupal 8 -->
				<section>
					<section>
						<h2>What's changing?</h2>
						<p class="centered"><small>...and how do I, a person who probably doesn't like change, cope with these changes...</small></p>
					</section>

					<section>
						<h2>What's new in Drupal 8?</h2>
						<ul>
							<li>Twig, a template engine by SensioLabs, is used inside template files in lieu of PHP</li>
							<li>Classy, a new base theme, is introduced</li>
							<li>template.php becomes the slightly better-named [theme-name].theme. Maybe we’ll finally get theme.php in Drupal 9?</li>
						</ul>
					</section>

					<section>
						<h2>What's new in Drupal 8?</h2>
						<ul>
							<li>Responsive design elements are included by default</li>
							<li>Breakpoints can be set and used across modules and themes</li>
						</ul>
					</section>

					<section>
						<h2>What's new in Drupal 8?</h2>
						<ul>
							<li>Support for IE8 and below is dropped meaning the use of jQuery 2.0, HTML5, and CSS3 (including pseudo selectors) are now supported</li>
							<li>CSS: far fewer IDs are used, default classes are no longer in core but are moved to Classy, CSS file structure now uses SMACSS and class names follow the BEM format</li>
							<li>CSS and JS files are attached to pages differently</li>
						</ul>
					</section>

					<section>
						<h2>What's new in Drupal 8?</h2>
						<p>For a more comprehensive list, visit Drupal's <a href="https://www.drupal.org/list-changes/published/drupal?keywords_description=&to_branch=&version=&created_op=%3E%3D&created%5Bvalue%5D=&created%5Bmin%5D=&created%5Bmax%5D=&impacts%5B%5D=3">change log.</a></p>
					</section>
				</section>
				<!-- End 1A -->

				<!-- 1B: Pros of changes -->
				<section>
					<section>
						<h2>Why all the changes?</h2>
						<h3>In summary...</h3>
						<ol>
							<li>So everyone can use Drupal</li>
							<li>To make Drupal more secure, more flexible, more current, more organized, and more semantic</li>
						</ul>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>Accessibility to non-Drupalers</h3>
						<ul>
							<li>Fewer Drupal-specific conventions and more popular, well-documented frameworks (such as Twig), meaning non-Drupalers can jump in much more quickly.</li>
							<li>D8 themers don’t need to know PHP to whip up a theme.</li>
						</ul>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>Security</h3>
						<ul>
							<li>Text is automatically escaped in Twig, meaning a lower chance of XSS attacks.</li>
							<li>Template files are more secure since they no longer contain PHP code.</li>
						</ul>

						<pre><code data-trim>
db_query('DROP TABLE {users}');
						</code></pre>

						<p><small>Scary example courtesy of Sanders at d8.sqndr.com.</small></p>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>Look at all the pretty things we get to use now!!</h3>
						<ul>
							<li>HTML5</li>
							<li>CSS3</li>
							<li>Modern jQuery libraries</li>
							<li>SMACSS</li>
							<li>BEM</li>
							<li>Responsive breakpoints</li>
						</ul>
					</section>

					<section>
						<h2>Why all the changes?</h2>
						<h3>...but seriously</h3>
						<ul>
							<li>Separation of logic from appearance, leading to more modular (reusable) code.</li>
							<li>More semantic CSS class names means leaner CSS and a more readable DOM</li>
							<li>A general trend towards more extendable, modular, well-organized, better-performing code</li>
						</ul>
					</section>
				</section>
				<!-- End 1B -->

				<!-- 1C: Cons of changes -->
				<section>
					<section>
						<h2>Any disadvantages?</h2>
						<ol>
							<li>Many contributed themes and modules don't having their 8.x branches ready.</li>
						</ol>
						<p>An intimidating note on the 8.x branch of a popular contrib theme:</p>
						<blockquote>This is a development branch. Please note that this branch is probably severely broken. It is strongly recommended to wait before using this branch or even creating issues regarding it.</blockquote>
					</section>

					<section>
						<h2>Any disadvantages?</h2>
						<ol start=2>
							<li>Lack of documentation online</li>
						</ol>
						<p>Of the documentation that DOES exist, much of it is:</p>
						<ul>
							<li>Outdated, and marked as such.</li>
							<li>Outdated, and NOT marked as such.</li>
						</ul>
					</section>

				</section>
				<!-- End 1C -->

				<!-- END SECTION 1 -->

				<!-- SECTION 2: BUILDING A CUSTOM THEME -->
				<section>
					<h2>Let's build this thing</h2>
				</section>

				<section>
					<h2>Create a theme folder</h2>
					<img width="660" height="255" src="images/theme-folder-location.png" alt="Screenshot of theme folder location">
					<p>Drupal core now resides in its own folder. Contributed and custom modules and themes are in the <code>modules</code> and <code>themes</code> folders, respectively.</p>
					<p>My custom theme folder is called <code>mappy</code>.</p>
					<p>Don't forget to create a <code>custom</code> folder for your custom theme!</p>
				</section>

				<section>
					<h2>Create a .into.yml file</h2>
					<pre><code data-trim>
# mappy.info.yml
name: Mappy
type: theme
description: 'D8 Theme for a basic leaflet site.'
core: 8.x
base theme: classy
libraries:
 - mappy/global-styling
 - mappy/leaflet
regions:
  navbar: 'Top Navigation Bar'
  content: Content
  sidebar: 'Sidebar'
  footer: 'Footer'
					</code></pre>
				</section>

				<section>
					<h2>Classy, a new base theme</h2>
	
				</section>

{'fraction_non_alphanumeric': 0.1471747700394218, 'fraction_numerical': 0.01445466491458607, 'mean_word_length': 2.6550160085378867, 'pattern_counts': {'":': 0, '<': 486, '<?xml version=': 0, '>': 486, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1584436', 'n_tokens_mistral': 6032, 'n_tokens_neox': 4492, 'n_words': 1384}