{"id":359,"date":"2017-12-02T16:34:00","date_gmt":"2017-12-02T16:34:00","guid":{"rendered":"http:\/\/www.infotheme.in\/blog\/?p=359"},"modified":"2022-08-10T11:43:54","modified_gmt":"2022-08-10T11:43:54","slug":"create-website-as-android-app","status":"publish","type":"post","link":"https:\/\/infotheme.net\/blog\/create-website-as-android-app\/","title":{"rendered":"How to Make your Website as Android App using CSS, Vue Material Design"},"content":{"rendered":"<p>Here today I am sharing something new with you, So are you excited to <strong>create your own website as android application or convert website into app.<\/strong>&nbsp;It&#8217;s really true, You can Create your Mobile App using CSS. After few weeks research I came to write this article for you. So as I first searched over google I don&#8217;t want app I just want to create my website don&#8217;t want any app, but my website visitors want an app. So the great Search Engine suggest me to take a look on <strong><a href=\"https:\/\/material.google.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Material design by Google<\/a><\/strong>&nbsp;and when I jump into Material Design CSS. It was really what I was&nbsp;searching here over internet, so i read everything about Material Design. But After i was searching for something else which can make it much better &amp; fast. So After that I moved to my favourite blog &#8220;<a href=\"http:\/\/tutorialzine.com\/\" target=\"_blank\" rel=\"nofollow noopener\"><strong>Tutorializine (Markov&#8217;s Blog)<\/strong><\/a>&#8221; and saw their a solution to make this. It was <strong>Vue Material Design CSS<\/strong>. Although this is inspired from the material design css.<\/p>\n<figure id=\"attachment_367\" aria-describedby=\"caption-attachment-367\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-367 size-full\" src=\"http:\/\/www.infotheme.in\/blog\/wp-content\/uploads\/2016\/12\/How-to-Make-your-Website-as-Android-App-Using-CSS.png\" alt=\"Make your Website As Android App Using Vue Material CSS\" width=\"650\" height=\"386\"><figcaption id=\"caption-attachment-367\" class=\"wp-caption-text\">Vue Material CSS: Make your Website As Android App Using<\/figcaption><\/figure>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#What_is_Material_Design_CSS\"><span class=\"toc_number toc_depth_1\">1<\/span> What is Material Design CSS<\/a><ul><li><a href=\"#Vue_Material_Design_CSS\"><span class=\"toc_number toc_depth_2\">1.1<\/span> Vue Material Design CSS<\/a><\/li><li><a href=\"#How_to_InstallnbspVue_Material_Design\"><span class=\"toc_number toc_depth_2\">1.2<\/span> How to Install&nbsp;Vue Material Design<\/a><\/li><li><a href=\"#Vue_Material_CSS_Component\"><span class=\"toc_number toc_depth_2\">1.3<\/span> Vue Material CSS Component<\/a><\/li><\/ul><\/li><li><a href=\"#Conclusion_Make_your_website_as_Android_apps\"><span class=\"toc_number toc_depth_1\">2<\/span> Conclusion: Make your website as Android apps<\/a><\/li><\/ul><\/div>\n<h2><span id=\"What_is_Material_Design_CSS\">What is Material Design CSS<\/span><\/h2>\n<p>Material design was first introduced by Google Inc. in 2014 it is codenamed as Quantum Paper. The language was totally based on better grid layout, responsive, animation &amp; transitions, padding and depth effects.&nbsp;Mat\u00edas Duarte a professional designer described material designed clearly as he said &#8220;unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.&#8221; Material Design was first introduced in Android 5.0<\/p>\n<p>So here below i am sharing a demo of Material Design CSS, After watching this demo video you will definitely go for it, but i will recommend also <strong>Vue Material Design CSS.&nbsp;<\/strong><\/p>\n<figure id=\"attachment_366\" aria-describedby=\"caption-attachment-366\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-full wp-image-366\" src=\"http:\/\/www.infotheme.in\/blog\/wp-content\/uploads\/2016\/12\/Material-Design-Example.png\" alt=\"Material Design Example \" width=\"700\" height=\"399\"><figcaption id=\"caption-attachment-366\" class=\"wp-caption-text\">Google Material Design Demo<\/figcaption><\/figure>\n<p>Now here we will learn about something new, because material design is a pretty good css library developed by google, but I am going to share my another experience which is also pretty <strong>CSS&nbsp;to Make your Website as an Android APP<\/strong>.<\/p>\n<h3><span id=\"Vue_Material_Design_CSS\">Vue Material Design CSS<\/span><\/h3>\n<p><strong><a href=\"https:\/\/marcosmoura.github.io\/vue-material\/\" target=\"_blank\" rel=\"nofollow noopener\">Vue Material<\/a><\/strong>&nbsp;is a Lightweight Framework built according to Material Design, which is developed by&nbsp;<strong>Google.&nbsp;<\/strong>It was developed for well designed web applications and created to fit on any screen or any device, it can be mobile, tablet, phablet or laptop. Here are many elements designed according to android mobile apps design, such as avatar, bottom bar, input and navigation bar etc. So it is compatible with all modern web browser Chrome, IE, Safari, Firefox etc.<\/p>\n<p>&nbsp;<\/p>\n<h3><span id=\"How_to_InstallnbspVue_Material_Design\">How to Install&nbsp;Vue Material Design<\/span><\/h3>\n<p>So if you want to Install Vue Material CSS into your web app you need to follow some steps here:<\/p>\n<p><strong>Step 1:<\/strong> Now you need Some font&#8217;s css to import from google which you can grab from <strong><a href=\"https:\/\/fonts.google.com\" rel=\"nofollow noopener\" target=\"_blank\">Google Fonts<\/a>&nbsp;.&nbsp;<\/strong> So Before &lt;\/head&gt; tag you have to place these css libraries to access google icon and Roboto font.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700,400italic&quot;&amp;gt;\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;\/\/fonts.googleapis.com\/icon?family=Material+Icons&quot;&amp;gt;\n<\/pre>\n<p><strong>Step 2:&nbsp;<\/strong>After following step first Click here to <strong><a href=\"https:\/\/github.com\/marcosmoura\/vue-material\/archive\/master.zip\" target=\"_blank\" rel=\"nofollow noopener\">Download Vue Material<\/a>.<\/strong><\/p>\n<p><strong>Step 3:<\/strong> When you will done with downloading this library, now it&#8217;s a time to include css &nbsp;and javascript to your web app.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;path\/to\/vue-material.css&quot;&amp;gt;\n&amp;lt;script src=&quot;path\/to\/vue-material.js&quot;&amp;gt;&amp;lt;\/script&amp;gt;\n<\/pre>\n<p><strong>Step 4:<\/strong> Now start developing your app, before starting you have to apply theme<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&amp;lt;script&amp;gt;\nVue.material.theme.register('default', {\nprimary: 'cyan',\naccent: 'pink'\n});\n&amp;lt;\/script&amp;gt;\n<\/pre>\n<p>Html code will be similar to this<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&amp;lt;div id=&quot;app&quot; v-md-theme=&quot;'default'&quot;&amp;gt;\n&amp;lt;md-toolbar&amp;gt;\n&amp;lt;div class=&quot;md-title&quot;&amp;gt;My App&amp;lt;\/div&amp;gt;\n&amp;lt;\/md-toolbar&amp;gt;\n\n&amp;lt;md-button v-md-theme=&quot;'indigo'&quot;&amp;gt;My Button&amp;lt;\/md-button&amp;gt;\n&amp;lt;\/div&amp;gt;\n<\/pre>\n<h3><span id=\"Vue_Material_CSS_Component\">Vue Material CSS Component<\/span><\/h3>\n<p><strong>1 : Avatar<\/strong><\/p>\n<p><strong>2: Bottom Bar<\/strong><\/p>\n<p><strong>3: Button<\/strong><\/p>\n<p><strong>4: Button Toggle<\/strong><\/p>\n<p><strong>5: Card<\/strong><\/p>\n<p><strong>6: Checkbox<\/strong><\/p>\n<p><strong>7: Icon<\/strong><\/p>\n<p><strong>8: Input<\/strong><\/p>\n<p><strong>9: List<\/strong><\/p>\n<p><strong>10: Menu<\/strong><\/p>\n<p><strong>11: Radio<\/strong><\/p>\n<p><strong>12: Ripple<\/strong><\/p>\n<p><strong>13: Select<\/strong><\/p>\n<p><strong>14: Sidenav<\/strong><\/p>\n<p><strong>15: Subheader<\/strong><\/p>\n<p><strong>16: Switch<\/strong><\/p>\n<p><strong>17: Tabs<\/strong><\/p>\n<p><strong>18: Table<\/strong><\/p>\n<p><strong>19: Toolbar<\/strong><\/p>\n<p><strong>20: Tooltip<\/strong><\/p>\n<p><strong>21: Whiteframe<\/strong><\/p>\n<p>So here are almost 21 components or elements of this javascript which you can use to make you web app as android app within few minutes. As I always love to make apps with pre-built libraries, concept is &#8220;If you have pre-built libraries so why you are wasting time to create your own, just use them.&#8221;<\/p>\n<h2><span id=\"Conclusion_Make_your_website_as_Android_apps\"><strong>Conclusion: Make your website as Android apps<\/strong><\/span><\/h2>\n<p>In this whole article we have learned about a new materials design css, or we can a subset of it, which is really cool to design your website as an mobile app, within few minutes. So what is conclusion here ? Now we can develop best and user friendly we apps, which will looks like android app. With this new and awesome script, Vue Material CSS. if you want to learn more about component so here is <strong><a href=\"https:\/\/marcosmoura.github.io\/vue-material\/\" target=\"_blank\" rel=\"nofollow noopener\">full documentation of vue material css<\/a>. &nbsp;<\/strong>As i always come with an <a href=\"http:\/\/www.infotheme.in\/blog\/how-guide\" rel=\"nofollow noopener\" target=\"_blank\"><strong>How to Guide<\/strong><\/a>, so it was my a try to make it best guide for you keep commenting here and follow me, to be updated about web industry and mobile app development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here today I am sharing something new with you, So are you excited to create your own website as android application or convert website into [&hellip;] <span class=\"read-more-link\"><a class=\"read-more\" href=\"https:\/\/infotheme.net\/blog\/create-website-as-android-app\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":369,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[134],"tags":[158,165,166],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/359"}],"collection":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/comments?post=359"}],"version-history":[{"count":2,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/359\/revisions"}],"predecessor-version":[{"id":1470,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/359\/revisions\/1470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/media?parent=359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/categories?post=359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/tags?post=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}