Responsive Web Design, the Basics

Responsive Web Design and Clown Shoes

In a nutshell, making a responsive website just requires the use of Media Queries. With additional CSS to overwrite default styles, you can create fully mobile friendly websites.

What are Media Queries?

You can think of Media Queries as a test to check for a true or false result. Depending on a number of factors, one being the browser window width, you can add additional CSS properties to overwrite the default styles that would better suit your design in any given width.

For example, in the following code, you’re testing to see if the browser window is below 600px and if it is, apply CSS properties within the brackets.

@media screen and (max-width:600px){
   /* YOUR STYLES HERE */
}

Here’s my video detailing how to use Media Queries to create responsive websites.

Filed under: CSS3

Vertically Centering Text, With Flexbox

Vertically Centering Text

A very common challenge for website designers is creating effective vertical alignment with text, especially with responsive website design. In the past, before Flexbox was around, you’d have to use tables or clever absolute positioning, both of which weren’t very good solutions.

Flexbox

Nowadays however, vertically aligning text is quite simple, thanks to Flexbox. If you have never worked with Flexbox before, it’s simpler than you think. Definitely check out my Flexbox tutorial and get up to speed quick.

Vertically Aligning Text

HTML

Let’s first start out by creating the basic HTML tags we’ll need. Be sure to include a container for the title, as we will need to utilize that with Flexbox and absolute positioning.

<div class="box">
  
  <img src="http://placehold.it/500x500">
  
  <div class="title">
    <h1>Title</h1>    
  </div>  
  
</div>

CSS

Now that we have all the required HTML tags, we can begin integrating Flexbox styling.

* img{
  max-width:100%;
  height:auto;
}

img{
  display:block;
}

.box{
  background:blue;
  max-width:500px;
  text-align:center;  
  position:relative;
}

.title{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  
  display:flex;
  flex-direction:column;
  justify-content:center;
}

Live Example

See the Pen Vertically Centered Text with Flexbox by Richard (@barkins) on CodePen.

Wrap Up

Just keep in mind how Flexbox works with the parent child relationship. With that understanding, you’ll be able to easily create dynamic layouts, especially for responsive websites.

Filed under: CSS3Tagged with:

CSS3 Transition Reference

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
  • transition-property: define what property, or properties, you want to apply a transition effect to. (padding, color, all, etc.)
  • transition-duration: define the duration of a transition.
  • transition-timing-function: define a function┬áthat specifies the transition’s animation speed
    • Ease: transition effect with a slow start, then fast, then end slow
    • Linear: transition effect with the same speed from start to end
    • Ease-in: transition effect with a slow start
    • East-out: transition effect with a slow end
    • Ease-in-out: Specifies a transition effect with a slow start and end
  • transition-delay: define a length of time to delay the start of a transition
Filed under: CSS3Tagged with: ,

Flexbox Responsive Dropdown Menu, No JavaScript

With Flexbox, it’s relatively simple to quickly create a fully responsive menu without JavaScript. This example includes a one level drop down menu as well.

See the Pen Flexbox Menu by Richard (@barkins) on CodePen.

Step 1: HTML

Here’s a the simple HTML code with an unordered list. Although this can be done without using a UL, it’s more effective to use it when you have a dropdown menu. Otherwise, it’s safe to omit it.

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="sub-menu"><a href="#">About</a>
      
      <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Bio</a></li>
      </ul>
    
    </li>    
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav><!--/menu-->

I tried to omit any unnecessary custom classes, however I did need to include one with the drop down LI tag.

Step 2: CSS

Here’s where the Flexbox action comes into play. Start by selecting the UL and add display:flex to it.

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

In order to have the menu take the full space of its container, I needed to include a width:25% on the LIs. Initially I wanted to use flex-grow:1 instead, however I ran into some wonky width issues when hovering over the dropdown menu. Just be sure to change the percentage width based on how many top level menu items you have.

.menu ul li {
  width: 25%;
}

For the dropdown menu, you’ll first want to hide that UL inside the LI tag.

.menu ul li > ul {
  display: none;
  flex-direction: column;
}

Then when hovering over the LI menu item with a dropdown inside of it, apply display:flex to it.

.menu ul li:hover > ul {
  display: flex;
}

Step 3: Complete CSS

Here’s all the CSS for your reference.

.menu {
  font-family: sans-serif;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.menu ul li {
  width: 25%;
}
@media (max-width: 40em) {
  .menu ul li {
    width: 100%;
  }
}
.menu ul li > ul {
  display: none;
  flex-direction: column;
}
.menu ul li > ul li {
  width: 100%;
}
.menu ul li:hover > ul {
  display: flex;
}
.menu a {
  text-transform: uppercase;
  display: block;
  background: blue;
  padding: 15px;
  color: white;
  text-decoration: none;
  text-align: center;
}
.menu a:hover {
  background: lightBlue;
  color: blue;
}
.menu .sub-menu li > a {
  background: lightBlue;
  color: blue;
}
.menu .sub-menu > a:after {
  content: "+";
  padding-left: 5px;
}
Filed under: CSS3, HTML5Tagged with: