slice/index.html at master · dope/slice · 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width">
  <title>Slice</title>
  <link rel="stylesheet" type="text/css" href="css/slice.css">
  <link rel="stylesheet" type="text/css" href="css/demo.css">

</head>
<body>

  <hgroup>
    <h1>Slice</h1>
    <h3 class="splitter">A simple collection of web components</h3>
  </hgroup>

  <!-- Default Text Inputs -->
  <input class="default-input" type="text" placeholder="Default Text">
  <input class="default-input rounded" type="text" placeholder="Default Rounded Text">

  <!-- Textarea -->
  <textarea placeholder="Default Textarea" class="default-input" cols="30" rows="5"></textarea>
  <textarea placeholder="Default Textarea" class="default-input rounded" cols="30" rows="5"></textarea>

  <!-- Input with Labels -->
  <label class="cf">
    <span class="label-icon"><i class="fa fa-user"></i></span>
    <input class="default-input label-input" type="text" placeholder="Default Text">
  </label>

  <!-- Dropdown menus -->
  <select class="default-input option-menu">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
    <option value="option-4">Option 4</option>
  </select>

  <select class="default-input option-menu rounded">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
    <option value="option-4">Option 4</option>
  </select>

  <!-- Default Submit Inputs -->
  <input class="btn" type="submit">
  <input class="btn blue" type="submit">
  <input class="btn green" type="submit">
  <input class="btn red" type="submit">
  <input class="btn orange" type="submit">
  <input class="btn yellow" type="submit">
  <input class="btn purple" type="submit">
  <input class="btn dark" type="submit">

  <div class="divider"></div>

  <input class="btn rounded" type="submit">
  <input class="btn blue rounded" type="submit">
  <input class="btn green rounded" type="submit">
  <input class="btn red rounded" type="submit">
  <input class="btn orange rounded" type="submit">
  <input class="btn yellow rounded" type="submit">
  <input class="btn purple rounded" type="submit">
  <input class="btn dark rounded" type="submit">

  <div class="divider"></div>

  <!-- Full width buttons -->
  <input class="btn full" type="submit">
  <input class="btn blue full" type="submit">
  <input class="btn green full" type="submit">
  <input class="btn red full" type="submit">
  <input class="btn orange full" type="submit">
  <input class="btn yellow full" type="submit">
  <input class="btn purple full" type="submit">
  <input class="btn dark full" type="submit">

  <div class="divider"></div>

  <input class="btn full rounded" type="submit">
  <input class="btn blue full rounded" type="submit">
  <input class="btn green full rounded" type="submit">
  <input class="btn red full rounded" type="submit">
  <input class="btn orange full rounded" type="submit">
  <input class="btn yellow full rounded" type="submit">
  <input class="btn purple full rounded" type="submit">
  <input class="btn dark full rounded" type="submit">

  <div class="divider"></div>

  <!-- Buttons with Icons -->
  <button class="btn btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn blue btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn green btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn red btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn orange btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn yellow btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn purple btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn dark btn-icon"><i class="fa fa-heart"></i></button>


  <div class="divider"></div>

  <button class="btn btn-icon"><i class="fa fa-bell"></i> Button</button>
  <button class="btn blue btn-icon"><i class="fa fa-bell"></i> Button</button>
  <button class="btn green btn-icon"><i class="fa fa-bell"></i> Button</button>
  <button class="btn red btn-icon"><i class="fa fa-bell"></i> Button</button>
  <button class="btn orange btn-icon"><i class="fa fa-bell"></i> Button</button>
  <button class="btn yellow btn-icon"><i class="fa fa-bell"></i> Button</button>
  <button class="btn purple btn-icon"><i class="fa fa-bell"></i> Button</button>
  <button class="btn dark btn-icon"><i class="fa fa-bell"></i> Button</button>

  <div class="divider"></div>

  <button class="btn btn-icon rounded"><i class="fa fa-bell"></i> Button</button>
  <button class="btn blue btn-icon rounded"><i class="fa fa-bell"></i> Button</button>
  <button class="btn green btn-icon rounded"><i class="fa fa-bell"></i> Button</button>
  <button class="btn red btn-icon rounded"><i class="fa fa-bell"></i> Button</button>
  <button class="btn orange btn-icon rounded"><i class="fa fa-bell"></i> Button</button>
  <button class="btn yellow btn-icon rounded"><i class="fa fa-bell"></i> Button</button>
  <button class="btn purple btn-icon rounded"><i class="fa fa-bell"></i> Button</button>
  <button class="btn dark btn-icon rounded"><i class="fa fa-bell"></i> Button</button>

  <div class="divider"></div>

  <button class="btn rounded btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn blue rounded btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn green rounded btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn red rounded btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn orange rounded btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn yellow rounded btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn purple rounded btn-icon"><i class="fa fa-heart"></i></button>
  <button class="btn dark rounded btn-icon"><i class="fa fa-heart"></i></button>

  <div class="divider"></div>

  <!-- Radio Button -->
  <input class="blue" type="radio" name="hi">
  <input class="green" type="radio" name="hi" checked>
  <input class="red" type="radio" name="hi">
  <input class="orange" type="radio" name="hi">
  <input class="yellow" type="radio" name="hi">
  <input class="purple" type="radio" name="hi">
  <input class="dark" type="radio" name="hi">

  <div class="divider"></div>

  <!-- Checkbox -->
  <input class="blue" type="checkbox" name="hi">
  <input class="green" type="checkbox" name="hi" checked>
  <input class="red" type="checkbox" name="hi">
  <input class="orange" type="checkbox" name="hi">
  <input class="yellow" type="checkbox" name="hi">
  <input class="purple" type="checkbox" name="hi">
  <input class="dark" type="checkbox" name="hi">

  <div class="divider"></div>

  <!-- Legend -->
  <fieldset>
    <legend>Legend:</legend>
    <input class="default-input rounded" type="text" placeholder="Default Text">
    <input class="default-input rounded" type="text" placeholder="Default Rounded Text">
    <textarea class="default-input" cols="30" rows="10"></textarea>
    <button class="btn rounded blue full padding-bigger">Submit</button>
  </fieldset>

  <div class="divider"></div>

  <!-- Typography -->
  <h1>Header 1</h1>
  <p>This is a paragraph.</p>

  <h2>Header 2</h2>
  <p>This is a paragraph.</p>

  <h3>Header 3</h3>
  <p>This is a paragraph.</p>

  <h4>Header 4</h4>
  <p>This is a paragraph.</p>

  <h5>Header 5</h5>
  <p>This is a paragraph.</p>

  <h6>Header 6</h6>
  <p>This is a paragraph.</p>


  <!-- source button -->
  <hr>
  <br>
  <a class="btn float-center green color-light" href="http://github.com/dope/slice">View Source</a>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-50003158-1', 'dope.github.io');
    ga('send', 'pageview');

  </script>
</body>
</html>