Submitted by Chris Shattuck on Tue, 2016-05-31 07:30
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.