Skip to content Skip to navigation

BADCamp 2017: Caryl’s Training Recap

BADCamp is a delightful mix of networking and educational opportunities. Along with connecting with former acquaintances and meeting new people, I attended two really informative trainings. Here’s my recap:

Component Based Development

On the first day of BADCamp I attended the Component Based Development training delivered by Mario Hernandez. Mario presented his training through a handy set of exercises documented in his Component Based Development GitHub repo. I particularly liked this approach since it allowed Mario to immediately update and fix any issues discovered in the exercises, and class members could easily access the changes.

The purpose of the training was to explore...

“...one of the latest trends in development, components. Building a website using the component-based approach can dramatically improve collaboration among teams, making code more reusable, flexibility and long term maintenance of your website.”

We approached this by first building up a style guide and adding components. Mediacurrent made it easy with their Drupal 8  theme generator. After installing the theme generator, we used it to create our new theme and style guide. Then we added a simple component (eyebrow), a more complex component (social media icons), and finally an advanced component (speaker) which pulled the previous two components.

Next we created a template library for speakers. This library allows us to add CSS and JavaScript for our components to pages in Drupal 8.

With the speaker library built, we integrated it into our Drupal site by first creating a content type or in this case a paragraph type attached to an existing content type with matching fields as in our component. Then using Kint and Twig debugging, we identified variables and corresponding Twig templates for our speaker component. After building out the Twig templates, the components could access the Drupal data, and display speakers using the components.

More resources:

Building Components: Breaking it down by Mario Hernandez

BEM, Block, Element, Modifier naming convention by Robin Rendle

Theming Drupal 8

The second day of BADCamp I attended the Theming Drupal 8 training delivered by Amber Matz and Joe Shindelar from Drupalize.Me.

Drupal 8 subtheme

In this training we leveraged the Drupalize.me demo theme to create a Drupal 8 subtheme from an existing base theme such as Stable or Classy. Then, we incorporated Bootstrap as an asset library, and touched on topics such as regions, and .info.yml and .library.yml files. Next, we turned our focus to how to use theme hook suggestions to create Twig template files and how to use Twig debugging.

Render arrays and the Twig templating language

Once we had our subtheme we extended it with the power of render arrays (think {{ content }} ) and the Twig template language including:

Printing variables:

<div class="name">{{ current_user.name }}</div>

Finding variable to print:

{{ dump() }}
{{ dump(variable_name) }}

Loops:

{% for item in items %}
<li> {{ item.content }} </li>
{% endfor %}

Logical expressions:

<div class="xyz">
{% if xyz.status == ‘ok’ %}
  xyz ok
{% elseif xyz.status == ‘bad’ %}
  xyz bad
{% else %}
  Status is {{ xyz.status }}
{% endif %}
</div>

Filters:

<p>{{ "Hello World" | upper }}</p>

.theme file

Finally, we looked at the .theme file. We looked at how to use and add theme hook suggestions for further customizations:

hook_theme_suggestions_alter()
hook_theme_suggestions_HOOK_alter()

And, how to add more logic to the theme through the theme preprocessing hook:

function THEMENAME _preprocess_HOOK (&$variables)

This included adding, changing, and using the variables in the $variables array and the Twig templates.

More resources:

Twig Documentation

Twig Templating series

Theme Guide on drupal.org

Twig Home

Thanks!

My thanks to all the folks involved in developing and presenting these trainings. Both trainings will help me as I delve into Drupal 8. I'm eagerly awaiting trainings at next year's BADCamp!

Categories: 

Add new comment

By submitting this form, you accept the Mollom privacy policy.