{"id":17775,"date":"2013-07-29T13:01:08","date_gmt":"2013-07-29T05:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17775"},"modified":"2025-04-04T01:35:09","modified_gmt":"2025-04-03T17:35:09","slug":"a-look-into-foundation-4-responsive-framework","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/","title":{"rendered":"A look into: Foundation 4 Responsive Framework"},"content":{"rendered":"<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zurb.com\/\">ZURB<\/a> has recently released a new version of their popular responsive framework, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/get.foundation\/\">Foundation<\/a>. In this version, they\u2019ve made some drastic changes, eliminated a few components, and added new features. So, here are a few things that I think is worth noting in this release.<\/p>\n<p>Let\u2019s check them out.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/rwd-tools\/\" class=\"ref-block__link\" title=\"Read More: 50 Useful Responsive Web Design Tools for Web Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">50 Useful Responsive Web Design Tools for Web Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/rwd-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14360 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/rwd-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">50 Useful Responsive Web Design Tools for Web Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn previous, we've explored some top-notch WordPress and Joomla responsive themes for your website. Now, it's time to...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>The Variables<\/h2>\n<p>The most noticeable change when you open the <strong>_settings.scss<\/strong>, where Foundation sets variables for colors, length and other stuff, is the <strong>Variables names<\/strong>. For instance, these are the variables that were used to store website color scheme in Foundation 3:<\/p>\n<pre>\r\n $mainColor: #000;\r\n $secondaryColor: #fff;\r\n $alertColor: #f3f3f3;\r\n $successColor: #ccc;<\/pre>\n<p>In version 4, these variables turn:<\/p>\n<pre>\r\n $primary-color: #000;\r\n $secondary-color: #fff;\r\n $alert-color: #f3f3f3;\r\n $success-color: #ccc;<\/pre>\n<p>If you previously built with Foundation 3, these changes will certainly affect your website more or less. And it is likely that you have to do some significant adjustments to your SCSS stylesheet to reflect the change.<\/p>\n<p>In addition, Foundation also added more variables to <strong>give more flexibility over the website component styles<\/strong>. For instance, Foundation now provides variables to define the body background color, and global rounded corner, which is unavailable in previous versions.<\/p>\n<pre>\r\n $body-bg: #fff;\r\n $global-radius: 3px;\r\n $global-rounded: 1000px;<\/pre>\n<p>So, you probably also need to examine whether you should replace your current style definitions with the variables provided.<\/p>\n<h2>The Grid<\/h2>\n<p>The basic concept of consructing the grid hasn\u2019t changed from the previous version, but in this release, Foundation made an enhancement for mobile grid. Foundation has two types of grid size small and large, and there are now 12 columns for the small grid.<\/p>\n<p>Given the following markup<\/p>\n<pre>\r\n &lt;div class=\"row\"&gt;\r\n &lt;div class=\"small-2 large-4 columns\"&gt;...&lt;\/div&gt;\r\n &lt;div class=\"small-4 large-4 columns\"&gt;...&lt;\/div&gt;\r\n &lt;div class=\"small-6 large-4 columns\"&gt;...&lt;\/div&gt;\r\n &lt;\/div&gt;\r\n <\/pre>\n<p>We will see that the columns width are split equally in large screen size.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/large-grid.jpg\" alt=\"large grid\" width=\"500\" height=\"100\"><\/figure>\n<p>In small viewport, the columns are adjusted in accordance to their specified small grid number.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/small-grid.jpg\" alt=\"small grid\" width=\"500\" height=\"100\"><\/figure>\n<h2>emCalc Function<\/h2>\n<p>em is a relative unit mesaurement, thus it is not certain how much exactly is 1.879em \u2013 depending on the specified base font size, the return might slightly be different.<\/p>\n<p>In this latest version, Foundation makes it easy to use <code>em<\/code> unit with <code>emCalc()<\/code> function. Simply add the pixel value, like so.<\/p>\n<pre>\r\n width: emCalc(10px);\r\n <\/pre>\n<p>It will return in <code>em<\/code> unit when we compile it into CSS. The calculation is based on the value specified in <code>$em-base<\/code> variable provided in <strong>_settings.scss<\/strong>.<\/p>\n<p><strong>Related:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.impressivewebs.com\/understanding-em-units-css\/\">Understanding em Units in CSS<\/a><\/p>\n<h2>Switching to Zepto.js<\/h2>\n<p>Foundation 4 uses <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zeptojs.com\/\">Zepto.js<\/a> over <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/jquery\/\">jQuery<\/a> as the default JavaScript library to run the plugins. Zepto.js is a lightweight JS library that has compatible APIs to jQuery. So, technically speaking, the Foundation jQuery plugins from the previous version should work just fine.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/zepto.jpg\" alt=\"zepto\" width=\"500\" height=\"150\"><\/figure>\n<p>The decision behind this switch as ZURB explains it is to lighten the code base and make things a bit faster.<\/p>\n<p><strong>Related:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zurb.com\/article\/1180\/how-to-use-foundation-4-s-faster-better-a\">How to Use Foundation 4\u2019s Faster, Better and Stronger JavaScript<\/a><\/p>\n<h2>Final Thought<\/h2>\n<p>Foundation is a great framework to build your resposnive website. But, if you have built one using the previous version, and decided to upgrade, it seems that you have some work to do.<\/p>","protected":false},"excerpt":{"rendered":"<p>ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they\u2019ve made some drastic changes, eliminated a few components, and added new features. So, here are a few things that I think is worth noting in this release. Let\u2019s check them out. The Variables The most noticeable change when&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4528,1823,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A look into: Foundation 4 Responsive Framework - Hongkiat<\/title>\n<meta name=\"description\" content=\"ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they&#039;ve made some drastic changes, eliminated\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A look into: Foundation 4 Responsive Framework\" \/>\n<meta property=\"og:description\" content=\"ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they&#039;ve made some drastic changes, eliminated\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-29T05:01:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:35:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/large-grid.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A look into: Foundation 4 Responsive Framework\",\"datePublished\":\"2013-07-29T05:01:08+00:00\",\"dateModified\":\"2025-04-03T17:35:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/\"},\"wordCount\":474,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/zurb-foundation-4\\\/large-grid.jpg\",\"keywords\":[\"Foundation\",\"Frameworks\",\"Responsive Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/\",\"name\":\"A look into: Foundation 4 Responsive Framework - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/zurb-foundation-4\\\/large-grid.jpg\",\"datePublished\":\"2013-07-29T05:01:08+00:00\",\"dateModified\":\"2025-04-03T17:35:09+00:00\",\"description\":\"ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they've made some drastic changes, eliminated\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/zurb-foundation-4\\\/large-grid.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/zurb-foundation-4\\\/large-grid.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-foundation-4-responsive-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A look into: Foundation 4 Responsive Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A look into: Foundation 4 Responsive Framework - Hongkiat","description":"ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they've made some drastic changes, eliminated","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/","og_locale":"en_US","og_type":"article","og_title":"A look into: Foundation 4 Responsive Framework","og_description":"ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they've made some drastic changes, eliminated","og_url":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-07-29T05:01:08+00:00","article_modified_time":"2025-04-03T17:35:09+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/large-grid.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A look into: Foundation 4 Responsive Framework","datePublished":"2013-07-29T05:01:08+00:00","dateModified":"2025-04-03T17:35:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/"},"wordCount":474,"commentCount":8,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/large-grid.jpg","keywords":["Foundation","Frameworks","Responsive Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/","url":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/","name":"A look into: Foundation 4 Responsive Framework - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/large-grid.jpg","datePublished":"2013-07-29T05:01:08+00:00","dateModified":"2025-04-03T17:35:09+00:00","description":"ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they've made some drastic changes, eliminated","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/large-grid.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/zurb-foundation-4\/large-grid.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A look into: Foundation 4 Responsive Framework"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4CH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17775"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17775\/revisions"}],"predecessor-version":[{"id":73615,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17775\/revisions\/73615"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17775"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}