diff --git a/public/data/css.json b/public/data/css.json
index b6659f66..98b40f47 100644
--- a/public/data/css.json
+++ b/public/data/css.json
@@ -67,6 +67,53 @@
         ],
         "tags": ["css", "reset", "browser", "layout"],
         "author": "AmeerMoustafa"
+      },
+      {
+        "title": "Responsive Design",
+        "description": "The different responsive breakpoints.",
+        "code": [
+          "/* Phone */",
+          ".element {",
+          "  margin: 0 10%",
+          "}",
+          "",
+          "/* Tablet */",
+          "@media (min-width: 640px) {",
+          "  .element {",
+          "    margin: 0 20%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop base */",
+          "@media (min-width: 768px) {",
+          "  .element {",
+          "    margin: 0 30%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop large */",
+          "@media (min-width: 1024px) {",
+          "  .element {",
+          "    margin: 0 40%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop extra large */",
+          "@media (min-width: 1280px) {",
+          "  .element {",
+          "    margin: 0 60%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop bige */",
+          "@media (min-width: 1536px) {",
+          "  .element {",
+          "    margin: 0 80%",
+          "  }",
+          "}"
+        ],
+        "tags": ["css", "responsive"],
+        "author": "kruimol"
       }
     ]
   },