May 2016

I hope you stateside viewers had a thoughtful and relaxing Memorial Day. For the rest of you, I hope your week started out solid.

This week heralds another batch of Front End Development videos. Some of you are like 'come on, MORE FED videos?! When is this collection going to be done?! I want some D8!' I understand. We're getting there. This series is going to set a solid foundation to refer to when we get to D8 theming, I promise.

This week we tighten up our slideshow controls, embark on our header and begin ordering our content in the way we see it in the mockups. Fun stuff!

Here we apply a breakpoint to our carousel to have it stretch across the entire browser window whenever the browser gets small enough. This results in some strange behavior with our next and previous buttons, so we'll end up hiding them in an upcoming video.

When we added a breakpoint to the contact form, we noticed that the labels on our radio buttons could look a bit wonky if they get split into multiple lines. Here we correct that by using the "whitespace" CSS property and setting it to "nowrap," a nice tool to have in your CSS tool belt.

Throughout this series, we've been able to focus on each of the components of our site independently, meaning it didn't matter where exactly it appeared in our template. We're getting to the point now, however, where we're finalizing our overall layout and getting the full site matching the mockup. So, we spend a couple minutes reordering the content on our site to set us up for touching up our styles.

Our top header functions fairly well already as we reduce the size of the browser, but visually it could use some touching up. Here we adjust the CSS of the header in the browser until we get something that looks good.

With touch screens, it's easy to accidentally tap the wrong button or input if they're positioned to close to one another. Here we take a couple of seconds to point out that we can add some padding to items to help alleviate that issue.

Last week was the US-based DrupalCon, and I hope that those of you who went had a great time. New Orleans is a fascinating city, and one of my favorite places in the world.

I had a lot of really interesting conversations throughout the week, with a couple common refrains. First, was the need for in-depth Drupal 8 training, and a particular desire for the BuildAModule style of learning. Okay, guys, I'm on it. You gave me a good idea of what the most pressing needs are and I am already working on meeting those.

Second was the disappointment from many government, education and large company customers that Acquia was going to stop bundling BuildAModule with their network memberships next month. "What?" many of you will say. "That was a thing?" Indeed it was, and Acquia's willingness to include BuildAModule meant that many institutions with a drawn out, painful purchasing process had direct access to BuildAModule's training with minimal logistics.

I don't know the full strategy behind Acquia's decision to stop including third party video training with their subscription service, but you have to admit that it makes sense. Acquia has had a mature line of services for a while now, and being able to integrate these services with self-delivered training has the potential to be a big win. Seeing as I work hard to remain vendor-neutral, there's not much I could have done to help with that.

Acquia also recently released a free video training program called Acquia Academy. If any single company has the resources to pull off thorough, free Drupal video training, it's Acquia. From a purely marketing perspective, I don't think it would make much sense for them to also include paid video training unless it was an up-sell from the Academy.

For the record, Acquia did a great job of managing the transition of dropping BuildAModule from their offering. They were gracious and thoughtful, and I have no complaints.

However, what this means is that if organizations that previously used BuildAModule through Acquia want to continue to use BuildAModule, they will have to establish a direct relationship with us. That means more logistics, but I would like to do everything I can to make that transition easier.

First of all, as many Acquia subscribers already know, I'm offering 4 months free to institutions making the transition to give some wiggle-room for purchasing cycles and paperwork. To claim this, just visit the move page and follow the instructions there.

For the second part, I need your help. At DrupalCon I learned that one government group was unable to purchase BuildAModule because we aren't on the right vendor lists. I've learned a lot about how universities and governments work over the years, but I still have some gaps. If you have any interest in getting BuildAModule for your team, please help me help you by telling me what you need from BuildAModule to make that happen.

I talked with several people who independently mentioned that there was a lot of positive energy at DrupalCon this year, more than in the last couple years. I had the same experience. DrupalCon is a place where people get to talk about what they actually think about Drupal and how it affects their lives. There's both hype and disillusionment, but there's also honest assessment and re-positioning of the role that Drupal has in the web technology ecosystem. People seem to feel freer to admit that Drupal has become only one tool in their tool belt, albeit an extremely useful one in for solving a a broad set of problems.

Hey, thanks for listening. I hope you have a great week, and I'll do my best to have the same.

Cheers!

PS: New videos down below! This week we're jostling grids of content around in a responsive way and throwing in a couple of Drupal 8 videos on translation (spoiler: it's a lot more fun in Drupal 8 than it was in 7).

A mockup is a frozen snapshot, and because of this there are a few things we have to figure out for ourselves, especially if we don't have a mockup of the site at smaller sizes. One is what we do at the edges of the browser window as the browser expands and contracts. Does the padding stay fixed while the content adjusts, or does the padding expand and contract? Here we look at our mockup, review our options, and pick a course of action.

There are a few different ways we can apply the same layout styles to multiple elements, like we need to do with our stacked hero sections. Here we discuss how we can use a wrapper element, a class, or a SASS placeholder to get the job done.

Having reviewed our options, we decide that using a SASS placeholder is best for applying our layout styles to whatever broad elements need them. In this video, we build up that placeholder style, add a breakpoint, and then apply it in our "qualities" section to give it a test run.

Here we adjust the margin between our icon-box items so that they fit on larger viewports, and then we work out the details of where the breakpoint should be when we want the 4-across grid to bump down to 2-across.

As we've worked through our styling of the "qualities" section, something happened to throw our margins off. No problem, this kind of thing happens all the time when you're working with CSS. In this video we fix the issue and move on.

We've seen the "max-width" and "min-width" properties in our breakpoints, but there's also a CSS property we can use that almost functions as a media query shorthand. Here we demonstrate how we can use the "max-width" CSS property to respond to changes in the viewport without adding any additional breakpoints.

The techniques we just used to lay out multiple elements in a flexible grid can be used for other situations where you need to adjust the number of items displaying horizontally. Here we just take a minute to let you know.

In this video we move on to adjust our carousel slideshow that displays our article snippets so that it functions well in smaller browser windows. We adjust the CSS and demonstrate how we can sometimes get what we need by hiding superfluous content with "display:none."

Earlier in this series, we used Chrome to edit our SASS files directly, but that ability broke when we started using Compass to generate our CSS. In this video we configure our Compass project to generate CSS source maps, and reconnect our browser files back to the source so we can edit them directly in the browser.

As we scroll down our site, you may notice that somewhere along the lines we ended up with some strange whitespace hidden to the side. If you do a flick-scroll, like you might on a mobile browser, it results in unnecessary horizontal scrolling. Here we get to the bottom of where this extra space is coming from and get it fixed.

Once we get the horizontal scrolling issue pinned to the adjustments we made to the Flexslider styles and fix it, we now have a small margin around the slideshow. Here we dig in, figure out that it's a white border posing as margin, and we extract it.

In this video we walk through the process of importing a language into Drupal 7, enabling it and switching to using it by adjusting the URL. In Drupal 8 we also enable a language, but because of the improvements to multilingual support in 8, it's a much quicker, easier and less error prone process.

It looks like there might be an issue playing videos in this browser. We're working on better cross-brower experience, but in the meantime please try the latest Chrome or Firefox browsers. Or, you may be able to watch the video directly without progress tracking or transcript: