{"id":23185,"date":"2015-01-27T18:01:13","date_gmt":"2015-01-27T10:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23185"},"modified":"2025-04-04T02:02:15","modified_gmt":"2025-04-03T18:02:15","slug":"materialize-material-design-framework","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/","title":{"rendered":"Materialize: The Ultimate CSS Framework for Material Design"},"content":{"rendered":"

Google\u2019s Material Design<\/strong> is designed to deliver a consistent user experience across the web and mobile apps. It\u2019s increasingly popular among developers, and if you\u2019re considering adopting it, there are several ways to do so. You can use Polymer, Angular<\/a>, or Materialize<\/a>.<\/p>\n

Materialize is a CSS framework based on Material Design principles with Sass support<\/strong> for more efficient development. It offers default styling for ease of use and comes with comprehensive documentation.<\/p>\n

Materialize includes a variety of useful components such as dialogs, modals, date pickers, material buttons, parallax effects, cards, and more. It also provides multiple navigation options like drop-down menus, slide-in menus, and tabs. Materialize utilizes a 12-grid system<\/strong> with three default screen size media queries: a maximum width of 600px for mobile devices, 992px for tablets, and anything over 992px for desktop devices.<\/p>\n

Getting Started with Materialize<\/h2>\n

There are two ways to get started with Materialize: using standard CSS<\/strong> or Sass<\/strong>. You can download both versions here<\/a>. Alternatively, you can install Materialize with Bower using the following command:<\/p>\n

\r\n bower install materialize\r\n<\/pre>\n
Once you have the sources, ensure that you properly link them in your project files or compile the source if you are using the Sass version.<\/p>\n
Features of Materialize<\/h2>\n
In this section, we will explore some of the key features that Materialize offers.<\/p>\n
1. Sass Mixins<\/h3>\n
Materialize includes Sass Mixins, which automatically add all necessary browser prefixes when you write certain CSS properties. This feature ensures compatibility across all browsers<\/strong> with minimal code.<\/p>\n
Consider the following animation properties:<\/p>\n
\r\n -webkit-animation: 0.5s;\r\n -moz-animation: 0.5s;\r\n -o-animation: 0.5s;\r\n -ms-animation: 0.5s;\r\n animation: 0.5s;\r\n<\/pre>\n
These lines of code can be condensed into a single line using a Sass mixin:<\/p>\n
\r\n @include animation(.5s);\r\n<\/pre>\n
There are about 19 main mixins<\/strong> available. To see the full list, visit the Sass<\/a> category under the MIXINS<\/strong> tab.<\/p>\n
2. Flow Text<\/h3>\n
Unlike other frontend frameworks that use fixed text sizes, Materialize implements truly responsive text. Text size and line height are scaled responsively to maintain readability. For smaller screens, the line height is scaled larger to improve legibility.<\/p>\n
To use Flow Text, simply add the flow-text<\/code> class to your desired text. For example:<\/p>\n
\r\n <p class=\"flow-text\">This is Flow Text.<\/p>\r\n<\/pre>\n
Check out the demo here<\/a> in the Flow Text section.<\/p>\n
3. Ripple Effect with Waves<\/h3>\n
Material Design includes interactive feedback, such as the ripple effect. In Materialize, this effect is called Waves<\/strong>. When users click or tap a button, card, or any other element, the effect appears. You can easily create this effect by adding the waves-effect<\/code> class to your elements.<\/p>\n
Here\u2019s a snippet to add the waves effect:<\/p>\n
\r\n <a href=\"#\" class=\"btn waves-effect\">Submit<\/a>\r\n<\/pre>\n
The ripples are grey by default. If you have a dark background, you may want to change the ripple color. To add a different color, simply add waves-(color)<\/code> to the element, replacing (color)<\/code> with the desired color name.<\/p>\n
\r\n <a href=\"#\" class=\"btn waves-effect waves-light\">Submit<\/a>\r\n<\/pre>\n
\"Demo<\/figure>\n
You can choose from seven colors: light, red, yellow, orange, purple, green, and teal<\/strong>. You can also create or customize your own colors if needed.<\/p>\n
4. Shadow Effects<\/h3>\n
Material Design recommends using elevation to signify relationships between elements. Materialize supports this principle with its z-depth-(number)<\/code> class, allowing you to set shadow depth by changing (number)<\/code> from 1 to 5:<\/p>\n
\r\n <div class=\"card\">\r\n <p>Shadow depth 3<\/p>\r\n <p class=\"z-depth-3\"><\/p>\r\n <\/div>\r\n<\/pre>\n
All shadow depths are demonstrated in the image below.<\/p>\n
\"Shadow<\/figure>\n
5. Buttons and Icons<\/h3>\n
Material Design includes three main button types: raised button<\/strong>, floating action button (FAB)<\/strong>, and flat button<\/strong>.<\/p>\n
(1)<\/em> Raised Button<\/strong><\/p>\n
The raised button is the default button. To create this button, simply add the btn<\/code> class to your elements. To add the wave effect when clicked or pressed, use the following code:<\/p>\n
\r\n <a href=\"#\" class=\"btn waves-effect waves-light\">Button<\/a>\r\n<\/pre>\n
You can also add an icon to the left or right of the text. For the icon, include a custom <i><\/code> tag with the appropriate icon class name and position. For example:<\/p>\n
\r\n <a href=\"#\" class=\"btn waves-effect waves-light\"><i class=\"mdi-file-file-download left\"><\/i>Download<\/a>\r\n<\/pre>\n
\"Raised<\/figure>\n
In the above snippet, the mdi-file-file-download<\/code> class is used for the download icon. There are around 740 different icons<\/strong> available. To see them, visit the Sass<\/a> page in the Icons tab.<\/p>\n
(2)<\/em> Floating Action Button (FAB)<\/strong><\/p>\n
A floating button can be created by appending the btn-floating<\/code> class and your desired icon. For example:<\/p>\n
\r\n <a href=\"#\" class=\"btn-floating waves-effect waves-light\"><i class=\"mdi-content-send\"><\/i><\/a>\r\n<\/pre>\n
\"Floating<\/figure>\n
(3)<\/em> Flat Button<\/strong><\/p>\n
In Material Design, the flat button is often used within dialog boxes. To create it, simply add the btn-flat<\/code> class to your element:<\/p>\n
\r\n <a href=\"#\" class=\"btn-flat waves-effect waves-red\">Decline<\/a>\r\n<\/pre>\n
\"Flat<\/figure>\n
Additionally, buttons can be disabled with the disabled<\/code> class and made larger using the btn-large<\/code> class.<\/p>\n
6. Grid System<\/h3>\n
Materialize utilizes a standard 12-column responsive grid<\/strong> system. The responsiveness is divided into three categories: small (s)<\/strong> for mobile, medium (m)<\/strong> for tablets, and large (l)<\/strong> for desktops.<\/p>\n
To create columns, use s<\/code>, m<\/code>, or l<\/code> to indicate the size, followed by the grid number. For example, to create a half-width layout for a mobile device, use the s6<\/code> class in your layout. The s6<\/code> class stands for small-6<\/code>, which means 6 columns on a small device.<\/p>\n
Include the col<\/code> class in the layout you create and place it inside an element with the row<\/code> class. This ensures the layout is properly structured into columns. Here\u2019s an example:<\/p>\n
\r\n <div class=\"row\">\r\n <div class=\"col s12\">I have 12 columns or full width here<\/div>\r\n <div class=\"col s4\">4 columns (one-third) here<\/div>\r\n <div class=\"col s4\">4 columns (one-third) here<\/div>\r\n <div class=\"col s4\">4 columns (one-third) here<\/div>\r\n <\/div>\r\n<\/pre>\n
Here\u2019s the result:<\/p>\n
\"Grid<\/figure>\n
By default, col s12<\/code> is fixed-size and optimized for all screen sizes, essentially the same as col s12 m12 l12<\/code>. However, if you want to specify the size of the columns for different devices, you can list the additional sizes like this:<\/p>\n
\r\n <div class=\"row\">\r\n <div class=\"col s12\">My width always has 12 columns everywhere<\/div>\r\n <div class=\"col s12 m6 l9\">I have 12 columns on mobile, 6 on tablet, and 9 on desktop<\/div>\r\n <\/div>\r\n<\/pre>\n
Here\u2019s what this looks like:<\/p>\n
\"Different<\/figure>\n
These are just a few features of Materialize. To learn more about other features, visit the documentation<\/a> page.<\/p>","protected":false},"excerpt":{"rendered":"
Google\u2019s Material Design is designed to deliver a consistent user experience across the web and mobile apps. It\u2019s increasingly popular among developers, and if you\u2019re considering adopting it, there are several ways to do so. You can use Polymer, Angular, or Materialize. Materialize is a CSS framework based on Material Design principles with Sass support…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,4109,3446],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nMaterialize: The Ultimate CSS Framework for Material Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"Google's Material Design is designed to deliver a consistent user experience across the web and mobile apps. It's increasingly popular among developers,\" \/>\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\/materialize-material-design-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Materialize: The Ultimate CSS Framework for Material Design\" \/>\n<meta property=\"og:description\" content=\"Google's Material Design is designed to deliver a consistent user experience across the web and mobile apps. It's increasingly popular among developers,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-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=\"2015-01-27T10:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:02:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/materialize-material-design-framework\/waves-demo.gif\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Materialize: The Ultimate CSS Framework for Material Design\",\"datePublished\":\"2015-01-27T10:01:13+00:00\",\"dateModified\":\"2025-04-03T18:02:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/\"},\"wordCount\":848,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/materialize-material-design-framework\\\/waves-demo.gif\",\"keywords\":[\"CSS\",\"CSS Frameworks\",\"Material Design\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/\",\"name\":\"Materialize: The Ultimate CSS Framework for Material Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/materialize-material-design-framework\\\/waves-demo.gif\",\"datePublished\":\"2015-01-27T10:01:13+00:00\",\"dateModified\":\"2025-04-03T18:02:15+00:00\",\"description\":\"Google's Material Design is designed to deliver a consistent user experience across the web and mobile apps. It's increasingly popular among developers,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/materialize-material-design-framework\\\/waves-demo.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/materialize-material-design-framework\\\/waves-demo.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/materialize-material-design-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Materialize: The Ultimate CSS Framework for Material Design\"}]},{\"@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\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Materialize: The Ultimate CSS Framework for Material Design - Hongkiat","description":"Google's Material Design is designed to deliver a consistent user experience across the web and mobile apps. It's increasingly popular among developers,","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\/materialize-material-design-framework\/","og_locale":"en_US","og_type":"article","og_title":"Materialize: The Ultimate CSS Framework for Material Design","og_description":"Google's Material Design is designed to deliver a consistent user experience across the web and mobile apps. It's increasingly popular among developers,","og_url":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-01-27T10:01:13+00:00","article_modified_time":"2025-04-03T18:02:15+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/materialize-material-design-framework\/waves-demo.gif","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Materialize: The Ultimate CSS Framework for Material Design","datePublished":"2015-01-27T10:01:13+00:00","dateModified":"2025-04-03T18:02:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/"},"wordCount":848,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/materialize-material-design-framework\/waves-demo.gif","keywords":["CSS","CSS Frameworks","Material Design"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/","url":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/","name":"Materialize: The Ultimate CSS Framework for Material Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/materialize-material-design-framework\/waves-demo.gif","datePublished":"2015-01-27T10:01:13+00:00","dateModified":"2025-04-03T18:02:15+00:00","description":"Google's Material Design is designed to deliver a consistent user experience across the web and mobile apps. It's increasingly popular among developers,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/materialize-material-design-framework\/waves-demo.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/materialize-material-design-framework\/waves-demo.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/materialize-material-design-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Materialize: The Ultimate CSS Framework for Material Design"}]},{"@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\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-61X","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23185","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23185"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23185\/revisions"}],"predecessor-version":[{"id":73724,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23185\/revisions\/73724"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23185"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}