{"id":28,"date":"2015-06-16T02:53:11","date_gmt":"2015-06-16T02:53:11","guid":{"rendered":"https:\/\/mtwoblog.wordpress.com\/?p=28"},"modified":"2015-06-16T02:53:11","modified_gmt":"2015-06-16T02:53:11","slug":"materialize-your-site","status":"publish","type":"post","link":"https:\/\/muhammad.dev\/materialize-your-site\/","title":{"rendered":"Materialize your site!"},"content":{"rendered":"<p>I ended\u00a0my last post saying how awesome the Material Design is, which was revealed along with Android Lollipop a year ago. After writing a\u00a0few apps on Android Studio I\u00a0wondered\u00a0how amazing it would be if we can have this beautiful typography, subtle transitions and animations in more places than just\u00a0droids&#8230;<\/p>\n<figure id=\"attachment_32\" aria-describedby=\"caption-attachment-32\" style=\"width: 1348px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/materializecss.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-32 size-full\" src=\"https:\/\/mtwoblog.files.wordpress.com\/2015\/06\/materializ.png?resize=1348%2C732\" alt=\"materialize\" width=\"1348\" height=\"732\" \/><\/a><figcaption id=\"caption-attachment-32\" class=\"wp-caption-text\">Materializecss.com homepage<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p>A\u00a0few days later, when working on a web project my buddy Hisham mentioned about\u00a0Materialize CSS.<\/p>\n<p>Simply, this is Material Design to the web!<\/p>\n<p>For those who are already using Bootstrap or other similar\u00a0frameworks, this needs no introduction. Nevertheless, it is\u00a0a\u00a0modern responsive front-end framework based on Material Design.<\/p>\n<h4>What is the big fuss?<\/h4>\n<p>Material Design is based on light, shadows and how paper reacts to touches. Sounds like marketing material, but it is beautiful! The elements on your screen have a 3D perspective where cards are\u00a0placed on top of\u00a0one another giving a sense of depth. Labels, text\u00a0and buttons cannot\u00a0teleport. They take a\u00a0physical\u00a0movement path across\u00a0your screen. The redesigned Roboto typography is both beautiful and subtle. Looks great on all\u00a0display sizes and densities.<\/p>\n<p>That was a\u00a0short introduction. Click on the image below to learn the more in case you want to.<\/p>\n<figure id=\"attachment_33\" aria-describedby=\"caption-attachment-33\" style=\"width: 823px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.google.com\/design\/spec\/material-design\/introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-33\" src=\"https:\/\/mtwoblog.files.wordpress.com\/2015\/06\/mat.png?resize=823%2C354\" alt=\"material principles\" width=\"823\" height=\"354\" \/><\/a><figcaption id=\"caption-attachment-33\" class=\"wp-caption-text\">Material Design Principles<\/figcaption><\/figure>\n<h3>Getting Started<\/h3>\n<p><a href=\"http:\/\/materializecss.com\/getting-started.html\" target=\"_blank\" rel=\"noopener noreferrer\">Click here\u00a0<\/a>to start materializing your site. The guide may not be as extensive as Bootstrap&#8217;s but it is good enough to getting you started.<\/p>\n<p>Thanks to the team: Alvin, Alan, Alex and Kevin\u00a0for giving us this opportunity.<\/p>\n<p>I have also just begun. If you are\u00a0already an expert on this area,\u00a0let us know how we\u00a0can customize this framework to work better. If you are also a beginner, I hope you find this post helpful!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I ended\u00a0my last post saying how awesome the Material Design is, which was revealed along with Android Lollipop a year ago. After writing a\u00a0few apps on Android Studio I\u00a0wondered\u00a0how amazing it would be if we can have this beautiful typography, subtle transitions and animations in more places than just\u00a0droids&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[19],"tags":[26,48,49,68,72,108],"class_list":["post-28","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-android","tag-framework","tag-frontend","tag-lollipop","tag-material-design","tag-web"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/posts\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":0,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"wp:attachment":[{"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muhammad.dev\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}