Tuesday, March 7, 2017
Materialize - Useful Resources
If you want to list down your website, book or any other resource on
this page then please contact at webmaster@tutorialspoint.com
Websites on Materialize
- Materialize - Materialize Official home page
Materialize - Discussion
Materialize is a UI component library created with CSS, JavaScript,
and HTML. Materialize UI components helps in constructing attractive,
consistent, and functional web pages and web apps while adhering to
modern web design principles like browser portability, device
independence, and graceful degradation. It helps in creating faster,
beautiful, and responsive websites. It is inspired from Google Material
Design.
Monday, March 6, 2017
Material Design Lite - Overview
What is Material Design Lite?
Material Design Lite, MDL is a UI component library created with CSS, JavaScript, and HTML. MDL UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.Material Design Lite - Environment Setup
How to Use Material Design Lite??
There are two ways to use Material Design Lite:- Local Installation - You can download the material.{primary}-{accent}.min.css and material.min.js files on your local machine and include it in your HTML code.
- CDN Based Version - You can include the
material.{primary}-{accent}.min.css and material.min.js files into your
HTML code directly from the Content Delivery Network (CDN).
Material Design Lite - Layouts
HTML5 has the following container elements:
- <div> - Provides a generic container to HTML content.
- <header> - Represents the header section.
- <footer> - Represents the footer section.
- <article> - Represents articles.
- <section> - Provides a generic container for various types of sections.
Material Design Lite - Grids
The Material Design Lite (MDL) grid is a component for laying out
content for varying screen sizes. The MDL grid is defined and enclosed
by a container/div element. A grid has 12 columns in the desktop size
screen, 8 in the tablet size screen, and 4 in the phone size screen,
where each size have predefined margins and gutters. Cells are laid out
in sequential manner in a row, in the order they are defined, with
following exceptions:
Material Design Lite - Tabs
The Material Design Lite (MDL) tab component is a user interface
component which helps to show multiple screens in a single space in
exclusive manner.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the tabs. The below table mentions the available classes and their effects.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the tabs. The below table mentions the available classes and their effects.
Material Design Lite - Footers
An MDL footer component comes in two primary forms: mega-footer and
mini-footer. ega-footer contains more complex content than mini-footer. A
mega-footer can represent multiple sections of content which are
separated by horizontal rules, whereas a mini-footer presents a single
section of content. Both footer typically contains both informational
and clickable content, such as links.
Material Design Lite - Badges
An MDL badge component is a onscreen notification which can be a
number or icon. It is generally used to emphasize the number of items.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the badges. The below table mentions the available classes and their effects.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the badges. The below table mentions the available classes and their effects.
Material Design Lite - Buttons
The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the buttons. The below table
mentions the available classes and their effects.
Material Design Lite - Cards
The MDL
provides various CSS classes to apply various predefined visual and
behavioral enhancements to the display various types of cards. The below
table mentions the available classes and their effects.
Subscribe to:
Posts (Atom)