A simple guide to responsive design.

Overview

Grid is a great learning tool but no longer supported. Learn why.

Grid

A simple guide to responsive design.
www.adamkaplan.me/grid

Why bother with responsive?

We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.

A Fragmented World

As of 2013, there are thousands of different devices and screen sizes that browse the internet, so it's impossible to design layouts to target them all. Instead, we must take a more fluid approach to design.

Mobile First

The term “mobile first” gets thrown around a lot lately. What it really means is to start with mobile styles and layer on styles optimized for larger screens only as needed. In other words, your mobile styles become the default and you no longer have to override them later. It’s much simpler!

By assuming a flexible but simple layout by default, you can better guard against browsers—with viewports wide and small—that aren’t quite capable of the full responsive layout. So when we’re talking about layout, “mobile first” really means “progressive enhancement.” —Ethan Marcotte

Min-width Media Queries

Introduce layout-specific rules only when you need them. Use min-width to layer complexity on your layout as the viewport widens. It’s easier to have all the media queries nearby, rather than at the end of the stylesheet or in a separate document.

/* Small screens (default) */
html { font-size: 100%; }

/* Medium screens (640px) */
@media (min-width: 40rem) {
  html { font-size: 112%; }
}

/* Large screens (1024px) */
@media (min-width: 64rem) {
  html { font-size: 120%; }
}

Steps

1. Not All Browsers are Created Equal

Browsers will render your CSS differently. To avoid this, it’s a good idea to use a modern alternative to a reset like Normalize.css, which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.

<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/grid.css">

2. Add the Viewport Meta Tag

Place in the <head> of your HTML. This enables use of media queries for cross-device layouts.

<meta name="viewport" content="width=device-width, initial-scale=1">

3. Use box-sizing: border-box

Place at the top of your CSS file. The * will target all elements on the page.

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

4. Create a Container

A container holds all elements and controls the page's maximum width. Using a container will make designing for responsive easier!

.container {
  margin: 0 auto;
  max-width: 48rem;
  width: 90%;
}
<div class="container">
  <!-- Your Content -->
</div>

5. Create a Column

With mobile first, columns are block level (takes up the full width available) by default. No additional styles needed!

<div class="container">
  <div class="column">
    <!-- Your Content -->
  </div>
</div>

6. Create Column Sizes

On larger screens, columns gain float: left in order to stack content horizontally. Columns now use padding for gutters, so you no longer need to worry about removing margins.

<div class="container">
  <div class="row">
    <div class="column half">
      <!-- Your Content -->
    </div>
    <div class="column half">
      <!-- Your Content -->
    </div>
  </div>
</div>
@media (min-width: 40rem) {
  .column {
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 50%; }
  .column.third { width: 33.3%; }
  .column.fourth { width: 25%; }
  .column.flow-opposite { float: right; }
}

7. Create Rows

Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise know as clearing issues. Rows are cleared using the popular clearfix, which was created by Nicolas Gallagher.

<div class="container">
  <div class="row clearfix">
    <div class="column half">
      <!-- Your Content -->
    </div>
    <div class="column half">
      <!-- Your Content -->
    </div>
  </div>

  <div class="row clearfix">
    <div class="column half">
      <!-- Your Content -->
    </div>
    <div class="column half">
      <!-- Your Content -->
    </div>
  </div>
</div>
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

Flow Opposite

Add the class .flow-opposite to columns where you want content to display first on mobile but appear on the right on larger screens.

<div class="container">
  <div class="row clearfix">
    <div class="column half flow-opposite">
      <!-- Your Content -->
    </div>
    <div class="column half">
      <!-- Your Content -->
    </div>
  </div>
</div>
@media (min-width: 40rem) {
  .column.flow-opposite { float: right; }
}

Further Reading

References

Translations

Translations are maintained by their creators and may not always be up to date with the original here. Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical.

Comments
  • Work around a font size flicker bug Safari

    Work around a font size flicker bug Safari

    When the font-size is defined on html instead of body, Safari 7 flickers the font size back and forth when resizing around each font-size change.

    Easy workaround is to change the font-size on body instead. I did not look into why this happens because other browsers don't do this, so it just seems like a bug in Safari 7.

    Video: http://youtu.be/_36K18JheP4

    Steps to reproduce

    • Visit http://samhuri.net/f/grid-bug.html in Safari 7 on a Mac
    • Resize your browser window enough to cross a size boundary, 40rem or 64rem

    You can check out http://samhuri.net to see the fix applied.

    bug 
    opened by samsonjs 4
  • Adaptation to GRID

    Adaptation to GRID

    Hi Adam!

    First, I would to congratulate you about the GRID tutorial! This is amazing! Thank you so much!

    I want to adapt it to evangelize Jade and Stylus...

    You allow me to do it? And in a second moment, I want to translate that material too.

    Thanks in advance!

    opened by ericdouglas 3
  • Use first-of-type instead of first-child

    Use first-of-type instead of first-child

    Should really use first-of-type selector on the first .column instead of first-child. The former is safer. For eg., if there's another element before the first column that is not a column, it will not get themargin-left: 0` property.

    opened by tnguyen14 3
  • resize issue on Safari 8.02 OSX

    resize issue on Safari 8.02 OSX

    I am planning on using your grid for responsive site and I have noticed that when I resize the window in Safari 8.02 there is a flickering of the formatting. It occurs from 640px to 755px then stabilizes and begins again at 1150px to 1240px. I've tried to do some troubleshooting but I've been unable to remedy it. It does not happen with Firefox or Chrome.

    Any input you have would be very much appreciated. Thanks for putting together the tutorial to jumpstart responsive design.

    --- I isolated the issue. It seemed to be related to the use of percentages to calculate the fonts @media (min-width: 40rem) { html { font-size: 112%; } }

    @media (min-width: 64rem) { html { font-size: 120%; } } When I removed this bid of code the problem disappeared.

    opened by christophercomis 2
  • Archive of the old version?

    Archive of the old version?

    Hi, I'm all about mobile first... but for my purposes (mostly teaching others who aren't too familiar with html/css yet) I found the older version (non-mobile-first) to be a bit cleaer. Do you by any chance have the old version of the site archived somewhere (including the linked assets and images)? I can get the old version of the html and css file via this github repo, but it doesn't contain the images etc. (and I couldn't find them available at the linked addresses either).

    Thanks for all the great work you're doing here. I think the mobile first site is great too, and possibly better for your target audience -- just liked the old one too :)

    opened by jordanlev 2
  • clearfix not being used in markup?

    clearfix not being used in markup?

    Hi, This is a really fantastic incredible wonderful explanation. Will be very useful when teaching to students. Thank you!

    I see that you mention that clearfix needs to be applied to rows, but in the markup the clearfix class is not there... is this an oversight or am I not understanding how it all works?

    opened by jordanlev 2
  • Bug? not sure

    Bug? not sure

    The grid was simple and easy to start with mobile first approach but doesn't seems to be working from screen tablet 600px to below iphone. The whole grid looks single on starting from screen-size of 600px and below.

    But in real world situation we want our site to look uniform and responsive at-least to the screen size of tablet. If i am wrong, let me know the best way to do this.

    opened by Randore 1
  • Clearfix is considered unsemantic.

    Clearfix is considered unsemantic.

    Hi there!

    Using clear or clearfix as float containment rule name is not really todays best practice. http://colinaarts.com/articles/float-containment/ http://css-tricks.com/snippets/css/clear-fix/ "group" class name is nicer and more semantic (via Dan Cederholm). Content property doesn't even need the space, can be empty string (via Nicolas Gallagher). Without any text, font-size is un-needed (Chris Coyier).

    Besides, you could actually implement the clearfix in the .grid Maybe take a look on this example https://github.com/MartinMuzatko/WebKick/blob/framework/css/layout.css

    Please let me know if this is either accurate or not.

    opened by MartinMuzatko 1
  • Consider removing the overflow hidden for clearing floats

    Consider removing the overflow hidden for clearing floats

    Using .row { overflow: hidden; } in the grid system will partially hide elements that need to stand out of the containers such as custom tooltips or dropdowns (basically elements that need absolute positioning within relative to elements inside the container). Since .clearfix is doing exactly the same thing without the drawback metioned, I think the overflow: hidden could be removed.

    example

    opened by filipewl 1
  • Add IE8 polyfills

    Add IE8 polyfills

    I know that supporting IE8 is not the most popular activity, but doing so in this case comes at very little cost: since the js links are inside a conditional comment, they will not get loaded by non-IE8 browsers, and since I linked to a CDN there is no need to place any additional files on your server.

    opened by jordanlev 1
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
Releases(v1.0.0)
Owner
Adam Kaplan
Product Designer at Zapier
Adam Kaplan
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups

PatternFly Design Kit The PatternFly Design Kit is a collection of Sketch assets that make it easy for designers to create high-fidelity design mockup

PatternFly 44 Jan 2, 2023
A simple guide to HTML elements

?? HEAD A simple guide to HTML <head> elements Table of Contents Recommended Minimum Elements Meta Link Icons Social Facebook Open Graph Twitter Card

Josh Buchea 29.5k Jan 1, 2023
JavaScript Style Guide

Airbnb JavaScript Style Guide() { A mostly reasonable approach to JavaScript Note: this guide assumes you are using Babel, and requires that you use b

Airbnb 130.5k Jan 4, 2023
Mostly adequate guide to FP (in javascript)

About this book This is a book on the functional paradigm in general. We'll use the world's most popular functional programming language: JavaScript.

null 22.3k Jan 3, 2023
📚 Study guide and introduction to the modern front end stack.

Grab Front End Guide Credits: Illustration by @yangheng This guide has been cross-posted on Free Code Camp. Grab is Southeast Asia (SEA)'s leading tra

Grab 14.7k Jan 3, 2023
:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 🌹

TypeScript Deep Dive I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack

Basarat Ali Syed 18.7k Jan 4, 2023
Frontend tech guide and collection of highly recommended materials

Frontend Learning Kit Frontend tech guide and collection of highly recommended materials Show your support by giving a ⭐ to this repo 2022 Frontend De

Sadanand Akshay Pai 2.9k Jan 7, 2023
Dev Guide for Archival Node & Indexer Setup

Algorand - The Undocumented Docs Dev Notes for Archival Node, Indexer Setup (and more) Archival Node FAQ [ ? ] How much space will I need? See -> http

null 5 May 23, 2022
A learning guide for JavaScript programmers.

Table of Contents Awesome JavaScript 专题列表 基础 开发准备 推荐的书 源代码阅读 敏捷方法与工具 JavaScript ES6 Node.js 图书 最佳实践 风格指南 常用的Node Web框架 常用NPM工具模块 开发工具和库 Future Awesome

Sun 785 Dec 26, 2022
A kickstarter guide to writing ES6

ES6 for Humans ?? The complete guide is now available on Amazon Table of Contents let, const and block scoping Arrow Functions Default Function Parame

Deepak Grover 6.3k Jan 4, 2023
A website that acts as a guide about the universities to potential students whole throughout the globe.

A website that acts as a guide about the universities to potential students whole throughout the globe.

null 1 Apr 15, 2022
Vercel's engineering style guide

The Vercel Style Guide This repository is the home of Vercel's style guide, which includes configs for popular linting and styling tools. The followin

Vercel 409 Jan 6, 2023
Solidity Quickstart is an extensive solidity guide for the solidity newbies out there.

?? Solidity Quickstart Solidity Quickstart is an extensive solidity guide for the solidity newbies out there. ?? How does it work? All the guides rela

Kira 8 Aug 6, 2022
AirBnb Javascript Style Guide'ının Türkçe diline çevrildiği repository

Airbnb JavaScript Stil Kılavuzu() { JavaScript'e büyük ölçüde mantıklı/makul bir yaklaşım Not: Bu kılavuz sizin Babel kullandığınızı varsayar ve babel

Gökhan Kandemir 71 Dec 29, 2022
A guide that teach you build a custom version of chromium on macOS/Windows/Linux that supporting hardware/software HEVC decoding.

enable-chromium-hevc-hardware-decoding A guide that teach you build a custom version of chromium on macOS/Windows/Linux that supports hardware/softwar

Sta Zhu 778 Jan 1, 2023
A Typescript companion to the book A Common-Sense Guide to Data Structures and Algorithms by Jay Wengrow

This repository aims to be a companion to the book A Common-Sense Guide to Data Structures and Algorithms by Jay Wengrow. I rewrote most of the data s

Alexandre Lim 29 Dec 3, 2022
A guide for your daily "professional" interactions (not really)

How to professionally say A guide for your daily professional interactions. A simple static website for common phrases we might want to say to your co

Akash Rajpurohit 979 Dec 14, 2022