framework/demo.html at master · ibbyib/framework · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
	<meta name="description" content="   ">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Framework Demo</title>
  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/javvy.js"></script>
  <link rel="stylesheet" href="css/frames.css" />
  <link rel="stylesheet" href="css/demo.css" />
  <!--[if lt IE 9]>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
  <![endif]--> <!-- -->
</head>
<body>
  <div class="fixedheader">
    Work in progress!!
  </div>
  <div class="container">
    <h1 class="logo-demo">Framework</h1>
    <h5 class="light subt">A Project by Dylan Dixon, Håkon Underbakke, Adam Sackfield, E Vanderhooft, Sam Mularczyk, David Stanley & Tony Wolfs</h5>
  </div>
  <div class="container">
    <h1><span class="light">Header</span> Header <strong>Header</strong></h1>
    <h2><span class="light">Header</span> Header <strong>Header</strong></h2>
    <h3><span class="light">Header</span> Header <strong>Header</strong></h3>
    <h4><span class="light">Header</span> Header <strong>Header</strong></h4>
    <h5><span class="light">Header</span> Header <strong>Header</strong></h5>
    <p>Pellentesque habitant morbi tristique <strong>senectus et netus</strong> et malesuada fames ac <i>turpis egestas</i>. Vestibulum tortor quam, <a href="#">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p class="quote">
      Pellentesque habitant morbim,<br />
      tristique senectus et netus et malesuada,<br />
      fames ac turpis egestas.
    </p>
  </div>
  <div class="container">
    <h2><strong>Example #1</strong> - Forms & Tables</h2>
    <div class="row">
    <div class="column half">
    <table>
      <thead>
        <tr>
            <th colspan="2">Name Database</th>
        </tr>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>James</td>
            <td>Smith</td>
        </tr>
        <tr>
            <td>Bill</td>
            <td>Washington</td>
        </tr>
        <tr>
            <td>Jim</td>
            <td>Anon</td>
        </tr>
        <tr>
            <td>Bobby</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td>Jacob</td>
            <td>Fischer</td>
        </tr>
        <tr>
            <td>Miley</td>
            <td>Smith</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
            <td colspan="2">All names are random</td>
        </tr>
      </tfoot>
    </table>
    </div>
    <div class="column half">
      <form action="#">
        <table class="nostyle">
          <tr>
            <td><label for="username">Username</label></td>
            <td><input type="text" name="username" /></td>
          </tr>
          <tr>
            <td><label for="password">Password</label></td>
            <td><input type="password" name="password" /></td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="submit" value="Log in" />
            </td>
          </tr>
        </table>
      </form>
    </div>
  </div>
  </div>
  <div class="container">
    <h2><strong>Example #2</strong> - Blog post</h2>

    <article>
      <header>
          <h3>Lorem Ipsum</h3>
          <h5 class="d-t">April 3rd - 2014</h5>
       </header>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <ol>
             <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
             <li>Aliquam tincidunt mauris eu risus.</li>
             <li>Vestibulum auctor dapibus neque.</li>
          </ol>
	       <footer>
           Written by Håkon Underbakke [social icons]
         </footer>
    </article>

    <article>
      <header>
          <h3>Lorem Ipsum</h3>
          <h5 class="d-t">April 3rd - 2014</h5>
       </header>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
         <footer>
           Written by Håkon Underbakke [social icons]
         </footer>
    </article>
  </div>
  <div class="container">

    <h2><strong>Example #3</strong> - Buttons</h2>
    <h4>Use <strong>.btn</strong> as well as the classes on the links</h4>
    <p>
    <a href="#" class="btn unline">.unline</a>
    <a href="#" class="btn filr">.filr</a>
    <a href="#" class="btn filrb">.filrb</a>
    <a href="#" class="btn sqro">.sqro</a>
    </p>
    <h3><strong>In Use:</strong></h3>
    <p>
      <div id="ppmsg">
        <header>Close document<span>X</span></header>
        <p>
          Do you wish to save before closing?
        </p>
        <a href="#" class="btn filr sml">Save</a>
        <a href="#" class="btn filrb sml red">Don't Save</a>
        <div class="clear"></div>
      </div>
      <div id="searchex">
        <table class="nostyle" id="searx">
          <tr>
            <td>
              <input type="text" placeholder="Google" />
            </td>
            <td>
              <a href="#" class="btn sqro sml">Search</a>
            </td>
          </tr>
        </table>
      </div>
    </p>
    <p><button class="button-rounded">Yes</button><button class="button-rounded_pos">no</button><button class="button-rounded_neg">perhaps</button><button class="button-rounded_colorful">LOrem ipsum dolor.</button>
    </p>
  </div>
  <div class="container">
    <div class="nav">
      <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>About</li></a>
        <a href="#"><li>Contact</li></a>
      </ul>
    </div>
  	<h1><div class="title">Yeeaah</div><span class="subtitle">this is a subtitle whee</span></h1>
    <div class="grid_5-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique, erat vel condimentum porta, nisl diam auctor dui, sit amet viverra nisi mi quis neque. Duis non porttitor tortor. Proin dapibus elit ac augue luctus scelerisque. Fusce rutrum volutpat felis. Nunc sed leo placerat leo facilisis tincidunt. Etiam et aliquam lacus, vel convallis augue. Curabitur malesuada interdum enim id convallis. Donec euismod et felis ac rutrum. Ut vitae interdum est. In magna enim, rutrum sed bibendum vel, dictum ultricies velit.</p></div><div class="grid_3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique, erat vel condimentum porta, nisl diam auctor dui, sit amet viverra nisi mi quis neque. Duis non porttitor tortor. Proin dapibus elit ac augue luctus scelerisque. Fusce rutrum volutpat felis. Nunc sed leo placerat leo facilisis tincidunt. Etiam et aliquam lacus, vel convallis augue.</p></div><div class="grid_9"><p>Fusce tristique, erat vel condimentum porta, nisl diam auctor dui, sit amet viverra nisi mi quis neque. Duis non porttitor tortor. Proin dapibus elit ac augue luctus scelerisque. Fusce rutrum volutpat felis. Nunc sed leo placerat leo facilisis tincidunt. Etiam et aliquam lacus, vel convallis augue.</p></div>

  </div>
  <div id="popupbox">
    Que function!
  </div>
  <div class="container">
  <h2><strong>Example #4</strong> - Cards</h2>
  <div class="card"><h1>This is an example of the cards</h1><br/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum ante non cursus mattis. Aliquam vestibulum magna a turpis vehicula pharetra.</p></div>
  <div class="card"><h1>This is an example of the cards</h1><br/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum ante non cursus mattis. Aliquam vestibulum magna a turpis vehicula pharetra.</p></div>
</body>
</html>