Open Drupal Lessons

Here you can find a number of lessons available for teaching Drupal, they all follow a one day workshop style. The lessons themselves provide information, resources and exercises to work through. When delivered by a trainer they should always be supplemented with instruction, discussions, demos etc. The lessons can also be followed by an individual self-learning.

There are some accompanying notes with lessons which can be used as ideas for delivery for trainers.

Project Setup & Intro to the Toolchain

Overview

  • Deciding on a project to work on over the coming workshops, so there is a consistent focus and so you can build something useful and use as evidence.
  • Setting up and making sure we're comfortable with our local development environments, so when we use this environments in the future we know what we're doing.
  • Using the command line & Drush, as they are widely used developer tools and can make you quicker and access more powerful system features.

1) Project Set Up

A. Decide on a project

Think about a project you're interested in creating. Look through the project examples and use these as suggestions for the types of project you could create.

Your project must include the following:

  • It should be focused around content you'll add yourself, and have a section listing this content in some way.
  • It should accept and process user input in some way.
  • It should be something realistic and suitable for Drupal.
  • Any advanced functionality should be documented in a separate part of your plan.
  • The project must be started from scratch, so no distributions or existing websites you've built.

Now, do the following:

  • Do: Write up your project plan and include: a summary of the site, the main pages, key Drupal modules, advanced functionality.
  • Checkpoint: rename your Google Doc to "Full Project Plan" and save it in a folder called "Open Drupal - [name]" replacing [name] with your full name. Now share this folder with the trainer.

B. Local Development Environment Setup

  • Do: Open Drupal VM tutorial, Tutorials->open_drupal_vm.md
  • Now set up a snapshot at your machine's vanilla state.
  • Checkpoint: all have a working local environment and be able to edit our Drupal sites.
  • Group discussion: Q&A on virtual machines and local setup, tips & tricks on local development.

2) Command Line

A. Command Line Basics

B. Test

C. VIM (optional)

  • Do: Open VIM Tutorial.
  • Do: Create a new document and write an outline of how to use the command line.
  • Checkpoint: Save this document in your folder and call it '01_command_line.txt'.

Resources

3) Drush

A. Drush Intro

  • Read: DigitalOcean - A beginners guide to Drush
  • Do: Download a module using Drush, then enable it. Then check your Drupal site for updates and install any
  • Do: Write your own Drush cheatsheet with at least 10 useful commands.
  • Checkpoint: Save your Drush cheatsheet in your folder.

B. Drush Aliases (optional)

Resources

The Toolchain Continued & Site Building

Project Build

A. Start building your site

  • Start building your site by downloading contrib modules you think you'll need, create some content types and add some test content.

Git

A. Git Basics

B. Setup Your Own Git Repo

  • Do: Initalise a new repository with your Drupal project's source code in.
  • Do: Sign up for free repository hosting on GitHub or BitBucket and push your code.
  • Do: Create a new branch, modify your codebase by downloading a new module, merge, add and push the code up.

  • Checkpoint: Share your git repository with your trainer.

C. Git: Shared Repository Setup

  • Group Activity:
    • Nominate one person to create a new git repo with a single text file in called web_dev_gotchas.md. Now share this repo with everyone in the group.
    • Now each member of the group should add in at least three tips or things they've learnt about web development.
    • Try to categorise these tips into sections (e.g 'Git', 'Drupal', 'Frontend').
    • Work on the repository collaboratively. If you encounter a merge conflict, open the file and resolve it using a text editor.
  • Pro tip:
    • Try creating a pull request!

D. Advanced Git (optional)

E. Gitflow (optional)

Resources

Deployment

A. Components of a website

The following components make up a Drupal site:

  1. Codebase
  2. Database
  3. Files

Commonly a website will run on several environments, e.g local, dev, staging and production. We need to make sure we can effectively migrate our website between these environments. These techniques will also be useful for setting up websites locally.

B. Methods of migrating between environments

  1. PhpMyAdmin, Adminer, Backup & Migrate
  2. Git repository for code - how to configure?
  3. Settings.php
  4. Files directory

C. Process

  • Make sure you understand the migration and deployment process
  • Export all of the components of your site.
  • Reset your VM - wiping everything - and re-import your site.

Site Building & Front End Development

Overview

A look into the Drupal contrib module ecosystem, install some useful modules to assist with development and dive deeper into a few powerful modules relevant to your project. Then spend some time going over the frontend development landscape and start building a theme in Drupal, learning about subtheming and getting started with Sass.

After this lesson you should have:

  • A better understanding of contrib modules
  • Configured an advanced module for your site
  • A Drupal subtheme based on a popular base theme
  • Customised your subtheme with a template
  • A custom stylesheet and a understanding of how to implement CSS within Drupal
  • Sass and Compass up and running on your local development environment

1) Modules

A. The Module Ecosystem

B. Standard Development Module Stack

  • Make sure you have the following useful stack of modules and dev tools installed: Views, Admin Menu, Adminimal Administration Menu, Devel, Link, Webform, Backup & Migrate, Diff, Features, Libraries, jQuery Update, Maillog, Masquerade, Module Filter, Fast Permissions Administration, Pathauto, Token.
  • Take a look at the module pages of any modules you haven't heard of and read up on what they do.

  • Hint: drush dl views admin_menu adminimal_admin_menu devel link webform backup_migrate diff features libraries jquery_update maillog masquerade module_filter fpa pathauto token

C. Selecting & Configuring Advanced Modules

  • Do: Which modules are relevant to your site? Take some time to pick a few, some popular modules you might want to consider include: Views, Date, Display Suite, Context, Panels, CKEditor, Media, File Entity.
  • Do: Drill down into one or two module and read up on their documentation. Views, Display Suite and Panels are very powerful modules and worth spending the time to understand in more depth.

Views

  • Do: configure Views, Display Suite & Date for your site to show a list of date based content (e.g blog posts, events) which can be filtered by a URL string using contextual filters. Try creating a navigation block showing a summary of these dates. (Hint: take a look at the 'archive' default view).

  • @todo - Add resources & instructions for advanced configuration of Views, DS & Panels.

2) Front End Development

A. Overview

B. Drupal Theming

A. Types of Themes

  • Research: Find out what the differences between a 'base theme', 'sub theme' and 'starter-kit' are in Drupal. What components does a sub theme inherit from a base theme?
  • Hint: Here's a good discussion on drupal.org.

B. Evaluating Themes

C. Working with Themes

Two of the most popular base themes for major custom Drupal projects are Zen and Omega version 4.x - decide one to install and create a sub theme from:

Zen

Omega

Note: Omega 4.x is fairly complex and can be challenging for beginners, it is however very powerful.

Other Themes

Some other base themes worth considering:

C. Front End Tools

  • Getting tooled up, other front end technologies you might need to know about (Grunt, Gulp, Sass etc).
  • Grunt / Gulp / Ruby / any other technologies required
  • Building things the right way - look through documentation, keep things clean etc.

3) CSS & Sass

A. CSS

CSS is a huge topic in itself. It's vital to understand CSS deeply for effective front end development.

B. Sass & Compass

  • Do: Install Ruby & Sass via the command line.
  • Read: Intro to Sass.
  • Do: Install Compass via the command line.
  • Read: Intro to Compass
  • Do: Navigate to your sub theme and run compass watch to compile your stylesheets.
  • Do: Start theming your site, aim to target one content type at first.

C. Sass Plugins

  • Breakpoint, Singularity, Susy, Zen Grids.

E. CSS Architecture & Standards

  • Read: SMACSS, BEM
  • Do: Write your own mini CSS styleguide, highlighting the most important parts to you. Save this as a .md file within a GitHub repository.

Resources

  • Sass styleguides

F. Gulp & Advanced Sass (Optional)

  • Install Node.js, Gulp & Libsass within your theme
  • Add in browsersync & autoprefixer
  • Look at yo-generator-webapp & Google's web starterkit

Agile Development

@todo - Add in Crispin's notes.

This lesson contains an introduction to the concepts of Agile development. This includes the general theory behind agile teams and the agile lifecycle as well as the more specific methdology of Scrum.

A. An Introduction to Agile & Scrum

  • The agile project lifecycle (Discovery -> Design -> Kick off -> Build -> Test -> Deploy). @todo - Add a resource in here.
  • An intro to Scrum

B. Gathering Requirements

C. Wireframing

  • Do: Create some wireframes of key pages, and attribute user stories to them - if you already have wireframes use these.

D. Kanban & Design in Agile (Optional)

Resources

  • @todo - Add some useful resources for prototyping.

Project Management Systems

Project management systems are essential to any successful project. You'll need to

A. Types of system

  • Trello
  • GitHub issue queue. See mastering issues.
  • JIRA
  • Open Atrium
  • Real life board

  • Sign-up for one of these systems (we recommend Trello) and add all user stories to a 'backlog' section.

  • Use this management system as you proceed to develop your site.

*Checkpoint: Take a screenshot of your PM system, copy into a Google doc (or write a blog post) and explain the process you'll be undertaking.

B. Build a scrum board

  • Using post-it notes build a real life scrum board.

Frontend Development & Theming in Drupal

HTML & Templating

Aims: Be able to write well structured, semantic HTML. Understand Drupal's theme system, override template and theme functions.

A. HTML 5

  • Do: Using the following resources as a references points, write a blog post on a) What is HTML5? b) Why are semantics in HTML important.

Resources:

B. Templates

  • Read: Overview of theme files
  • Read: Drupal 7 Template Suggestions

  • Create a new template override for a custom block which is placed in a sidebar region, add a custom wrapper class and use the relevant HTML5 element.

  • Now, try adding custom template overrides for:

  • A specific region

  • Your site's front page
  • page.tpl.php based on content type

Make sure you update any HTML to use the semantically correct elements.

C. Customising Themes

  • Add a new region to your theme by declaring it in THEMENAME.info and adding it to page.tpl.php

E. Theme Overrides

To override HTML output in Drupal as well as using templates we can also use theme functions. These include preprocess, process and theme functions.

Read the following articles and implement template_preprocess_page() to add a string (e.g "Hello World!") to a page.tpl.php file in your custom theme.

Also try:

  1. Implementing template_preprocess_node to add custom variables for specific content types.
  2. Implement theme_breadcrumb to change the separator between breadcrumb items.
  3. For other ideas see the CEMS base theme's includes folder.

CSS, Sass & Styling Drupal

Aims: Be able to write well structured and consistently formatted CSS. Use the common features of Sass and apply them to a Drupal theme.

A. CSS

Using the following resources as inspiration, come up with your own short CSS guidelines on writing well formatted CSS. Add it as a new project in your public GitHub account.

As a minimum this style guide should show one annotated example of a well written CSS rule and one annotated example of a badly written CSS rule.

B. Sass

Now, extend your CSS guidelines to cover Sass.

C. Styling in Drupal

Start to theme your Drupal site by creating new Sass partial files.

D. BEM, SMACSS & CEMS (Optional)

Resources