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.
Contents
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.
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.