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!
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.
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.
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!)
Here we hide the Flexslider previous and next navigation on smaller browser windows where the icons become more of an eyesore and less useful.
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!)
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!)
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.
In this video we think about how the overall header should behave as the viewport gets smaller.
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.
Now that we have our header scaffolding, we're ready to start positioning the logo, search nav and account icon.
After adjusting our header top CSS in the browser, we bring the styles into our SASS stylesheets to make them permanent.
Here we look at how we want the various elements in the header top to react to changes in the viewport size.
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.
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.
Earlier we foreshadowed the possible need to remove some padding in our header bottom, and lo and behold, it has come to pass!
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.
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.
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!)
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.