February 2016


Hey friends!

This week I'm releasing another batch of 20 videos in the "Front End Development" collection. In these, we walk through multiple approaches to vertically aligning content - something that ends up being ridiculously tricky to do consistently - and also customizing the look of Flexslider, one of the most commonly used components for creating responsive slideshows.

Enjoy!


How the CSS 'flex' display, or 'Flexbox', works New!
(This one's FREE!)

Screenshot for How the CSS \

In an ideal world, CSS would give us a sure-fire way to align our content vertically without having to bash our heads against a wall. In this video we explain the 'Flexbox' spec, which - among other things - gives us the ability to do just that, and how you can learn more about it.

How to use Flexbox to vertically align a block element New!

Screenshot for How to use Flexbox to vertically align a block element

Here we apply the Flexbox model to our slideshow content and sit back, pleased at the easy with which we were able to accomplish this task.

Why using Flexbox doesn't make sense for every project New!

Screenshot for Why using Flexbox doesn

In this video we explain that while Flexbox is pretty much ideal in terms of the freedom and flexibility it gives us, it's not ideal when it comes to browser support, and there's no JavaScript polyfill out there that will help us get what we need. So for this project, we have to abandon this simple solution and dig around a bit more for something that works.

Why we can't vertically align compound elements with the 'vertical-align' property New!

Screenshot for Why we can

Having let go of the idea of the promise of Flexbox, we look into some other options for vertical alignment, starting with the deceptively named 'vertical-align' property. Ultimately, this won't work for what we need, but we get some insight into why.

Why vertically aligning with 'line-height' doesn't work for multi-line elements New!

Screenshot for Why vertically aligning with \

In previous vertically aligned elements, we've used the 'line-height' property. In this case, however, that's not going to work. Onward!

How HTML tables work and why they were once used for layout New!

Screenshot for How HTML tables work and why they were once used for layout

We've sure made it a long way in this series without discussing tables. In this video we talk through the basic HTML table syntax, and explain why table cells have historically been a go-to solution for challenging layout issues.

How to make any element work like a table cell with CSS New!

Screenshot for How to make any element work like a table cell with CSS

With modern CSS, we can make any element behave like any other element. Here we look at using the 'table-cell' display value to attempt yet another go at getting vertical alignment to work.

Using the absolute positioning and negative margin solution for vertically aligning an element New!

Screenshot for Using the absolute positioning and negative margin solution for vertically aligning an element

In this video we continue exploring various solutions to issue of vertically aligning an element. This one uses position and margin, and works well for a single group of elements, but not as great for multiple slides in a sider.

How to use a CSS transform to vertically align an element New!
(This one's FREE!)

Screenshot for How to use a CSS transform to vertically align an element

After working through number vertical alignment solutions, we've finally come to the one that's most ideal for our situation. In this video we use a CSS 'transform' to position the element halfway down its container. Nice.

Reviewing browser support for CSS transforms New!

Screenshot for Reviewing browser support for CSS transforms

As with most of the newer CSS properties, it's good to check out browser support before we standardize on a solution that uses them. In this video we hop over to caniuse.com to see how we're doing for support of the 'transform' property. Spoiler: Prospects look good.


Hey-o!

We have some fun videos out this week, including several on styling sliders and one on how the 'position' CSS property works - a tool that many of use use regularly but haven't taken the time to really suss out. We also walk through what some of the new modules in Drupal 8 are for.

Enjoy!


What the "Core (Experimental)" section is for and how Inline Form Errors works New!
(This one's FREE!)

Screenshot for What the 'Core (Experimental)' section is for and how Inline Form Errors works

In Drupal 8 there is a new group of experimental modules that are being worked into Drupal core but still have known bugs or an unstable API. Here we talk about these modules and what one of the experimental modules is for.

What the Migrate and Migrate Drupal modules are for New!

Screenshot for What the Migrate and Migrate Drupal modules are for

The fact that the Migrate module ships with Drupal 8 is a huge win for those who might be looking to upgrade their Drupal 6 and Drupal 7 sites. In this video we explain what both the Migrate and Migrate Drupal modules are for and hopefully get you excited enough to give them a shot. Later on in this series we'll be demonstrating how these work in detail.

How the Datetime, Link and Telephone modules work New!

Screenshot for How the Datetime, Link and Telephone modules work

Formerly contributed modules, the Datetime, Link and Telephone modules supply HTML5 native fields that also get some robust server-side validation right in Drupal 8 core.

What the "Web Services" modules are for New!

Screenshot for What the 'Web Services' modules are for

Here we explain briefly what the "Web Services" group of modules is for and why you might still end up using the contributed Services module if you need to build a robust API for your project.

Comparing the "Site information" and "Cron" admin pages in Drupal 8 and Drupal 7 New!

Screenshot for Comparing the 'Site information' and 'Cron' admin pages in Drupal 8 and Drupal 7

For the most part, the "Site information" and "Cron" configuration pages are the same, but in this video we work through the minor changes.

Merging our "slide" and "slideshow" components and refactoring our classes New!

Screenshot for Merging our 'slide' and 'slideshow' components and refactoring our classes

Earlier in this series we created a "slide" component to house some CSS that didn't belong anywhere else. Now that we've created the "slideshow" component, it's looking like the slide CSS actually belongs in there. In this video we merge two components - something that you will likely find yourself doing again.

How we will approach styling our circular, bordered images New!

Screenshot for How we will approach styling our circular, bordered images

Here we summarize the styles that we'll need to get a nice circular image.

Why we're using a background image for our circular images, and building out the basic CSS New!

Screenshot for Why we're using a background image for our circular images, and building out the basic CSS

In this video we start the process of coding the circular author images that we'll use in our "snippet" component. We also explain the accessibility implications of using a background image for an author image and how we'll address problems with it later in this series.

How to style a circular image with a border and drop shadow New!

Screenshot for How to style a circular image with a border and drop shadow

Here we build on the previous video and add some rounded corners, a border and a nice drop shadow to our author image.

Adding our second image, and moving our snippet HTML to the right place New!

Screenshot for Adding our second image, and moving our snippet HTML to the right place

For completeness sake, we add our second snippet image and move the whole HTML chunk to the component where it will live out it's HTML-y life. Is this starting to feel like a real web site yet?

Reviewing what functionality we need for our slideshow sliders New!

Screenshot for Reviewing what functionality we need for our slideshow sliders

Our mockup doesn't move, but we can tell a lot about the implied functionality in our slideshows just by doing a bit of detective work. In this video we review the mockup and figure out what our requirements are going to be for our slideshows and what makes each slider unique.

Overview of the "Flexslider" feature set and review of examples New!

Screenshot for Overview of the 'Flexslider' feature set and review of examples

We're going to use the "Flexslider" JavaScript library to generate our slideshows, and here we review the examples on the Flexslider site to get a sense of the feature set available to us and to appreciate just how much the library does for us.

How to install Flexslider and add a working example New!
(This one's FREE!)

Screenshot for How to install Flexslider and add a working example

In this video we use Bower to download Flexslider and then get a simple example working in our template. Along the way, we run into an issue with Bower's search functionality not working, and find a workaround using the name of the Github project and the command line.

How to connect Flexslider to existing HTML to convert it to a slider New!

Screenshot for How to connect Flexslider to existing HTML to convert it to a slider

The example that we copied over worked great, and here we re-connect the slider with our own content.

Tracking down why the Flexslider navigation does not appear over the slider New!

Screenshot for Tracking down why the Flexslider navigation does not appear over the slider

After we attach Flexslider to our slideshow, we are able to see it working, but the navigation for the slideshow is in a totally unrelated place on the page. Here we start a drill-down to figure out what's going on.

How the relative, absolute, static and fixed CSS "position" values work for element layout New!
(This one's FREE!)

Screenshot for How the relative, absolute, static and fixed CSS 'position' values work for element layout

As we alluded to in the previous video, the problem with our Flexslider navigation not being positioned properly had to do with the default value of the CSS "position" attribute on our elements. In this video we explore what is often a confounding but absolutely critical CSS property for layout, and how the different values work in relation to one another.

Why adding left padding to slides in our slideshow container doesn't work New!

Screenshot for Why adding left padding to slides in our slideshow container doesn't work

In this video we take a stab at getting the content in our slideshow to visually match the mockup. The first order of business is adding some padding to the left, and for very good reasons we try adding the padding to the slides instead of the slideshow container. By doing this, we witness first hand the difficulty in modifying the CSS of third-party libraries, and move on to another possible solution.

Solving our slideshow left padding issue by applying padding to the slideshow container New!

Screenshot for Solving our slideshow left padding issue by applying padding to the slideshow container

Here we manage to find a solution to our left padding issue by adding the styles to the slideshow container instead of the individual elements. By doing this we lose some flexibility, but it works and that's all we need right now.

Setting the width of our slideshow slides New!

Screenshot for Setting the width of our slideshow slides

Having set the left padding, the next style to add to our slideshow is the width of the content. Here we do just that.

A discussion of options for vertically aligning our slideshow content New!

Screenshot for A discussion of options for vertically aligning our slideshow content

We've had to vertically align numerous elements so far in this series, and in this video we discuss the how the possibilities we're familiar with might help us with the current task of vertically aligning our slides.


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.