Permalink
Please sign in to comment.
Browse files
Create materializecss-framework-as-a-bootstrap-alternative.md
a wiki about MaterializeCSS framework as a bootstrap framework. update wiki Unknowing posted my wiki as a comment. Back to pasting that entire comment here but lost the markdown. Will update markdown in future commits. Updated links Got to copy my lost markdown!!Yaaay Updated updated heading and added more info Updated more info added
- Loading branch information...
Showing
with
55 additions
and 0 deletions.
55
materializecss-framework-as-a-bootstrap-alternative.md
| @@ -0,0 +1,55 @@ | ||
| +# MaterializeCSS framework as a an alternative to Bootstrap | ||
| +[MaterializeCSS](http://materializecss.com/) is a modern responsive front-end framework based on google's [Material Design principles](https://www.google.com/design/spec/material-design/introduction.html). | ||
| +## What is Material Design? | ||
| +Material Design (codenamed Quantum Paper) is a design language developed by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.[wikipedia] | ||
| + | ||
| +This [video](https://www.youtube.com/watch?v=Q8TXgCzxEnw) gives you an idea about material design: | ||
| +#### Check out this websites that are using Materialize, See the difference to what you're used to! | ||
| + | ||
| +Test them on your phone too for a better feel. | ||
| + | ||
| +- [The 100](https://www.100xp.io/) | ||
| + | ||
| +- [Admin Themes](http://demo.geekslabs.com/materialize/v2.1/) | ||
| + | ||
| +- [StrapHq](http://www.straphq.com/) | ||
| + | ||
| +More examples [here](http://materializecss.com/showcase.html) | ||
| + | ||
| +### A bootstrap alternative, really? | ||
| +Chill, nothing can ever beat bootstrap, imo. However, materialize CSS offers just that, Materializ-ation - The feeling of interacting with the interface as if its a physical material, like paper. I just came up with that. | ||
| + | ||
| +But really... | ||
| + | ||
| +I do like materialize because of its simplicity, for example; | ||
| + | ||
| +In bootstrap you would do this to a button | ||
| +``` | ||
| +<button class="btn btn-primary btn-lg"> | ||
| +My Button | ||
| +</button> | ||
| + | ||
| +``` | ||
| +Basically each class name repeatedly has the btn- attached to it. And this is mostly the case for many other bootstrap components especially when you want to add simple classes like color. | ||
| + | ||
| +With Materialize you can add all the classes simply like this: | ||
| +``` | ||
| +<button class="btn waves-effect waves-light green">My Button</a> | ||
| +``` | ||
| +As you can see, use of the btn- has been reduced. The `green` class can be re-used with any/all other HTML element other than the `button` shown in this case. | ||
| + | ||
| + | ||
| +There is another lighter version of material Design Framework but its not as elegant or simple as the materializeCSS framework | ||
| +Other than this simplicity, here are more reasons why I love materializeCSS: | ||
| + | ||
| +- It's simple! -- Just emphasizing | ||
| +- It's open-source, you can git it here | ||
| +- A community is also growing around it | ||
| +- [Someone](http://fezvrasta.github.io/bootstrap-material-design/) is looking to produce a blend of Bootstrap + Materialize. Sweeet! | ||
| + | ||
| + | ||
| +### Anything else? | ||
| +Try it out and maybe you will love it. In fact since thats where even android UI is already headed, this might a good way to get yourself better at Material design for mobile-focused web-apps like [progressive web apps](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/#what-will-you-learn) | ||
| + | ||
| +#### Maybe you shouldn't use it ...yet | ||
| +It's undergoing changes being at alpha stage. So you might skip it and not use it on crucial project untill it matures. |
0 comments on commit
773bff1