How to Make your Website as Android App using CSS, Vue Material Design

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 app. It’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’t want app I just want to create my website don’t want any app, but my website visitors want an app. So the great Search Engine suggest me to take a look on Material design by Google and when I jump into Material Design CSS. It was really what I was 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 & fast. So After that I moved to my favourite blog “Tutorializine (Markov’s Blog)” and saw their a solution to make this. It was Vue Material Design CSS. Although this is inspired from the material design css.

Make your Website As Android App Using Vue Material CSS
Vue Material CSS: Make your Website As Android App Using

What is Material Design CSS

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 & transitions, padding and depth effects. Matías Duarte a professional designer described material designed clearly as he said “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.” Material Design was first introduced in Android 5.0

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 Vue Material Design CSS. 

Material Design Example
Google Material Design Demo

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 CSS to Make your Website as an Android APP.

Vue Material Design CSS

Vue Material is a Lightweight Framework built according to Material Design, which is developed by Google. 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.

 

How to Install Vue Material Design

So if you want to Install Vue Material CSS into your web app you need to follow some steps here:

Step 1: Now you need Some font’s css to import from google which you can grab from Google Fonts .  So Before </head> tag you have to place these css libraries to access google icon and Roboto font.

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

Step 2: After following step first Click here to Download Vue Material.

Step 3: When you will done with downloading this library, now it’s a time to include css  and javascript to your web app.

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

Step 4: Now start developing your app, before starting you have to apply theme

<script>
Vue.material.theme.register('default', {
 primary: 'cyan',
 accent: 'pink'
});
</script>

Html code will be similar to this

<div id="app" v-md-theme="'default'">
 <md-toolbar>
 <div class="md-title">My App</div>
 </md-toolbar>

 <md-button v-md-theme="'indigo'">My Button</md-button>
</div>

Vue Material CSS Component

1 : Avatar

2: Bottom Bar

3: Button

4: Button Toggle

5: Card

6: Checkbox

7: Icon

8: Input

9: List

10: Menu

11: Radio

12: Ripple

13: Select

14: Sidenav

15: Subheader

16: Switch

17: Tabs

18: Table

19: Toolbar

20: Tooltip

21: Whiteframe

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 “If you have pre-built libraries so why you are wasting time to create your own, just use them.”

Conclusion: Make your website as Android apps

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 full documentation of vue material css.  As i always come with an How to Guide, 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.

Leave a Reply

Your email address will not be published. Required fields are marked *