Material design solutions
What is material design and how bring it to our projects without too much pain? Check out this quick article.
Material design in action
Here we say a couple words about what material design is, and about helpful solutions as well.
First of all – what is Material design?
It’s called also Google design, and here it has its own homepage:
We can find there a lot of articles and resources. But in short…
Material Design (codename: Quantum Paper) is a design language developed in 2014 by Google. It makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. We can find this approach in Google’s products, providing a consistent experience across all platforms and applications. Google has also released application programming interfaces (APIs) for third-party developers to incorporate the design language into their applications.
Material Design can be used in API Level 21 and newer via the v7 appcompat library, which is used on virtually all Android devices manufactured after 2009.
Using concepts of MD in own projects is an interesting idea, worth of trying! Getting into may take some time. However, we can get some help from ready solutions.
Helpful solution – Material Design for Bootstrap
It’s a powerful and free Material Design UI KIT, that offers a very wide support for applying MD to our project. Works with Bootstrap 4 or 3.
The one of many strengths are available components. We can choose among 400+ predefined components. Each component is ready to use and fits perfectly with each other like LEGO bricks!
To save our time, the components and prepared thematic sections are combined like blog listings.
Additionally we can expect nice templates and lots of tutorials!
Please visit the homepage of this brilliant solution to get more:
http://mdbootstrap.com/material-design-for-bootstrap
Helpful solution – material UI for Riot.js
Another useful support we can get from a JavaScript library for Riot.js, named material UI
An example of text-area:
http://kysonic.github.io/riot-mui/#m-textarea
See also:
Material time picker library – a timer picker written in ES6 and SASS
Enjoy! Next helpful solutions coming soon!
9
1
2
1
-
DirectCode