Create a Flexbox Sticky Footer in Four Steps

Step 1: Write the HTML

See the Pen Make a Sticky Footer With Flexbox: Step 2 by Float Nine (@floatnine) on CodePen.

This is pretty simple. We have a <header>, <main>, and <footer> tag, with a <textarea> tag in the main section so when we’re done we can see how the page works when we expand it.

Step 2: Add color and dimension

See the Pen Make a Sticky Footer With Flexbox: Step 2 by Float Nine (@floatnine) on CodePen.

We do a couple straightforward things in step 2. First we add a background color to each of the three main elements. Second, we give the header and footer a minimum height so when we apply the flexbox they will stay static (Once display:flex is applied in step 3, min-height can be replaced with flex-basis).

Step 3: Add the flexiness

See the Pen Make a Sticky Footer With Flexbox: Step 3 by Float Nine (@floatnine) on CodePen.

Step 3 is crucial because here we apply display:flex to the body element, which we will see will give the footer its sticky appearance in step 3. We’ve also set the flex-flow to column, because the header, main, and footer sections need to be stacked on top of each other in a single column.

Finally, we’ve added some styling to the textarea element to make things look more like an actual webpage.

Step 4: Add flex-grow to the  main section

Finally, we give the body and html elements a 100% height, and set main to flex-grow:1. Setting main to flex-grow:1 means that the body container (the flexbox) will expand to at least the height of the viewport on load. Giving main a setting of flex-grow:1 means that it will expand to fill the middle section of the container that the fixed height header and footer don’t. In tandem, this will mean that the direct children of the body tag (the header, main, and footer sections) will always fill at least the height of the viewport, and will expand as needed.

See the Pen Make a Sticky Footer With Flexbox: Step 4 by Float Nine (@floatnine) on CodePen.

The way we see if the sticky footer works is to expand the textarea in the main section. Click and drag it around to see the final effect in action.

Make a CSS Dropdown Menu in Five Steps

Step 1: Create the HTML

If you think about it, a menu is nothing more than a list of hyperlinks, so an unordered list with anchor tags works perfectly. Here we’ve created a list with three main items, the last one containing three sub-items:

See the Pen Make a Dropdown Menu in Five Steps – Step 1 by Float Nine (@floatnine) on CodePen.

Step 2: Make the top-level menu flexible

This step involves setting the top level ul element to display: flex, and giving it’s children, the top level li’s, a flex-grow of 1, so they expand to the full width of the viewport. Now we have a horizontally oriented, responsive, and flexible menu. To make the flex-box layout look correct, we’ve also removed the default margin and padding from the ul and li elements, and we’ve removed the bullet points from the list items:

See the Pen Make a Dropdown Menu in Five Steps – Step 2 by Float Nine (@floatnine) on CodePen.

Step 3: Add color and dimension

Before we add the dropdown functionality, we need to give the menu some style. There are a number of small steps here, but they all relate to each other, so I think its easiest to keep them together. See the /*Step 3*/ code in the code window to follow along:

Color: The top list items have been given a background color of dimgray, with a margin-right of 2px to distinguish them. The secondary list items have been colored dodgerblue and tomato, with top margins of 2px. In addition, the color of the anchor tags has been changed to white and the anchors have been given some basic style.

Dimension: Each anchor tag has been given a padding of 1em, and set to display: block to show the padding. In addition, we’ve given the submenu’s ul tag (containing Item 3-1 through 3-3), a width of 100% and set it to position: absolute, which along with it’s parent li element set to position: relative, will allow it to flexibly stretch along with its parent, Item 3 (for more information on absolute relative positioning, see this article) .

See the Pen Make a Dropdown Menu in Five Steps – Step 3 by Float Nine (@floatnine) on CodePen.

Step 4: Add the dropdown effect

This step is relatively simple, but it deserves its own step, as it is where we give the menu its namesake functionality. We do this with only two declarations. First we give the submenu’s ul tag a display of none as default. Then we give it a display of block when its parent li element (i.e. Item 3) is hovered over.

See the Pen Make a Dropdown Menu in Five Steps – Step 4 by Float Nine (@floatnine) on CodePen.

Step 5: Add additional hover effects on the list items

To give the menu more of an interactive feel, the final step is to add hover effects to each of the list items. To do this I assigned rgba functions to the hover states of each item, with an opacity value of .7 (70% opaque). Again, the three declarations (one for each color) are at the top of the code window for visibility:

See the Pen Make a Dropdown Menu in Five Steps – Step 5 by Float Nine (@floatnine) on CodePen.

And that’s it. Hopefully this demystifies the process of creating a dropdown menu. You can use these principles to add as many menu items and effects as you want.

Top Five Automagical CSS Features

A lot of articles have been written about cool CSS features, but not all of them can be described as “automagical.” Here’s dictionary.com’s definition of the term, edited a little bit for clarity:

[a process] (especially in relation to the operation of a computer process) [that is executed] in a way that seems ingenious, inexplicable, or magical.

So in other words, “automagical” is that which makes the complex appear simple, often in a dazzling way. So without further ado, here are the top five automagical features in CSS, as I see them:

5. Animation and Transition

See the Pen Top Ten Auto-Magic CSS Features: Part 9 by Float Nine (@floatnine) on CodePen.

See how the star hovers up and down as suspended in air? That’s CSS animation at work. Now hover over it with your mouse. See how it spins? That’s a CSS transition. Transition and animation are very similar, the main differences being you can trigger transitions on user input (like mouse hover), while animations occurs on page load and can be fine tuned a bit more. They also work in tandem with each other, to create ever more automagical effects.

4. Linear and Radial Background Gradients

See the Pen Top Ten Auto-Magic CSS Features: Part 2 by Float Nine (@floatnine) on CodePen.

Linear and radial gradients let you design and create really cool background effects with just a few lines of code. You can make your gradients as simple or complex as you want by using multiple colors, repeated patterns, blending colors or creating hard color stops, and stacking gradients on top of images or even other gradients to create complex effects. There is a ton of creative potential with gradients, and the fact that they function like background images means that they don’t interfere at all with the rest of your layout.

3. :nth-child Expressions

See the Pen Top Ten Auto-Magic CSS Features: Part 5 by Float Nine (@floatnine) on CodePen.

Take a look at the list items above. Each has a different color, yet no classes or ids have been assigned to the elements. That’s because the :nth-child pseudo-selector is being used to target specific elements in the list. For example, li:child(5) selects the fifth list item, while li:child(even) selects every evenly numbered one.

The really automagical part of :nth-child expressions though is found in the use of expressions, which are short algebraic phrases that the browser interprets when the page is rendered. “n” here is an algebraic variable that starts at zero and counts up in increments of 1. For an example, here’s how we calculate the expression 3n + 4 (aka li:nth-child(3n + 4):

For even more automagical effects, use negative factors of n to count up the list of items instead of down. Here is how li:nth-child(-1n + 3) is interpreted by the browser:

2. Centering Elements with Flex-Box

If you’re not already using this centering technique, I recommend that you take a couple seconds to learn it here. It will save you a ton of time in the long-run.

For ages, centering items in their parent containers was more difficult than it should have been. We had to rely on hacky solutions like absolute positioning, negative margins, carefully calculated fixed length positioning, and other hacks like “transform: translateY(-50%)”. Then flex-box came along and made centering possible with two declarations:

See the Pen pZVoPR by Float Nine (@floatnine) on CodePen.

When combined, “display: flex” and “margin: auto”  do perfectly what developers have been hacking at for years. What’s even cooler is that this technique is completely responsive, as “margin:auto” item stays centered in flex-box no matter the width or height of the container. Flex-box can do a lot more than this, but this centering technique is an automagical feature that is worth hilighting.

1. Transform

See the Pen Top Ten Auto-Magic CSS Features: Part 8 by Float Nine (@floatnine) on CodePen.

Transform allows you to rotate, skew, and scale elements on your webpage. Combined with transition, you can achieve some really cool effects, like the card flipping demo above. To learn how to create flippable with CSS transform, check out this article.

That’s it for now. Stay tuned for more features and automagical CSS tricks in the future.