Submitted by Chris Shattuck on Tue, 2016-06-14 08:30
Happy summer to you. If you have kids in your life - at least in the States - then summer is a magical time where schedules potentially become less complicated and school-age kids have several weeks to discover what they miss about school. If you have young ones, (like I do) consider the opportunity at hand and how few summers might have left to share with them.
For those of you sans-kids, then please enjoy this season as you would any other (you and all your free time!).
This week I'm rolling out another batch of Front End Development videos. We cover some fun CSS stuff, like how z-index layering works, how to to create a beautiful curved drop shadow under any element, and when it makes sense to use a max-width breakpoint instead of min-width.
Browser developer tools have many useful and awe-inspiring features, and the device simulator in Chrome's DevTools is one of those. Here we begin a short walk-through of the simulator's features, starting with how to simulate specific devices like iPhones or Android phones. This is pretty cool stuff, and it gets even better in the following videos.
By default, a mobile browser assumes that a website was built for larger screens, and it zooms out to fit the whole site. However, with the "viewport" tag, we can tell mobile browser that we support whatever size they are, making our site usable without zooming or horizontal scrolling.
We haven't gotten to the performance section of this video series yet, but since we're looking at the device simulator's interface, it makes sense to point out a feature where we can adjust the simulated internet speed so we can test how our site might work on slower connections.
In the last videos we saw how we can use Chrome's DevTools to simulate various devices, and here we demonstrate one additional feature, which is seeing which breakpoints are coming into play with particular viewport sizes. This is really nice if your CSS style changes are subtle and hard to pinpoint.
Even though we've explained the benefits of coding our CSS mobile-first, meaning adding breakpoints with "min-width" instead of "max-width", there are still situations where using "max-width" makes sense. Here we explain one such scenario.
Just like we've done as we've added breakpoints for other sections of our layout, we're starting with "max-width" breakpoints, and then converting them to "min-width." Here we do the same thing for our slideshow CSS.
Our template is looking really good, and we're at a point where we can give the template as a whole a final look-through to find any stray styling that we might have missed. We test out a few different viewport sizes and find a bit of margin to adjust, but almost everything else looks great.
Throughout this templating process, you may have become aware that there are layers to content. Each element is kind of its own layer, and later layers will overlay earlier layers. However, we can override the default layering of content with the "z-index" property, and we demonstrate how this works here.
The "z-index" CSS property is super useful, but in complex templates with modals and overlays, you may find that the z-index number you're using gets out of hand, and maybe even starts to exceed the browser's ability to support it. In cases like this, it makes sense to create distinct z-index layers, which is a lot easier through SASS variables.
After discovering that the "z-index" property wasn't going to help us with our selectize dropdown menu, we look for other answers and turn up a property that will give us what we need to fix the layering issue.
Congratulations! We've completed the layout of our template, and that's something to celebrate for sure. However, we haven't looked at our site in other browsers for a while, so after we party for a moment, we come back to reality and start the process of opening and reviewing our template in multiple browsers to see if anything is off.