-
Typographyarrow_drop_down
delete zoom_out_map
Blockquote
This is an example quotation that uses the blockquote tag.
Here is another line to make it look bigger.delete zoom_out_mapFlow Text
Toggle flow-textOne common flaw we've seen in many frameworks is a lack of support for truly responsive text. While elements on the page resize fluidly, text still resizes on a fixed basis. To ameliorate this problem, for text heavy pages, we've created a class that 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 see Flow Text in action, slowly resize your browser and watch the size of this text body change! Use the button above to toggle off/on flow-text to see the difference!
delete zoom_out_mapLanguage Markup
<blockquote> This is an example quotation that uses the blockquote tag. </blockquote>
-
Cardsarrow_drop_down
delete zoom_out_map
Basic Card
Card TitleI am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
delete zoom_out_mapImage Card
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
delete zoom_out_mapCard with FAB
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
delete zoom_out_mapHorizontal Card
I am a very simple card. I am good at containing small bits of information.
-
Tablesarrow_drop_down
delete zoom_out_map
Basic Table
Name Item Name Item Price Alvin Eclair $0.87 Alan Jellybean $3.76 Jonathan Lollipop $7.00 delete zoom_out_mapCentered Table
Name Item Name Item Price Alvin Eclair $0.87 Alan Jellybean $3.76 Jonathan Lollipop $7.00 delete zoom_out_mapCentered Highlighted
Name Item Name Item Price Alvin Eclair $0.87 Alan Jellybean $3.76 Jonathan Lollipop $7.00 delete zoom_out_mapHighlighted Table
Name Item Name Item Price Alvin Eclair $0.87 Alan Jellybean $3.76 Jonathan Lollipop $7.00
MaterializeIt
An drag and drop HTML Page and Layout Builder designed for Materialize CSS.
What is MaterializeIt?MaterializeIt is an HTML and Javascript based drag and drop Page and Layout Builder designed for Materialize CSS Framework.It help to create Beginner and Advanced Web Developers to speed up the development using Materialize CSS.
How to use MaterializeIt Layout Builder?
If you are new to Materialize CSS Framework please follow these steps to create a working stand alone Materialize CSS Page Layout:
1.) First create an Index.html File.
2.) Insert this Code into your Index.html File.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<meta charset="utf-8">
<title>My Title | Built with MaterializeIt Layout Builder
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Load an icon library -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
</body>
<!-- Below here inside main you add your custom Layout Code -->
<main>
<!-- Add your custom Layout Code -->
<!-- End of your custom Layout Code -->
</main>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Auto Init Materialize Framework -->
<script> M.AutoInit(); </script>
</body>
</html>
3.) Save you Index.html File.
4.) Hit the clear button in the Navbar.
5.) Create your Page Layout and hit the Code Button in the Navbar.
6.) Now copy the Code inside the Textarea and insert it into your Index.html File.
7.) Save the Index.html File.
8.) Now run your Index.html File in IE / Chrome / Firefox / Opera or any other Web Browser.
