A while back there was a code newbie chat discussing the concept of mobile first.

A number of people responded that mobile first development was just a fad, or a buzzword. However, I disagreed. You see, mobile first development is operating on the assumption that anything that works on your phone will also work on your computer. The other way around?

The concept of responsive design is based on this observation. When you're implementing a design for a site and supporting various screen sizes, think first about how it will look on the smallest screen. Make that the default! Then adjust for larger screens as you get more real estate. That way, you are styling for the always case and actively optimizing for those small screens.

Styling for Mobile

Let's take my site as an example. I have a navigation bar with an h1 tag in it. I've styled other h1 elements on my page to have a margin at the bottom, but in this case that will put spaces in my vertical navigation that I don't want!

I also want this specific h1 in my navigation to have a more bolded font weight. So let's add those things.

#header h1 {
  font-weight: 900;
  margin-bottom: 0;
}

I don't need to do anything else to make this look appealing on my phone. And it still works on other sized devices, awesome!

Tablets as a Standard Size

Well, on second thought, the h1 looks ok but it's kind of weird to have a vertical nav bar on my tablet and not make use of the horizontal space available to me. So I want to change the look of the page when the screen size is just a bit bigger.

This is where media queries come in. Media queries can scope any section of styles to a particular screen size, which is incredibly powerful. However, because we're defaulting everything to our smallest screen, we actually want this media query to only be in effect for screens larger than a particular size.

@media (min-width: 600px) {
  #header nav ul li {
    display: block;
  }
}

Keep in mind that the particular pixel size we're working with is generic tablet size. There are multiple "recommended" breakpoints for these things.

Once More with JavaScript!

Sorry for those who don't get this joke.

So that looks better. We now have our typical horizontal navigation. However, that's not the only way to do this. Responsive design can also be implemented using JavaScript.

skel.init({
    reset: 'full',
    breakpoints: {
        global: { range: '*', href: '/css/style.css'},
        narrow: { range: '-980', href: '/css/style-narrow.css'}
    }
})

Note that global styles are always in place.

We're still using CSS to promote different styles, but instead of media queries, we have JavaScript code that triggers based on screen size and uses the appropriate stylesheet.

Wow! My Desktop Screen Is Huge!

Ok, you've made it to the land of expansive green fields and endless possibilities! Who knew a laptop screen would feel so luxurious. It's at this point that you might start looking at showing more items in a row in your grid. Or maybe you want to display something horizontally that was vertical before. More framing? It's up to you! The world is your oyster!

@media (min-width: 775px) {
  #header h1 {
    margin-left: 5em;
    margin-bottom: 1em;
  }
}

We can go crazy and add that margin back. We have room now!

That grid we've been showing one element of at a time? Psh, that's a thing of the past. Three at a time baby!

@media (min-width: 775px) {
 #speakwrap {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-areas: 'conference';
    grid-gap: 10px;
    padding: 1em;
  }
}

I'm kidding a bit. But it really is nice to have so much flexibility when you get to this point. And in reality, it's easier to scale something up from your most limiting point than to attempt to scale back.

If you're looking for more content like this, check out:
The Layers of JS...Styles Remix
The Layers of CSS
The Layers of Javascript