A nice UI kit inspired to Google Material Design. Free PSD designed and released by Jakub Kośla.
The post Material Design UI kit appeared first on Freebiesbug.
Material Design UI kit
Showing posts with label material. Show all posts
Showing posts with label material. Show all posts
Tuesday, May 19, 2015
Friday, April 17, 2015
10 Material Design Web Frameworks Worth Considering
What happens when you combine the principles of good design with the innovations of technology and science? Well, that is just what Google did, and created the concept of Material Design.
Simply put, Material Design is a visual design concept that brings together the principles and rules of classic design and the probabilities and norms of science or technology. Since Material Design is rising in popularity, so are the tools and resources related to it.
In this post, I have put together some of the best web frameworks for your next Material Design styled web projects. We also have a post that covers Material Design GUI kits and another that takes a look at live examples of Material Design in action.
Top Material Design Frameworks
Materialize
Materialize is a responsive front-end framework with a focus on user experience.
Material UI
Material UI is a framework and a set of React components that puts the emphasis on user interface design.
MUI
MUI is a lightweight and agile Material Design framework that can be loaded asynchronously to speed up development time and is fully cross-platform.
daemonite
daemonite is a simple HTML5 Material Design framework.
LumX
LumX is a responsive front-end framework based on AngularJS and Material Design specifications.
Materialize Meteor
Materialize Meteor is a responsive front-end framework based on Material Design packaged for Meteor.
Framaterial
Framaterial is a simple framework that can be used out of the box without the help of any external libraries or plugins.
Material Framework
Material Framework is a responsive framework that can implement Material Design concepts in any web page or web app.
Material Foundation
Material Foundation is the Material Design version of the Foundation framework by ZURB.
Material Design for Bootstrap
Material Design for Bootstrap is a theme for Bootstrap 3 that lets you use Material Design concepts on the front-end.
Have you ever worked with Material Design? Got a framework that I missed? Share it in the comments below!
The post 10 Material Design Web Frameworks Worth Considering appeared first on Speckyboy Web Design Magazine.
10 Material Design Web Frameworks Worth Considering
Wednesday, April 8, 2015
Freebie: Material Design UI Kit (PSD)
Following the guidelines laid out by Google, this free UI kit has been designed so that you can easily get your next Material Design project kickstarted quickly. Every element, widget, button and form within the kit can be fully customised as per your requirements. It comes in PSD format and you’re completely free to use the kit in both your personal and commercial design projects.
Thanks to Designtory for designing this UI kit and allowing us to release it as a freebie.
Free Material Design UI Kit
UI Kit Preview
Click the image below to view the full-size preview.
You are free to use this free Material Design UI Kit in both your personal and commercial projects.
If you are looking for some more Material Design UI kits, you should check out this post. And if you would like to see some live examples of Material Design in action, this post is for you.
The post Freebie: Material Design UI Kit (PSD) appeared first on Speckyboy Web Design Magazine.
Freebie: Material Design UI Kit (PSD)
Wednesday, March 11, 2015
10 Free Google Material Design Resources
Google’s Material Design language was designed in 2014 to increase the usage of grid-layout with lots of effects, shadows and animation. If you are looking to use Google Material, there are plenty of resources available. Here is list of the top 10 Google Material Design resources:
1. Materialize CSS
This is a front-end framework to work on Material Design where designers can choose to work either on CSS and Java Script Files or SCSS files. Javascript requires almost no set-up and SCSS gives you more control over components to be included. There are some starter templates available to give you a head start with comprehensive guidelines.
2. Paper Collapse
This is a simple CSS3 paper cards accordion. The various options include animation duration, specifying the animation speed, functions to list handlers or various animation functions.
3. MAWbutton
MAWbutton is a ripple button inspired by Google Material design. Again, here you can mention the speed, scale, effect and callback after transition. They are still working on flash and wave effects.
4. Waves
Waves is a click effect on the button inspired by Material design. You need to install Node Javascript and Ruby on the computer. It runs via SASS and there are testing tools for it.
5. Material Framework
This resource has open-source icons available in SVG framework. Icons are available in 24px and 48px flavors. You need to install zip file with all the icons and then install it.
6. Instagram PSD
This is a free Material Design inspired Instagram UI that you can use in your projects.
7. Leaf Framework
Leaf Framework is a CSS framework based on Google Material design. It has a list of buttons, images, forms and drop-downs with various color options to display. You can also give various wave effects which will be displayed according to the shadow.
8. Bootstrap Material Design
This is a front-end framework in Google Material Design. It is very easy to use with comprehensive guidelines. It is available in LESS and SASS version is only available in as base file.
9. Material Design Hamburger
This is a hamburger animation available in Google Material Design. It supports IE8 and IE 10 browser.
10. Material Playground
This It is a playground theme with various sliders, images and text field effects.
HTTP/2 will change the web as we know it. Find out why.
Provided by
10 Free Google Material Design Resources
Thursday, February 26, 2015
HTML & CSS Examples of Material Design in Action
We touched on Material Design a few months ago (Material Design GUI kits, you should check them out!) just as Google’s innovative visual language began building up a head of steam. Since then, we’ve seen many, many sites and apps that have incorporated the visual language successfully. This is going to be the year of Material Design, and we love it
Just in case you haven’t jumped on the Material Design bandwagon or aren’t fully convinced of it’s merits as yet, we’ve collected a small collection of HTML and CSS examples from Codepen that will surely convince you. Here they are:
Drawer Motion
A demonstration of how the app drawer is filled with motion in Android Lollipop. By Himateja and Jovie Brett.
Animated Tiles
A CSS-based prototype of Material Design"s animated tiles. By Sergey Kupletsky.
Morphing Icons
A collection of recreated "morphing" icons in a Material Design style. By Alberto Bonvicin.
Subtle Animation
A CSS-only recreation of Material Design"s flawless and subtle animations. By Michiel Bijl.
Immaculate Transitions
Immaculate examples of Material Design"s transitions. By Andrew Tunnecliffe.
Preloader
A Javascript (jQuery plugin) recreation of the Material Design preloader. By Aaron Lumsden.
Scaling Interaction
A simple recreation of Material Design"s scaling interactions. By Dennis Gaebel.
Form Inputs
Examples of the inputs on a Material Design form. By Sergey.
Swipe Animation
A pure-CSS example of Material Design"s intuitive card swipe animation. By Michiel Bijl.
Clean Navigation
A Material Design menu system that slides the page to reveal a clean and simple navigation. By Lewi Hussey.
Hamburger Menu
A CSS (with a sprinkle of JS) hamburger menu that has been animated in a Material Design style. By Chris Wheatley.
Loading Spinner
A CSS and SVG recreation of Material Design"s loading spinners. By Fran Pérez.
Address Bar UI
A CSS mock-up of Chrome"s Material Design address bar (including meaningful transitions). By David Khourshid.
Slide Tabs
A touch enabled side scrolling tab system that mimics Android Lollipop"s stock app drawer. By Adam Crockett.
Concluding
What are your thoughts on Material Design? Have you used it any of your projects? Also, if know of any other animated examples of Material Design, please do share them as well.
The post HTML & CSS Examples of Material Design in Action appeared first on Speckyboy Web Design Magazine.
HTML & CSS Examples of Material Design in Action
Wednesday, January 28, 2015
Materialize – A Material Design CSS Framework
Google’s Material Design is aimed to work well on the Web and also on mobile apps. It’s gaining popularity with developers and if you want to adopt it too, there are many ways to implement Material Design on your site. You can use Polymer or Angular, or you can use Materialize.
Materialize is a CSS framework based on Material Design principles with Sass support for better development. It carries default styling for easy use, and has detailed documentation.
You can find a lot of useful components within: dialog, modal, date picker, material buttons, parallax, cards and more. It also has many navigation options you can choose from, such as drop down, slide in menu and tabs. Materialize also uses a 12-grid system with 3 default screen size media queries: a max width of 600px is a mobile device, 992px tablet device and anymore than 992px is considered a desktop device.
Recommended Reading: What’s In Foundation 4 Responsive Framework
Getting Started
There are two ways to get started with Materialize: use standard CSS or Sass. Both sources can be downloaded here. You can also get them with bower using the following command:
bower install materialize
After you get the sources, make sure to properly link them on your project file or compile the source if you are using the Sass version.
Read Also: How To Install, Update & Remove Web Libraries Easily With Bower
Features
In this section, I will explain some features that Materialize offers.
1. Sass Mixins
This framework carries Sass Mixins which automatically adds all browser prefixes when you write certain CSS properties. It’s a great feature to have to ensure compatibility across all browsers, with as little fuss, and code, as possible.
Take a look at the following animation properties:
-webkit-animation: 0.5s; -moz-animation: 0.5s; -o-animation: 0.5s; -ms-animation: 0.5s; animation: 0.5s;
Those lines of code can be rewritten with a single line of Sass mixin like so:
@include animation(.5s);
There are about 19 main mixins available. To see the full list, head over to the Sass category in the MIXINS tab.
2. Flow Text
While other frontend frameworks use fixed text, Materialize implements truly responsive text. Text size and line height are also scaled responsively to maintain readability. When it comes to smaller screens, the line height is scaled larger.
To use Flow Text, you can simply add the flow-text class on your desired text. For instance:
<p class="flow-text">This is Flow Text.</p>
Checkout the demo here on the Flow Text section.
3. Ripple effect with Waves
Material Design also comes with interactive feedback, one notable example is the ripple effect. In Materialize, this effect is called Waves. Basically when users click or tap/touch a button, card or any other element, the effect appears. Waves can be easily created by adding waves-effect class onto your elements.
This snippet gives you the waves effect.
<a href="#" class="btn waves-effect">Submit</a>
The ripples are grey by default. But in a situation where you have a dark color background, you may want to change the color. To add a different color, just add waves-(color) to the element. Replace the "(color)" with a name of a color.
<a href="#" class="btn waves-effect waves-light">Submit</a>
You can choose from 7 colors: light, red, yellow, orange, purple, green and teal. You can always create or customize your own colors if those colors don’t fit your needs.
4. Shadow
To deliver relationships between elements, Material Design recommend using elevation on the surfaces. Materialize delivers on this principle with its z-depth-(number) class. You can determine the shadow depth by changing the (number) from 1 to 5:
<div class="card"> <p>Shadow depth 3</p> <p class="z-depth-3"></p> </div>
All shadow depths are demonstrate with the image below.
5. Buttons and Icons
In Material Design there are three main button types: raised button, fab (floating action button) and flat button.
(1) Raised button
The raised button is the default button. To create this button, just add a btn class to your elements. If you want to give it the wave effect when clicked or pressed, go with this:
<a href="#" class="btn waves-effect waves-light">Button</a>
Alternatively, you can also give the button an icon to the left or the right of the text. For the icon, you will need to add custom <i> tag with the icon class name and position. For instance:
<a href="#" class="btn waves-effect waves-light"><i class="mdi-file-file-download left"></i>Download</a>
In the above snippet we use mdi-file-file-download class for the download icon. There are about 740 different icons you can use. To see them head over to the Sass page in the Icons tab.
(2) Floating Button
A floating button can be created by appending btn-floating class and your desired icon. For instance:
<a href="#" class="btn-floating waves-effect waves-light"><i class="mdi-content-send"></i></a>
In Material Design, the flat button is often used within the dialog box. To create it, just add btn-flat to your element like so:
<a href="#" class="btn-flat waves-effect waves-red">Decline</a>
Additionally, buttons can be disabled with the disabled class and made larger using btn-large class.
6. Grid
Materialize uses a standard 12-column responsive grid system. The responsiveness is divided into three parts: small (s) for mobile, medium (m) for tablet and large (l) for desktop.
To create columns, use s, m or l to indicate the size, followed by the grid number. For example, when you want to create a half sized layout for mobile device then you should include an s6 class into your layout. s6 stands for small-6 which means 6 column on small device.
You must also include a col class in the layout you create and put it inside an element which has the row class. This is so the layout could be put into columns properly. Here’s an example:
<div class="row"> <div class="col s12">I have 12-columns or full width here</div> <div class="col s4">4-columns (one-third) here</div> <div class="col s4">4-columns (one-third) here</div> <div class="col s4">4-columns (one-third) here</div> </div>
Here’s the results:
By default, col s12 is fixed-size and optimized for all screen size, basically the same as col s12 m12 l12. But if you want to specify the size fo the columns for different devices. All you need to do is to list the additional sizes like so:
<div class="row"> <div class="col s12">My width always has 12 columns everywhere</div> <div class="col s12 m6 l9">I have 12 columns on mobile, 6 on tablet and 9 on desktop</div> </div>
Here’s what this looks like:
Those are just a few features of Materialize. To learn more about their other features, head over to the documentation page.
Materialize – A Material Design CSS Framework
Materialize – A Material Design CSS Framework
Google’s Material Design is aimed to work well on the Web and also on mobile apps. It’s gaining popularity with developers and if you want to adopt it too, there are many ways to implement Material Design on your site. You can use Polymer or Angular, or you can use Materialize.
Materialize is a CSS framework based on Material Design principles with Sass support for better development. It carries default styling for easy use, and has detailed documentation.
You can find a lot of useful components within: dialog, modal, date picker, material buttons, parallax, cards and more. It also has many navigation options you can choose from, such as drop down, slide in menu and tabs. Materialize also uses a 12-grid system with 3 default screen size media queries: a max width of 600px is a mobile device, 992px tablet device and anymore than 992px is considered a desktop device.
Recommended Reading: What’s In Foundation 4 Responsive Framework
Getting Started
There are two ways to get started with Materialize: use standard CSS or Sass. Both sources can be downloaded here. You can also get them with bower using the following command:
bower install materialize
After you get the sources, make sure to properly link them on your project file or compile the source if you are using the Sass version.
Read Also: How To Install, Update & Remove Web Libraries Easily With Bower
Features
In this section, I will explain some features that Materialize offers.
1. Sass Mixins
This framework carries Sass Mixins which automatically adds all browser prefixes when you write certain CSS properties. It’s a great feature to have to ensure compatibility across all browsers, with as little fuss, and code, as possible.
Take a look at the following animation properties:
-webkit-animation: 0.5s;
-moz-animation: 0.5s;
-o-animation: 0.5s;
-ms-animation: 0.5s;
animation: 0.5s;
Those lines of code can be rewritten with a single line of Sass mixin like so:
@include animation(.5s);
There are about 19 main mixins available. To see the full list, head over to the Sass category in the MIXINS tab.
2. Flow Text
While other frontend frameworks use fixed text, Materialize implements truly responsive text. Text size and line height are also scaled responsively to maintain readability. When it comes to smaller screens, the line height is scaled larger.
To use Flow Text, you can simply add the flow-text class on your desired text. For instance:
<p class="flow-text">This is Flow Text.</p>
Checkout the demo here on the Flow Text section.
3. Ripple effect with Waves
Material Design also comes with interactive feedback, one notable example is the ripple effect. In Materialize, this effect is called Waves. Basically when users click or tap/touch a button, card or any other element, the effect appears. Waves can be easily created by adding waves-effect class onto your elements.
This snippet gives you the waves effect.
<a href="#" class="btn waves-effect">Submit</a>
The ripples are grey by default. But in a situation where you have a dark color background, you may want to change the color. To add a different color, just add waves-(color) to the element. Replace the "(color)" with a name of a color.
<a href="#" class="btn waves-effect waves-light">Submit</a>
You can choose from 7 colors: light, red, yellow, orange, purple, green and teal. You can always create or customize your own colors if those colors don’t fit your needs.
4. Shadow
To deliver relationships between elements, Material Design recommend using elevation on the surfaces. Materialize delivers on this principle with its z-depth-(number) class. You can determine the shadow depth by changing the (number) from 1 to 5:
<div class="card">
<p>Shadow depth 3</p>
<p class="z-depth-3"></p>
</div>
All shadow depths are demonstrate with the image below.
5. Buttons and Icons
In Material Design there are three main button types: raised button, fab (floating action button) and flat button.
(1) Raised button
The raised button is the default button. To create this button, just add a btn class to your elements. If you want to give it the wave effect when clicked or pressed, go with this:
<a href="#" class="btn waves-effect waves-light">Button</a>
Alternatively, you can also give the button an icon to the left or the right of the text. For the icon, you will need to add custom <i> tag with the icon class name and position. For instance:
<a href="#" class="btn waves-effect waves-light"><i class="mdi-file-file-download left"></i>Download</a>
In the above snippet we use mdi-file-file-download class for the download icon. There are about 740 different icons you can use. To see them head over to the Sass page in the Icons tab.
(2) Floating Button
A floating button can be created by appending btn-floating class and your desired icon. For instance:
<a href="#" class="btn-floating waves-effect waves-light"><i class="mdi-content-send"></i></a>
In Material Design, the flat button is often used within the dialog box. To create it, just add btn-flat to your element like so:
<a href="#" class="btn-flat waves-effect waves-red">Decline</a>
Additionally, buttons can be disabled with the disabled class and made larger using btn-large class.
6. Grid
Materialize uses a standard 12-column responsive grid system. The responsiveness is divided into three parts: small (s) for mobile, medium (m) for tablet and large (l) for desktop.
To create columns, use s, m or l to indicate the size, followed by the grid number. For example, when you want to create a half sized layout for mobile device then you should include an s6 class into your layout. s6 stands for small-6 which means 6 column on small device.
You must also include a col class in the layout you create and put it inside an element which has the row class. This is so the layout could be put into columns properly. Here’s an example:
<div class="row">
<div class="col s12">I have 12-columns or full width here</div>
<div class="col s4">4-columns (one-third) here</div>
<div class="col s4">4-columns (one-third) here</div>
<div class="col s4">4-columns (one-third) here</div>
</div>
Here’s the results:
By default, col s12 is fixed-size and optimized for all screen size, basically the same as col s12 m12 l12. But if you want to specify the size fo the columns for different devices. All you need to do is to list the additional sizes like so:
<div class="row">
<div class="col s12">My width always has 12 columns everywhere</div>
<div class="col s12 m6 l9">I have 12 columns on mobile, 6 on tablet and 9 on desktop</div>
</div>
Here’s what this looks like:
Those are just a few features of Materialize. To learn more about their other features, head over to the documentation page.
Materialize – A Material Design CSS Framework
Subscribe to:
Posts (Atom)