How to create a media query to swap background images based on the browser width New!
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!
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!)
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!
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!
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!
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!
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!
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!
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!)
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!
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!)
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!
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!
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!
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!
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!)
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!
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!
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!
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.
