materialize-css
Version:
Builds Materialize distribution packages
223 lines (169 loc) • 4.17 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Documentation - Materialize</title>
<!-- CSS -->
<link href="bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<style type="text/css">
</style>
<!-- Materialize is already included -->
<label class="material-checkbox">
Check
<input type="checkbox">
</label>
<input type="checkbox" id="check">
<label for="check">Check</label>
<p class="flow-text">One 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.
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large mdi-editor-mode-edit"></i>
</a>
<ul>
<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
<li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
<li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
</ul>
</div>
</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<p>yo</p>
<script src="bin/jquery-2.1.1.min.js"></script>
<!-- <script src="js/jquery.timeago.js"></script> -->
<!-- <script src="js/jquery.easing.1.3.js"></script> -->
<!-- <script src="js/velocity.min.js"></script> -->
<!-- <script src="js/global.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/materialbox.js"></script>
<script src="js/forms.js"></script>
<script src="js/tabs.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/toasts.js"></script>
<script src="js/scrollFire.js"></script> -->
<!-- <script src="js/leanModal.js"></script> -->
<script src="bin/materialize.js"></script>
<!-- <script src="js/init.js"></script> -->
<script type="text/javascript">
$( document ).ready(function() {
// $(".button-collapse").sideNav({
// edge: 'right', menuWidth: 300
// });
// $('.modal-trigger').leanModal({dismissible: false});
// $('select').material_select();
});
</script>
</body>
</html>