20 New Drupal 8 and Front End Development Videos


Happy Tuesday!

This week we're releasing 20 new videos, 10 from the "Front End Development" collection and another 10 in "Upgrading to Drupal 8." In these we get to explore media queries and breakpoints and how many of the core modules in Drupal have changed from Drupal 7 to Drupal 8.

For those of you who are making the leap to Drupal 8, keep up the good work and I will continue to add new videos to help you get your bearings.

Thanks!


How to create a media query to swap background images based on the browser width New!

Screenshot for How to create a media query to swap background images based on the browser width

Here we demonstrate how to switch which image gets used for the background of an element based on the width of the browser. Swapping CSS based on browser size is likely the most common use you'll find for media queries as a front end developer.

How to swap images with a media query based on screen resolution New!

Screenshot for How to swap images with a media query based on screen resolution

While we ultimately won't check the screen pixel density in our media queries, it's important to understand how to do it for possible future CSS adjustments.

How to use "min-width" to set multiple breakpoints in your CSS based on browser width New!
(This one's FREE!)

Screenshot for How to use 'min-width' to set multiple breakpoints in your CSS based on browser width

Earlier we set a media query using the "max-width" condition. There are definitely uses for "max-width," but we'll discover multiple reasons to use "min-width" instead as we move through this series. In this video we set up a series of media queries to serve up different background images based on the growing width of the browser window.

How the SASS "breakpoint" extension works, and troubleshooting installation New!

Screenshot for How the SASS 'breakpoint' extension works, and troubleshooting installation

As we take a gander at our series of media queries, it becomes apparent that they're pretty inefficient. In each one we're having to duplicate the selector that we want to modify. Wouldn't it be better if we could reverse the structure, and add media queries within the selector? Well sure, and the "breakpoint" SASS extension will help us do that. As we go through the installation process, we run into a couple of issues with dependencies, so we take care of those as well.

How to install Compass New!

Screenshot for How to install Compass

We've gone quite a ways through this series without needing Compass, and if you're crafty you could keep moving forward without it. However, in order to use the "breakpoint" SASS extension, we're going to need Compass first, and so in this video we work through that process.

Encouragement for when you run into dependency issues with Ruby, node.js or Compass New!

Screenshot for Encouragement for when you run into dependency issues with Ruby, node.js or Compass

Chances are that at some point in this series, you will run into issues that we haven't covered explicitly. Most likely, these will happen on the command line as you attempt to install one of the components we use, and often you won't know what to do about it at first. In this video I explain how I ran into an issue installing Compass and how I overcame it. Along the way I try to distill the principles for overcoming this kind of "dependency hell" and offer encouragement. This stuff really is useful, and it pays off to figure out how to get it installed, even if it takes a long time.

How to set up a Compass project New!

Screenshot for How to set up a Compass project

Now that we've installed Compass, we have one more step before we can use it. In this video we create a SASS project and set up some of the basic variables in our config.rb file.

How to set up the breakpoint extension with Compass and use it to simplify our SASS New!

Screenshot for How to set up the breakpoint extension with Compass and use it to simplify our SASS

Having installed Compass, we're now ready to use the breakpoint extension. Here we get it set up in our Compass configuration file and see first-hand how nice it is to bring some sanity to our media queries.

Summary of why the "breakpoint" SASS extension is so useful New!

Screenshot for Summary of why the 'breakpoint' SASS extension is so useful

In this short and sweet video, we remind ourselves why we wanted to start using the breakpoint SASS extension in the first place.

Summary of how many projects set up their media query breakpoints New!
(This one's FREE!)

Screenshot for Summary of how many projects set up their media query breakpoints

When we added our media queries to swap out our slideshow background image, we build our queries to roughly match the size of the images. Most projects, however, standardize on a handful of breakpoints and uses those to swap out images and other CSS. Here we briefly explain how this works.

Changes to the Actions, Trigger, Tracker, Automated Cron, Ban and Blog modules New!

Screenshot for Changes to the Actions, Trigger, Tracker, Automated Cron, Ban and Blog modules

From here we're going to work our way down the modules page and review each module that has moved, had a name change, be removed or added. That will eliminate a huge number of surprises as you work through the process of upgrading your own workflow to match Drupal 8.

How the Breakpoint and Responsive Image modules work in Drupal 8 and how to view breakpoints in the UI New!
(This one's FREE!)

Screenshot for How the Breakpoint and Responsive Image modules work in Drupal 8 and how to view breakpoints in the UI

Both the Breakpoint and Responsive Image modules offer significant front end tools to developers. Breakpoints are difficult to centralize across the back and front ends, but the Breakpoint modules supplies an API to connect the two. Responsive Images are also deceptively tricky and the interface for managing them is intuitive and thoughtful. Here we walk through the basics of each and show how you can review global breakpoints supplies by modules and themes through the Responsive Image module.

Changes to CKEditor, Configuration Manager, Custom Block and Dashboard on the module page New!

Screenshot for Changes to CKEditor, Configuration Manager, Custom Block and Dashboard on the module page

The Dashboard module is gone in Drupal 8, but there's a number of concessionary modules that have been added to reduce the hurt.

Changes to File, Image and List on the modules listing page New!

Screenshot for Changes to File, Image and List on the modules listing page

Spoiler alert: The File and Image modules have been re-grouped under the "Fields" section, and the List module has been merged with the "Options" module.

How multilingual modules have been adjusted on the modules listing page in Drupal 8 New!

Screenshot for How multilingual modules have been adjusted on the modules listing page in Drupal 8

Later on in this series we'll demonstrate the workflow for translating the interface and content in both Drupal 7 and Drupal 8, but in this video we simply talk through how the modules from Drupal 7 have been adjusted and re-named in 8.

Why the Open ID and Overlay modules were removed in Drupal 8 New!

Screenshot for Why the Open ID and Overlay modules were removed in Drupal 8

There may not be many tears shed over the removal of Open ID and Overlay, but just in case you're curious why they disappeared Drupal 8, we spend a minute explaining their departure.

Why the PHP Filter module was removed in Drupal 8 New!
(This one's FREE!)

Screenshot for Why the PHP Filter module was removed in Drupal 8

Most developers will rejoice at the news that the PHP Filter module has been removed from Drupal core. It means fewer maintenance issues, easier migrations and a much lower risk of security holes spontaneously opening up. If you're one of those that will miss it - and I'm with you there - there's still a contributed module to give us the same feature.

Why the Poll module was removed and what the Responsive Images and Text Editor modules do New!

Screenshot for Why the Poll module was removed and what the Responsive Images and Text Editor modules do

In this video we explain why the Poll module is no longer in Drupal core and briefly explain what the Responsive Image and the Text Editor modules are for.

Demonstration of how the Tour module can provide contextual step-by-step help in overlays New!

Screenshot for Demonstration of how the Tour module can provide contextual step-by-step help in overlays

Drupal 8 includes a much more robust contextual help tool called "Tour." Tour is a Drupal implementation of the Joyride library, and it provides an API for modules and themes to offer inline, step-by-step help that points out areas of the interface and gives an explanation of what each area is for. It's super cool, and here we give Tour a tour.

The difference between the Views and Views UI modules in Drupal 8 New!

Screenshot for The difference between the Views and Views UI modules in Drupal 8

You may have already gleaned this from your previous work with Drupal 7, but here we briefly explain why Views is split into two modules.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.