Improved Tutorials
Blog postWe're introducing a new way of presenting educational material on our site that allows for more flexibility in the types of content we include and how we present it. Read more to find out about our new tutorials and what you can expect to see as we begin rolling out our Drupal 8 content.
In this tutorial, I'll show you a few ways we can create a basic API by exposing data from our Drupal site.
The methods I'll use include:
- Views Datasource
- Custom code
- Services
Self-check question: In what situations would you consider using each of these approaches?
Additional resources
In this tutorial, I'll introduce the API Blueprint specification and take a look at a few tools we can use to provide documentation and testing for our API.
The tools we'll look at include:
By the end of the tutorial you'll have a better understanding of the API Blueprint specification and be able to use Dredd and Aglio to ensure your API documentation and testing stay up-to-date.
Self-check question: Could you write a script that could be run after every commit that would keep your documentation up-to-date, and provide API test results?
Additional resources
This tutorial teaches you everything you need to know about using the tutorials on Drupalize.Me.
This brief video demonstrates how to use the embedded video feature within a tutorial on our site.
Additional resources
Join the Hour of Code - December 7-13
Blog postThe Hour of Code (https://hourofcode.com) is coming up again soon during December 7-13. What is this, you ask? It is an event that provides a one-hour introduction to computer science to people around the world.
Drupal 8.0.0 Released
Blog postIt's finally here! Drupal 8.0.0 was just released, and our team is busy producing new tutorials.
In this tutorial, I will explain what a base, or parent, theme is in Drupal and why it can be advantageous to use it in theming. We'll take a look at what is commonly provided by a base theme, including discussing what a "starter kit" is and how it is intended to be used.
Additional resources
Zen is a base, or parent, theme for Drupal that features lean, semantic HTML5 markup and a starter kit for custom theme development. In this tutorial, we will install Zen and create a subtheme for custom theme development using Drush. I use the Drush command provided by Zen because of all of the tedious renaming required when cloning the "STARTERKIT" into a subtheme. The Drush command provided by Zen automates this and makes it a relatively painless process. If you need to install Drush, see our related video tutorial, Installing Drush with Composer, or read the instructions for installation on the Drush web site.
In the next tutorial, I'll briefly explain why you might want to use a base theme and when it makes the most sense to do so. After that, I will walk through and highlight some of the HTML5 semantic markup in Zen's template files, contrasting the markup with the corresponding template files in the core Drupal 7 theme, Bartik.
Other tutorials in the Markup in Drupal series also use a subtheme of Zen, called zendemo, as a theme for the demo site. This was done to demonstrate how markup is first and foremost affected by the theme. It was also done to show how using a base theme that uses semantic HTML5 markup can be advantageous if you want to use HTML5 elements in the built-out components and pages of your Drupal site.
To follow along, download the latest version of Drupal 7, and follow the instructions in the video for installing Zen and a creating a subtheme.
In the downloads section below you'll find a database and files downloads, which is the state of the site after this tutorial, with Zen and the subtheme "zendemo" installed.
Additional resources
In this tutorial, I will take you on a tour of some of the template files included with Zen and highlight how HTML5 semantic markup was incorporated into the markup of several different template files.
Additional resources
Zen — Drupal.org
Zen documentation — Drupal.org
HTML5 Developer Guide — MDN
This is a review what I covered in the previous tutorials in this series about Zen, including how to use Zen as a base or parent theme, why you might use a base theme in theme development, how HTML5 markup is included in Zen's template files, and how to install Zen and create a subtheme for your own custom development.
Additional resources
Now let’s take a look at how we can configure fields to use semantic markup using the Fences module. In this tutorial, we’ll install and enable Fences module using Drush. Then we’ll take a look at the configuration settings for the module. Next we’ll hop into the field settings form for the body field and select an HTML5 tag as a new markup wrapper. Finally, we’ll take a look at how Fences field settings configuration carries over to Views and how we can override Fences markup in Views' field settings.
Additional resources
This next set of tutorials relates to controlling markup in Drupal when using the Views module. We’ll cover:
- What affects markup in Views
- Selecting an appropriate Views display format as a starting point for markup output
- Customizing field markup
- Customizing wrapper selectors and CSS classes
- Accessing theming information in Views
- Overriding Views template files
Additional resources
One thing that affects markup in Views is the format that is using for the display. In this tutorial we'll take a look, step-by-step, at the Unformatted list format in Views. We'll examine its default markup, how to add custom CSS classes—and to which elements—and what it looks like to remove all of Views' default markup.
Additional resources
Continuing our look at how Views' formats affect your markup, in this tutorial we'll take a look, step-by-step, at the HTML list format in Views. We'll examine its default markup and how to add custom CSS classes to various elements.
Additional resources
As we continue to look at how Views formats affect markup, we'll now examine the Table format in Views. We'll take a look at its default markup, how to add custom CSS classes to various elements and explore other settings unique to this format.
Additional resources
We've examined the Views formats and row style formatting. Now I'll walk you through the default field wrapper markup in Views. We'll inspect the default markup for fields, remove the default field wrapper markup and I'll point out some of the implications of this action, and then I'll apply a different Views format, so that you can see how the field wrapper markup is impacted by that configuration change. This will give you a better understanding of how markup is affected at the field-level in the context of a view.
Additional resources
Now that we’re familiar with the default field wrapper markup in Views, let’s explore how to customize this markup. In this tutorial, I will introduce to you a prototype of recent posts that was built using Pattern Lab. We’ll inspect the wrapper markup of two template files that compose this media list. After getting familiar with the prototype markup, we’ll apply that markup, step-by-step, to the fields in our view of recent posts. In doing so, we will use the custom field markup settings for each field and utilize rewrite results and replacement tokens to customize our markup output even further.
Additional resources
In the next few tutorials, we'll pull back the veil of Views theming a bit and introduce some tools to help you wrangle Views' template files. In this tutorial, I'll introduce you to Views Theme Information and how to use this interface to find out which template files are being used to mark up your view.
Additional resources
In this tutorial, we'll download the Theme Developer module and use it to inspect our view when it is using view modes for display instead of fields. We'll also look at how Theme Developer interacts with Views and some of the "gotchas" that can occur when using these modules together.
Additional resources
Theme Developer — Drupal.org
Devel — Drupal.org
simplehtmldom API — Drupal.org