May 2016

Happy Tuesday!

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!

Have an excellent rest of the week, friends!

Fixing horizontal scrolling issue created by our "snippet" carousel New!

Fixing horizontal scrolling issue created by our "snippet" carousel

As we make our browser window smaller, we see that the snippet carousel is also causing a little bit of horizontal scrolling. In this video we explore possible solutions to the problem.

Adjusting our carousel to stretch across smaller browser windows New!

Adjusting our carousel to stretch across smaller browser windows

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.

Converting our carousel's "max-width" breakpoints to "min-width" New!

Converting our carousel's "max-width" breakpoints to "min-width"

As we've done before, we started by coding our CSS with a desktop in mind, but here we convert the CSS to a "mobile-first" approach by swapping our "max-width" media queries with "min-width."

How to hide Flexslider navigation in smaller browser windows New! (This one's FREE!)

How to hide Flexslider navigation in smaller browser windows

Here we hide the Flexslider previous and next navigation on smaller browser windows where the icons become more of an eyesore and less useful.

Adjusting the styles of our alt hero section title to be responsive New!

Adjusting the styles of our alt hero section title to be responsive

Our carousel slideshow is looking pretty good, but we notice an issue in the title of the hero section that contains it that we tackle before moving on.

Adjusting the contact form CSS to be responsive New! (This one's FREE!)

Adjusting the contact form CSS to be responsive

In this video we move onto our contact form and see that with a simple adjustment in a single breakpoint, we can make the entire form responsive.

How to use the CSS "whitespace" property to prevent text from wrapping to another line New! (This one's FREE!)

How to use the CSS "whitespace" property to prevent text from wrapping to another line

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.

Re-ordering the content in our template to match the mockup New!

Re-ordering the content in our template to match the mockup

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.

Discussion of how we plan to adjust the header for different viewport sizes New!

Discussion of how we plan to adjust the header for different viewport sizes

In this video we think about how the overall header should behave as the viewport gets smaller.

Adding the HTML and CSS scaffolding for our top header section New!

Adding the HTML and CSS scaffolding for our top header section

Before we can add meaningful CSS, we need some HTML scaffolding and some CSS classes to pin our styles on. Here we build those out and get ready to add some styles.

Positioning our top header elements in the browser New!

Positioning our top header elements in the browser

Now that we have our header scaffolding, we're ready to start positioning the logo, search nav and account icon.

Moving our top header CSS from the browser into our stylesheets New!

Moving our top header CSS from the browser into our stylesheets

After adjusting our header top CSS in the browser, we bring the styles into our SASS stylesheets to make them permanent.

How we want our top header to behave as the browser gets smaller New!

How we want our top header to behave as the browser gets smaller

Here we look at how we want the various elements in the header top to react to changes in the viewport size.

Adjusting our header bottom to stretch across the entire browser and center its content New!

Adjusting our header bottom to stretch across the entire browser and center its content

In this video we modify the styles of our header bottom to stretch across the browser, and along the way we adjust the styling of our overall header to accommodate this.

Aligning the elements in the header bottom and adding a border New!

Aligning the elements in the header bottom and adding a border

Here we adjust the positioning of the elements in the header bottom and add a nice, clean border to the top to separate it from the top heading.

Removing extra padding from the header bottom section New!

Removing extra padding from the header bottom section

Earlier we foreshadowed the possible need to remove some padding in our header bottom, and lo and behold, it has come to pass!

Adding responsiveness to our top header by adjusting CSS in the browser New!

Adding responsiveness to our top header by adjusting CSS in the browser

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.

Moving our responsive header CSS from the browser to our SASS files New!

Moving our responsive header CSS from the browser to our SASS files

Having gotten a set of CSS modifications that make our header look a bit better on smaller browser windows, we commit those changes over to our SASS.

Adding a breakpoint to stretch the logo the full browser width on small screens New!

Adding a breakpoint to stretch the logo the full browser width on small screens

One final thing to do in the header top is get the logo to fit the screen when we bump the browser down below the last breakpoint we set. In this video we do just that.

Why it's important to add extra padding for touch screens New! (This one's FREE!)

Why it's important to add extra padding for touch screens

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.

Hello friends!

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).

Adjusting the margins within and around our icon box New!

Adjusting the margins within and around our icon box

Here we get the margins between the text elements in our icon box working, and then adjust the margin on the outside of the box to accommodate the re-positioned circle icon.

Aligning the icon boxes to the center and adding margin between them New!

Aligning the icon boxes to the center and adding margin between them

In this video we continue to refine the layout of our icon boxes by aligning them to the center of the browser and giving them a little space.

What we want our icon boxes to look like as the browser gets smaller New!

What we want our icon boxes to look like as the browser gets smaller

Here we spend a few seconds thinking about how we want our icon boxes to behave as the browser gets smaller.

How to figure out how the site's padding and overall layout should work from a mockup New!

How to figure out how the site's padding and overall layout should work from a mockup

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.

Adding the overall layout CSS to our "qualities" section New!

Adding the overall layout CSS to our "qualities" section

Now that we know what we want to do with our layout, we build up the CSS in the browser until we get something functional.

Options for applying site layout styles to multiple elements New! (This one's FREE!)

Options for applying site layout styles to multiple elements

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.

Setting up a SASS placeholder for full-browser layout styling with breakpoints New!

 Setting up a SASS placeholder for full-browser layout styling with breakpoints

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.

Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be New!

Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be

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.

Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2 New!

Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2

Now that we know the width of our breakpoint, we just need to figure out where it goes. Here we add the breakpoint to our SASS.

Fixing the margin between the "qualities" title and the icon boxes New!

Fixing the margin between the "qualities" title and the icon boxes

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.

How the "max-width" CSS property works New! (This one's FREE!)

How the "max-width" CSS property works

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.

Adjusting our icon box margin one last time New!

Adjusting our icon box margin one last time

Are you kidding? More margin woes? Again, we adjust the margin for our icon boxes and get it squared away once and for all.

How you can use these layout strategies for any grid of elements New!

How you can use these layout strategies for any grid of elements

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.

How to adjust a Flexslider carousel to work at different breakpoints New!

How to adjust a Flexslider carousel to work at different breakpoints

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."

Making our responsive carousel CSS permanent New!

Making our responsive carousel CSS permanent

In the last video we worked through the CSS changes we needed to get our Flexslider carousel to adapt to smaller screens, and here we start to move those styles over to our SASS files.

Adding a breakpoint to change the position of our carousel navigation on small screens New!

Adding a breakpoint to change the position of our carousel navigation on small screens

Here we work on adapting our carousel snippet content to even smaller screens by repositioning the navigation back over the content.

How to generate CSS source maps in Compass, and reconnecting the source files in Chrome New!

How to generate CSS source maps in Compass, and reconnecting the source files in Chrome

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.

Adding a breakpoint to hide superfluous snippet content on smaller screens New!

Adding a breakpoint to hide superfluous snippet content on smaller screens

On the smallest screens our carousel slideshow content is still a little too big. Here we add another breakpoint to hide some of the content that's not absolutely necessary so our slideshow fits.

How to fix unexplained white space that forces horizontal scrolling New!

How to fix unexplained white space that forces horizontal scrolling

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.

How to remove the white border around the Flexslider slideshow New!

How to remove the white border around the Flexslider slideshow

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.

How to import a language and translate the interface in Drupal 7 and Drupal 8 New! (This one's FREE!)

How to import a language and translate the interface in Drupal 7 and Drupal 8

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.

How to translate content in Drupal 7 and Drupal 8 New! (This one's FREE!)

How to translate content in Drupal 7 and Drupal 8

Here we demonstrate the difference in workflows and output when translating content in Drupal 7 and Drupal 8. Spoiler alert: Drupal 8 is way more powerful and intuitive.

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.