tutorials_as_code/talks-articles/www/materializecss/example02.html at master · abhishekkr/tutorials_as_code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <!-- Compiled and minified CSS
    <link rel="stylesheet" href="/assets/materialize-0.100.2.min.css">
 -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title> Materialize Sandbox</title>
  </head>
  <body>
    <h1>Text and Image Helpers</h1>
    <div class="container">
      <h2>Stick to border</h2>
      <div>
        <h5>alignments</h5>
        <p class="teal yellow-text left-align">West</p>
        <p class="teal yellow-text right-align">East</p>
        <p class="teal yellow-text center-align">Mid</p>
      </div>
      <br/>

      <div>
        <h5>quick floats</h5>
        <p class="left">Swim</p>
        <p class="right">Fly</p>
        <div class="clearfix"/> <!-- clearing the float -->
      </div>
      <br/>

      <hr/>

      <h2>Hide Content</h2>
      <div>
        <h5>based on form-factor</h5>
        <p class ="hide">it's not all devices</p>
        <p class ="hide-on-small-only">it's not mobile devices</p>
        <p class ="hide-on-med-only">it's not tablet devices</p>
        <p class ="hide-on-med-and-down">it's not tablet and smaller devices</p>
        <p class ="hide-on-med-and-up">it's not tablets and higher devices</p>
        <p class ="hide-on-large-only">it's not desktop devices</p>
      </div>
      <div>
        <h5>on content-length</h5>
        <p class="truncate">Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.</p>
      </div>

      <hr/>

      <h2>Effects</h2>
      <div>
        <h5>hoverable</h5>
        <p class ="blue yellow-text hoverable">I'm allergic to mouse.</p>
      </div>
      <div>
        <h5>pulse</h5>
        <p class ="brown yellow-text pulse">Pulse is marquee for new bad taste.</p>
      </div>
      <div>
        <h5>shadow</h5>
        <p class ="z-depth-1">Top.</p>
        <p class ="z-depth-2">Second.</p>
        <p class ="z-depth-3">Next.</p>
        <p class ="z-depth-4">Then.</p>
        <p class ="z-depth-5">Lastly.</p>
      </div>
      <div>
        <h5>flow-text</h5>
        <p class="flow-text">Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.</p>
      </div>

      <hr/>

      <h2>Images</h2>
      <div>
        <h5>responsive</h5>
        <img class="responsive-img" src="http://materializecss.com/images/responsive.png"></img>
        <img class="responsive-img circle" src="http://materializecss.com/images/responsive.png"></img>
      </div>

      <hr/>
    </div>

    <!-- Compiled and minified JavaScript -->
    <script type="text/javascript" src="/assets/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <!--
      <script src="/assets/materialize-0.100.2.min.js"></script>
    -->
  </body>
</html>