PowerPoint Presentation

MaterializeA modern responsive front-end framework based on Material Design

Freelance Web Developer/UI DesignerGuy Romelle Magayano

Co-Founder, Project Angel Digital Creative Co.

1

Material DesignCreated and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform

2

PrinciplesMaterial Design is based on the following principles:

Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.Elements and components such as grids, typography, color, and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning, and focus.Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.

3

Team Behind Materialize

ALEX MARKKEVIN LOUIEALAN CHANGALVIN WANG* They are Information Systems students from Carnegie Mellon University

4

Get StartedStandard

This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass.

materialize/ |--css/ | |--materialize.css | |--font/ | |--material-design-icons/ | |--roboto/ | |--js/ | |--materialize.js | |--index.html (your code here)

5

Get StartedSASS

Also known as Syntactically Awesome Stylesheets, SASS contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option.

6

Get StartedSetup

Instead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components.

Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file.

At this point you can link this newly outputted file in your HTML page.

materialize/ |--css/ | |--materialize.css (compiled from scss/materialize.scss) | |--font/ | |--material-design-icons/ | |--roboto/ | |--js/ | |--materialize.js | |--scss/ | |--materialize.scss | |--components/ | |--index.html (your code here)

7

HTML Setup

8

CSSColor GridHelpersMediaSASSShadowTableTypographyThis is a card panel with a teal lighten-2 class

This is a card panel with dark blue text

Background ColorColor

9

CSSColor GridHelpersMediaSASSShadowTableTypography

1 2 3 4 5 6 7 8 9 10 11 12

Grid Structure

Section 1 Stuff

Section 2 Stuff

Section 3 Stuff

10

CSSColor GridHelpersMediaSASSShadowTableTypographyAlignmentHiding ContentFormattingVertical Align: Add .valign-wrapper class to the container.Text Align: Choose from .left-align, .right-align, and .center-align classes.Quick Floats: Choose from either .left or .right class. Use !important in css to avoid issues .hide hidden for all devices.hide-on-small-only hidden for mobile only.hide-on-med-only hidden for tablet only.hide-on-med-and-down hidden for tablet only.hide-on-med-and-up hidden for tablet and above.hide-on-large-only hidden for desktop onlyTruncation: To truncate long lines of text in an ellipsis, add .truncate class to the tag which contains the text.Hover: .hoverable is a hover class that adds an animation for box shadow. It can be used on most elements, but meant for use on cards.

11

CSSColor GridHelpersMediaSASSShadowTableTypographyImagesResponsive Images: To make images resize responsively to page width, add .responsive-img class to your image tag. Circular Images: To make images appear circular, simply add .circle class to themVideosResponsive Embeds: To make your embeds responsive, merely wrap them with a containing div which has the .video-container class

If your video does not have video controls, add .no-controls class to the video container.Responsive VideosTo make your HTML5 Videos responsive just add the .responsive-video class to the video tag.

12

CSSColor GridHelpersMediaSASSShadowTableTypographyWhen using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in _variables.scss._variable.scss

$primary-color: color("materialize-red", "lighten-2") !default;$primary-color-light: false !default;$primary-color-dark: false !default;@if not $primary-color-light { $primary-color-light: lighten($primary-color, 15%);}@if not $primary-color-dark { $primary-color-dark: darken($primary-color, 15%);}$secondary-color: color("teal", "lighten-1") !default;$success-color: color("green", "base") !default;$error-color: color("red", "base") !default;$link-color: color("light-blue", "darken-1") !default;

/*** More variables not shown here.. ***/_variable.scss

$primary-color: color("materialize-red", "lighten-2") !default;$primary-color-light: lighten($primary-color, 15%) !default;$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("teal", "lighten-1") !default;$success-color: color("green", "base") !default;$error-color: color("red", "base") !default;$link-color: color("light-blue", "darken-1") !default;

/*** More variables not shown here.. ***/Original VersionModified Version

13

CSSColor GridHelpersMediaSASSShadowTableTypographyIn material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.You can easily apply this shadow effect by adding .z-depth-2 class to an HTML tag.

Alternatively you can extend any of these shadows with SASS using @extend .z-depth-2.

A z-depth-0 can be used to remove shadows from elements that have z-depths by default.For Instance:

z-depth-1

z-depth-2

z-depth-3

z-depth-4

z-depth-5

Output

14

CSSColor GridHelpersMediaSASSShadowTableTypographyBorderless TableBordered TableAdd .bordered class to the table tag for a bordered tableStriped TableAdd .striped class to the table tag for a striped tableHoverable TableAdd .hoverable class to the table tag for a hoverable tableTables are borderless by default.Centered TableAdd .centered class to the table tag to center align all the text in the tableResponsive TableAdd .responsive-table class to the table tag to make the table horizontally scrollable on smaller screen widths.

15

CSSColor GridHelpersMediaSASSShadowTableTypographyRoboto 2.0The standard font Material Design uses is Roboto. It comes with 5 different font weights you can use: 200, 300, 400, 500, 600.Removing Roboto: Simply change the font stack by modifying the code below to your liking and add it to your custom css/scss.For Instance:

html { font-family: GillSans, Calibri, Trebuchet, sans-serif;} HeadersWe provide some basic styling on header tags.BlockquotesBlockquotes are mainly used to give emphasis to a quote or citation. You can also use these for some extra text hierarchy and emphasis.For Instance:

This is an example quotation that uses the blockquote tag. Flow TextFlow text fluidly scales text size and line-height to optimize readability for the user. Line length stays between 45-80 characters and line height scales to be larger on smaller screens.

To use flow-text on a body of text, simply just add the .flow-text class to a tag.

16

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloader

Badges in CollectionsBadges in Dropdown

Raised Button

Floating Button

Flat Button

Submit Button

Large ButtonDisabled Buttons

17

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloaderBasic Card

Image Card

Card Reveal

Card SizesComes with 3 options: small, medium, large.Small limits cards height to 300px. Medium is about 400px while large up to 500px.Card PanelFor a simpler card with less markup, try using a card panel which just has padding and a shadow effect

Card Panel Example

18

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloaderCollections allow you to group list objects together.Basic

Links

HeadersSecondary Content

AvatarDismissableYou can just add the .dismissable class to enable each collection item to be swiped away. This is only for touch enabled devices.

19

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloaderFooter are a great way to organize a lot of site navigation and information at the end of the page.Basic

Sticky Footerbody { display: flex; min-height: 100vh; flex-direction: column;}

main { flex: 1 0 auto;}This always stays on the bottom of the page regardless of how little content is on the page. However, this footer will be pushed down if there is a lot of content, so it is different from a fixed footer. Add the following code to your CSS file:

20

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloaderForms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.Input Fields

Icon Prefixes

Error or Success MessagesTextarea

SelectAdditional Featuresradio buttons, checkboxes, switches, file input, range, date picker, and character counter

21

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloaderWe have included 740 Material Design Icons courtesy of Google.

22

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloaderThe navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.

Right Aligned LinksLeft Aligned Links

Centering the Logo

Other Features- Fixed navbar- Navbar Dropdown- Icon Links- Search Bar- Mobile Collapse Button (with the "Hamburger" icon)Add pagination links to help split up your long content into shorter, easier to understand blocks.

23

ComponentsBadgesButtonsCardsCollectionsFooter FormsIconsNavbarPaginationPreloaderIf you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.Linear

Determinate

IndeterminateCircular

Circular Flashing Colors

24

JavaScript- Collapsible- Dialogs- Dropdown- Media- Modals- Parallax- Pushpin- ScrollFire- ScrollSpy- SideNav- Tabs- Transitions- WavesFor more information and usage, check MaterializeCSS documentation at:

http://materializecss.com/

25

Thank YouAny Questions?

26