Some of the content that's been added to our case study site isn't responding ideally as the viewport size increases and decreases. We have an HTML table that is a bit too flexible, making the columns too narrow for the text inside them to be very readable. The images in our slideshow are presenting us with a problem when the screen size gets too big: the images are scaling up and losing their quality in the process. To address these miscellaneous problems, we'll change how our content is placed, find some new breakpoints, and add new media queries for our grid_6 regions. We'll also learn some CSS tricks that will transform our table data into lists, making it more legible and sensibly presented on smaller screens.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 14-cleaning-up)
Coding Standards in Drupal
CourseTheme Drupal Sites
GuideImage Styles
CourseThis video is about making custom image sizes for automatic display on your site! I am going to show you how you can create custom thumbnail sizes that can be used in your content types.
We already know that being able to set a standard for image display creates consistency and a better user experience. It also makes it for easier site administration because you don’t need to cut all of you images before you upload them. Drupal does all the work for you!! And we can specify the exact site we want to use.
I am assuming that you already know how to update the field display settings in your content type to select an image style preset.
For this tutorial, you need to make sure the Image module that comes with Drupal Core is enabled.
We are going to create an image display that has an aspect ratio of 4”x6”, but much smaller. Then we are going to add a couple other treatments to it so that it fits the theme of Photo Journal.
Patches are used to describe modifications made to one or more code files, and can be used to share those changes.
Standardized documentation is crucial to a project, whether it is just you or an entire team working on it. In this tutorial we're going to look at:
- Standards for
@docblock
comments - Standards for inline comments
- Why standards for documentation and comments are as important as standards for the rest of your code.
By the end of this tutorial you'll know how to add inline documentation for all the PHP code that you write for Drupal.
Formatting standards cover things like the use of whitespace, how to format control structures, and other aspects that affect your code's appearance and format.
In this tutorial we’ll talk specifically about standards regarding formatting. This is by no means an exhaustive list of PHP syntax rules, but rather is focused on formatting standards for Drupal.
By the end of this tutorial you'll know about the most common Drupal code formatting standards as well as where to find more information when questions arise.
Translations have their own special functions in both Drupal 7 and 8, and there are some rules for standardizing how they are used that make things clearer for everyone.
In this tutorial we'll look at:
- When to use, and when not to use, translation utilities to output translatable strings
- How placeholders work in translatable strings
- Tips for creating links inside of translatable strings
By the end of this tutorial you should know when, and how, to make strings in your code translatable using Drupal's translation utility functions.
Once you know what code standards are and why you should use them, you need to learn how to implement Drupal coding standards in your projects. This tutorial will walk through some of the steps you can take to make this as easy as possible. We'll cover:
- Configuring your editor or IDE to warn you of coding standards violations
- Setting up the Coder module and phpcs to scan and review your code
- Performing team code reviews
By the end of this tutorial you should be able to configure your development environment and implement processes in your workflow that help to ensure your code meets Drupal's coding standards guidelines.
Before you dive into using coding standards it makes sense to understand exactly what they are and why they’re important, generally and specifically in the Drupal community. In this tutorial we will look at:
- What coding standards are
- Why following coding standards is a good idea
- Where coding standards come from
By the end of this tutorial you'll have a better understanding of what coding standards are, and why you should be adhering to them when you write code.
Modules are bundles of primarily PHP code that extend Drupal in order to add new features or alter existing functionality.
In this exercise you will demonstrate that you understand the CSS patterns used for smaller elements of Drupal such as fields, and can create selectors which override them appropriately. You will also override template files to create your own markup and suggest new template files.
In this exercise you will demonstrate your ability to attach JavaScript to themes, and use Drupal behaviors to enhance the functionality of a website.
In this exercise you will demonstrate that you understand the concept of responsive CSS and the methods which can be used to implement it in a Drupal theme.
In this exercise you will demonstrate your ability to create a custom theme as a subtheme based on Zen and use Sass.
This exercise will have you demonstrate an understanding of Drupal themes and how to develop CSS to theme the default markup created by Drupal, with particular reference to CSS naming conventions.
Installing Drupal using the instructions in this tutorial will give you a working Drupal site that can be used for learning, or real-world project development.
Before you can work on a Drupal site locally (on your computer), you'll need to set up a local development environment. This includes all the system requirements like PHP and a web server, that Drupal needs in order to run. Our favorite way to accomplish this is using DDEV.
In this tutorial we'll learn:
- How to install and configure DDEV for use with a Drupal project.
- How to use DDEV's integrated Composer to download Drupal and Drush.
- How to install Drupal inside DDEV so you can access the site and start doing development.
By the end of this tutorial, you should be able to set up a local development environment for learning Drupal or working on a new Drupal project.
Goes into depth about some of the JavaScript constructs and tools that Drupal provides when writing JavaScript for Drupal. Topics include using Drupal.behaviors and variable settings.
There where a couple of changes to the Drupal.behaviors system for D7. You can find out more information about the changes here: http://drupal.org/update/modules/6/7#drupal_behaviors
And more general information about using the new system here http://drupal.org/node/756722
Once you've converted from the old Drupal.behaviors.myModule = function(context)
to the new syntax
Drupal.behaviors.myModule = {
attach: function(context, settings),
detach: function(context, settings)
}
The rest is pretty much the same.