materializecss & sass
TRANSCRIPT
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