spuit 0.0.14.2 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/.npmignore +10 -6
  3. data/Gemfile.lock +1 -1
  4. data/README.md +20 -1
  5. data/assets/html/index.ejs +328 -0
  6. data/assets/javascripts/scripts.js +3 -3
  7. data/assets/stylesheets/styles.scss +8 -3
  8. data/dist/favicon.ico +0 -0
  9. data/dist/index.html +1 -323
  10. data/dist/javascripts/scripts.js +1 -1
  11. data/dist/stylesheets/styles.css +2 -2
  12. data/lib/spuit/version.rb +1 -1
  13. data/package.json +19 -18
  14. data/scss/{components → _}/_body.sass +0 -0
  15. data/scss/{components → _}/_form.sass +0 -0
  16. data/scss/{components → _}/_gist.sass +0 -0
  17. data/scss/{components → _}/_grids.sass +0 -0
  18. data/scss/{components → _}/_markdown.sass +0 -0
  19. data/scss/components/_button.scss +140 -0
  20. data/scss/components/_messages.scss +23 -0
  21. data/scss/components/{_shoulder.sass → _shoulder.scss} +6 -5
  22. data/scss/components/_split.scss +45 -0
  23. data/scss/components/_triangle.scss +50 -0
  24. data/scss/components/_wordwrap-fadeout.scss +22 -0
  25. data/scss/components/_wrap.scss +27 -0
  26. data/scss/elements/_dl.scss +40 -0
  27. data/scss/elements/_fieldset.scss +63 -0
  28. data/scss/elements/_hr.scss +39 -0
  29. data/scss/elements/_input.scss +35 -0
  30. data/scss/elements/_table.scss +102 -0
  31. data/scss/{components → includes}/_icon.scss +0 -0
  32. data/scss/spuit.scss +1 -4
  33. data/scss/variables/_timing-functions.scss +37 -0
  34. data/spuit.scss +1 -46
  35. data/webpack/css.webpack.config.js +37 -5
  36. data/webpack/js.webpack.config.js +13 -8
  37. data/yarn.lock +3390 -4480
  38. metadata +23 -22
  39. data/.editorconfig +0 -11
  40. data/scss/components/_button.sass +0 -116
  41. data/scss/components/_messages.sass +0 -18
  42. data/scss/components/_split.sass +0 -32
  43. data/scss/components/_triangle.sass +0 -40
  44. data/scss/components/_wordwrap-fadeout.sass +0 -19
  45. data/scss/components/_wrap.sass +0 -22
  46. data/scss/elements/_dl.sass +0 -30
  47. data/scss/elements/_fieldset.sass +0 -46
  48. data/scss/elements/_hr.sass +0 -36
  49. data/scss/elements/_input.sass +0 -27
  50. data/scss/elements/_table.sass +0 -58
  51. data/scss/variables/_timing-functions.sass +0 -37
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1bd2f96132838f9215a3f882d867fd9334533705958db1592ec452ccf1061a8b
4
- data.tar.gz: 0b4c803122dcae5eb8040e20dff9ae83218e47c9c7b36652c44738b93d103040
3
+ metadata.gz: d80b998757779fda873941f2410da3de6308dfb6a13dcde8e6e435dfd622ee09
4
+ data.tar.gz: 57f7468acf97e636863c4d593bd3b7c9547be98b6a012458d3949351c7f09c9b
5
5
  SHA512:
6
- metadata.gz: f27b73aa3e38f9a7058fcff5603955e8636528a947085721739981db4cc9149cf1f7c49bafa409482b8ea392fa3beef920b3d324c17472e7828fa513043964ae
7
- data.tar.gz: 7d97f379a525acecdf757a7a475d77c6c86383f2cc080e4f924b470a4d933ec86c193ffe7ece032b5165c5409f357da8c8992c88119700ac87d03f1ddea07fff
6
+ metadata.gz: 43eed2a2826712cf0604b53eb41688f54424da3c3cc6920f35a7725b1363b025699bc6011c8dcec1b202e3b244b97ef9373280e3c6d70699a08e3c40b18b3531
7
+ data.tar.gz: c2584433838ca64b11f27f82d3c7937dfef3490058441e2f2a7f83b2df8c04915fb8e893b65a484f30a16f37ff6796dcc66af945b44906b2d9a17bde710ac750
data/.npmignore CHANGED
@@ -1,9 +1,13 @@
1
- .sass-cache
2
- .DS_Store
3
- node_modules
4
- npm-debug.log
5
- dist/index.html
6
- assets/javascripts
1
+ .sass-cache
2
+ .DS_Store
3
+ assets
4
+ bin
5
+ design
6
+ dist
7
+ lib
8
+ node_modules
9
+ pkg
7
10
  webpack
11
+ npm-debug.log
8
12
  yarn.lock
9
13
  .editorconfig
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- spuit (0.0.14.1)
4
+ spuit (0.0.14.2)
5
5
  sass (~> 3.4)
6
6
  thor (~> 0.19)
7
7
 
data/README.md CHANGED
@@ -17,9 +17,20 @@ import:
17
17
  ``` styles.scss
18
18
  @import "node_modules/spuit/spuit";
19
19
  ```
20
+ ore
21
+
22
+ ``` styles.scss
23
+ @import "~spuit";
24
+ ```
20
25
 
21
26
  ## rails
22
27
 
28
+ import:
29
+
30
+ ``` styles.scss
31
+ @import "spuit";
32
+ ```
33
+
23
34
  ---
24
35
 
25
36
  For Development
@@ -33,6 +44,14 @@ $ yarn run dev
33
44
 
34
45
  ## deploy
35
46
 
47
+ npm:
48
+
49
+ ```
50
+ $ npm publish
51
+ ```
52
+
53
+ gem:
54
+
36
55
  ```
37
- $ yarn run deploy
56
+ $ rake release
38
57
  ```
@@ -0,0 +1,328 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title></title>
8
+
9
+ <link href="/stylesheets/styles.css" rel="stylesheet">
10
+ </head>
11
+ <body>
12
+
13
+ <div class="container">
14
+ <div class="row">
15
+ <div class="col-12">
16
+ <p>Spuit</p>
17
+ </div>
18
+ </div>
19
+ </div>
20
+
21
+ <div class="container">
22
+ <div class="row">
23
+ <div class="col-md-4">
24
+ <section class="demo-styles">
25
+ <h2>Text Styles</h2>
26
+ <h1>heading 1</h1>
27
+ <h2>heading 2</h2>
28
+ <h3>heading 3</h3>
29
+ <h4>heading 4</h4>
30
+ <h5>heading 5</h5>
31
+ <h6>heading 6</h6>
32
+ <p>paragraf <a href="#">link</a> <b>bold</b></p>
33
+ </section>
34
+ </div>
35
+ <div class="col-md-4">
36
+ <section class="demo-styles">
37
+ <h2>Utilities</h2>
38
+ <h3>word break</h3>
39
+ <p class="word-break">.word-break</p>
40
+ <br>
41
+ <p class="word-break-none">.word-break-none</p>
42
+ <h3>text-overflow</h3>
43
+ <p class="text-overflow">.text-overflow</p>
44
+
45
+ <h3>wordwrap-fadeout</h3>
46
+ <div class="wordwrap-fadeout">
47
+ <p>.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout</p>
48
+ </div>
49
+ </section>
50
+ </div>
51
+ <div class="col-md-4">
52
+ <section class="demo-styles">
53
+ <h2>button styles</h2>
54
+ <a href="#" class="button">Button</a>
55
+ <input type="submit" class="button" value="Button" />
56
+ <button type="button" class="button">Button</button>
57
+ <a href="#" class="button is-loading">Button</a>
58
+ <a href="#" class="button-semiflat">Button</a>
59
+ <a href="#" class="button-border">Button</a>
60
+ <a href="#" class="button-emboss">Button</a>
61
+ </section>
62
+
63
+ <section class="demo-styles">
64
+ <h2>icon styles</h2>
65
+ <i class="icon-hamburger"></i>
66
+ <i class="icon-twitter"></i>
67
+ <i class="icon-facebook"></i>
68
+ <i class="icon-hatena"></i>
69
+ </section>
70
+
71
+ </div>
72
+ </div>
73
+
74
+ <div class="row">
75
+ <div class="col-md-4">
76
+ <section class="demo-styles">
77
+ <h2>Form styles</h2>
78
+
79
+ <form>
80
+ <div class="fieldset">
81
+ <legend>お名前</legend>
82
+ <div>
83
+ <input id="field-text" placeholder="お名前" type="text">
84
+ </div>
85
+ </div>
86
+ <div class="fieldset">
87
+ <legend>お問い合わせ内容</legend>
88
+ <textarea cols="50" id="field-textarea" placeholder="お問い合わせ内容を入力下さい" rows="10"></textarea>
89
+ </div>
90
+ <div class="fieldset">
91
+ <legend>ラジオボタン(並列)</legend>
92
+ <ul class="reset-ul">
93
+ <li class="radio">
94
+ <input id="field-radio-0" name="field-radio" type="radio" value="0">
95
+ <label for="field-radio-0">
96
+ ラジオボタン 0
97
+ </label>
98
+ </li>
99
+ <li class="radio">
100
+ <input id="field-radio-1" name="field-radio" type="radio" value="1">
101
+ <label for="field-radio-1">
102
+ ラジオボタン 1
103
+ </label>
104
+ </li>
105
+ <li class="radio">
106
+ <input id="field-radio-2" name="field-radio" type="radio" value="2">
107
+ <label for="field-radio-2">
108
+ ラジオボタン 2
109
+ </label>
110
+ </li>
111
+ </ul>
112
+ </div>
113
+ <div class="fieldset">
114
+ <legend>ラジオボタン(入れ子)</legend>
115
+ <ul class="reset-ul">
116
+ <li class="radio-inside">
117
+ <label for="field-radio-inside-0">
118
+ <input id="field-radio-inside-0" name="field-radio-inside" type="radio" value="0">
119
+ <span>
120
+ ラジオボタン 0
121
+ </span>
122
+ </label>
123
+ </li>
124
+ <li class="radio-inside">
125
+ <label for="field-radio-inside-1">
126
+ <input id="field-radio-inside-1" name="field-radio-inside" type="radio" value="1">
127
+ <span>
128
+ ラジオボタン 1
129
+ </span>
130
+ </label>
131
+ </li>
132
+ <li class="radio-inside">
133
+ <label for="field-radio-inside-2">
134
+ <input id="field-radio-inside-2" name="field-radio-inside" type="radio" value="2">
135
+ <span>
136
+ ラジオボタン 2
137
+ </span>
138
+ </label>
139
+ </li>
140
+ </ul>
141
+ </div>
142
+ <div class="fieldset">
143
+ <legend>チェックボックス(並列)</legend>
144
+ <ul class="reset-ul">
145
+ <li class="checkbox">
146
+ <input id="field-checkbox-0" type="checkbox" value="0">
147
+ <label for="field-checkbox-0">
148
+ チェックボックス 0
149
+ </label>
150
+ </li>
151
+ <li class="checkbox">
152
+ <input id="field-checkbox-1" type="checkbox" value="1">
153
+ <label for="field-checkbox-1">
154
+ チェックボックス 1
155
+ </label>
156
+ </li>
157
+ <li class="checkbox">
158
+ <input id="field-checkbox-2" type="checkbox" value="2">
159
+ <label for="field-checkbox-2">
160
+ チェックボックス 2
161
+ </label>
162
+ </li>
163
+ </ul>
164
+ </div>
165
+ <div class="fieldset">
166
+ <legend>チェックボックス(入れ子)</legend>
167
+ <ul class="reset-ul">
168
+ <li class="checkbox-inside">
169
+ <label for="field-checkbox-inside-0">
170
+ <input id="field-checkbox-inside-0" type="checkbox" value="0">
171
+ <span>
172
+ チェックボックス 0
173
+ </span>
174
+ </label>
175
+ </li>
176
+ <li class="checkbox-inside">
177
+ <label for="field-checkbox-inside-1">
178
+ <input id="field-checkbox-inside-1" type="checkbox" value="1">
179
+ <span>
180
+ チェックボックス 1
181
+ </span>
182
+ </label>
183
+ </li>
184
+ <li class="checkbox-inside">
185
+ <label for="field-checkbox-inside-2">
186
+ <input id="field-checkbox-inside-2" type="checkbox" value="2">
187
+ <span>
188
+ チェックボックス 2
189
+ </span>
190
+ </label>
191
+ </li>
192
+ </ul>
193
+ </div>
194
+ <div class="fieldset">
195
+ <legend>スイッチ(チェックボックス)</legend>
196
+ <ul class="reset-ul">
197
+ <li>
198
+ <div class="switch">
199
+ <input id="field-checkbox-switch-0" type="checkbox" value="0">
200
+ <label for="field-checkbox-switch-0"></label>
201
+ </div>
202
+ </li>
203
+ </ul>
204
+ </div>
205
+ <div class="fieldset">
206
+ <legend>セレクトボックス</legend>
207
+ <div class="select">
208
+ <select id="field-select">
209
+ <option value="1">選択肢1</option>
210
+ <option value="2">選択肢2</option>
211
+ <option value="3">選択肢3</option>
212
+ </select>
213
+ </div>
214
+ </div>
215
+ <!-- <div class="fieldset">
216
+ <legend>ファイルアップロード</legend>
217
+ <div class="file-upload">
218
+ <input type="file" name="file-upload" id="file-upload">
219
+ <label for="file-upload">ファイルを選択する</label>
220
+ <span class="selected"></span>
221
+ </div>
222
+ </div> -->
223
+ <div class="fieldset">
224
+ <div class="button-group">
225
+ <input class="button" type="submit" value="送信">
226
+ <input class="button-border" type="reset" value="リセット">
227
+ </div>
228
+ </div>
229
+ </form>
230
+ </section>
231
+ </div>
232
+ <div class="col-md-4">
233
+ <section class="demo-styles">
234
+ <h2>Table styles</h2>
235
+ <table class="table">
236
+ <thead>
237
+ <tr>
238
+ <th>xxx</th>
239
+ <th>xxx</th>
240
+ <th>xxx</th>
241
+ </tr>
242
+ </thead>
243
+ <tbody>
244
+ <tr>
245
+ <td>xxx</td>
246
+ <td>xxx</td>
247
+ <td>xxx</td>
248
+ </tr>
249
+ <tr>
250
+ <td>xxx</td>
251
+ <td>xxx</td>
252
+ <td>xxx</td>
253
+ </tr>
254
+ <tr>
255
+ <td>xxx</td>
256
+ <td>xxx</td>
257
+ <td>xxx</td>
258
+ </tr>
259
+ </tbody>
260
+ </table>
261
+ <table class="table-line">
262
+ <thead>
263
+ <tr>
264
+ <th>xxx</th>
265
+ <th>xxx</th>
266
+ <th>xxx</th>
267
+ </tr>
268
+ </thead>
269
+ <tbody>
270
+ <tr>
271
+ <td>xxx</td>
272
+ <td>xxx</td>
273
+ <td>xxx</td>
274
+ </tr>
275
+ <tr>
276
+ <td>xxx</td>
277
+ <td>xxx</td>
278
+ <td>xxx</td>
279
+ </tr>
280
+ <tr>
281
+ <td>xxx</td>
282
+ <td>xxx</td>
283
+ <td>xxx</td>
284
+ </tr>
285
+ </tbody>
286
+ </table>
287
+ <table class="table-stripe">
288
+ <thead>
289
+ <tr>
290
+ <th>xxx</th>
291
+ <th>xxx</th>
292
+ <th>xxx</th>
293
+ </tr>
294
+ </thead>
295
+ <tbody>
296
+ <tr>
297
+ <td>xxx</td>
298
+ <td>xxx</td>
299
+ <td>xxx</td>
300
+ </tr>
301
+ <tr>
302
+ <td>xxx</td>
303
+ <td>xxx</td>
304
+ <td>xxx</td>
305
+ </tr>
306
+ <tr>
307
+ <td>xxx</td>
308
+ <td>xxx</td>
309
+ <td>xxx</td>
310
+ </tr>
311
+ </tbody>
312
+ </table>
313
+ </section>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="container pt-3">
319
+ <div class="row">
320
+ <div class="col-12">
321
+ <p><a href="https://github.com/is8r/spuit" target="_blank">github</a></p>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <script src="/javascripts/scripts.js"></script>
327
+ </body>
328
+ </html>
@@ -1,4 +1,4 @@
1
- const $ = require('jquery')
1
+ // const $ = require('jquery')
2
2
 
3
- $(function() {
4
- })
3
+ // $(function() {
4
+ // })
@@ -1,12 +1,14 @@
1
1
  @import '../../spuit';
2
2
  @import '../../scss/includes/grid';
3
+ @import '../../scss/components/wrap';
4
+ @import '../../scss/components/wordwrap-fadeout';
3
5
 
4
6
  @import 'styles/config/variables';
5
7
  @import 'styles/config/mixins';
6
8
 
7
- @include include-animations
8
- @include include-normalize
9
- @include include-grid
9
+ @include include-animations;
10
+ @include include-normalize;
11
+ @include include-grid;
10
12
 
11
13
  // basic styles
12
14
 
@@ -165,4 +167,7 @@ body {
165
167
  @include icon-hatena;
166
168
  }
167
169
 
170
+ .wordwrap-fadeout {
171
+ @include wordwrap-fadeout;
172
+ }
168
173
  }
Binary file
@@ -1,323 +1 @@
1
- <!DOCTYPE html>
2
- <html lang="ja">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <title></title>
8
-
9
- <link href="/stylesheets/styles.css" rel="stylesheet">
10
- </head>
11
- <body>
12
-
13
- <div class="container">
14
- <div class="row">
15
- <div class="col-12">
16
- <p>Spuit</p>
17
- </div>
18
- </div>
19
- </div>
20
-
21
- <div class="container">
22
- <div class="row">
23
- <div class="col-md-4">
24
- <section class="demo-styles">
25
- <h2>Text Styles</h2>
26
- <h1>heading 1</h1>
27
- <h2>heading 2</h2>
28
- <h3>heading 3</h3>
29
- <h4>heading 4</h4>
30
- <h5>heading 5</h5>
31
- <h6>heading 6</h6>
32
- <p>paragraf <a href="#">link</a> <b>bold</b></p>
33
- </section>
34
- </div>
35
- <div class="col-md-4">
36
- <section class="demo-styles">
37
- <h2>Utilities</h2>
38
- <h3>word break</h3>
39
- <p class="word-break">.word-break</p>
40
- <br>
41
- <p class="word-break-none">.word-break-none</p>
42
- <h3>text-overflow</h3>
43
- <p class="text-overflow">.text-overflow</p>
44
- </section>
45
- </div>
46
- <div class="col-md-4">
47
- <section class="demo-styles">
48
- <h2>button styles</h2>
49
- <a href="#" class="button">Button</a>
50
- <input type="submit" class="button" value="Button" />
51
- <button type="button" class="button">Button</button>
52
- <a href="#" class="button is-loading">Button</a>
53
- <a href="#" class="button-semiflat">Button</a>
54
- <a href="#" class="button-border">Button</a>
55
- <a href="#" class="button-emboss">Button</a>
56
- </section>
57
-
58
- <section class="demo-styles">
59
- <h2>icon styles</h2>
60
- <i class="icon-hamburger"></i>
61
- <i class="icon-twitter"></i>
62
- <i class="icon-facebook"></i>
63
- <i class="icon-hatena"></i>
64
- </section>
65
-
66
- </div>
67
- </div>
68
-
69
- <div class="row">
70
- <div class="col-md-4">
71
- <section class="demo-styles">
72
- <h2>Form styles</h2>
73
-
74
- <form>
75
- <div class="fieldset">
76
- <legend>お名前</legend>
77
- <div>
78
- <input id="field-text" placeholder="お名前" type="text">
79
- </div>
80
- </div>
81
- <div class="fieldset">
82
- <legend>お問い合わせ内容</legend>
83
- <textarea cols="50" id="field-textarea" placeholder="お問い合わせ内容を入力下さい" rows="10"></textarea>
84
- </div>
85
- <div class="fieldset">
86
- <legend>ラジオボタン(並列)</legend>
87
- <ul class="reset-ul">
88
- <li class="radio">
89
- <input id="field-radio-0" name="field-radio" type="radio" value="0">
90
- <label for="field-radio-0">
91
- ラジオボタン 0
92
- </label>
93
- </li>
94
- <li class="radio">
95
- <input id="field-radio-1" name="field-radio" type="radio" value="1">
96
- <label for="field-radio-1">
97
- ラジオボタン 1
98
- </label>
99
- </li>
100
- <li class="radio">
101
- <input id="field-radio-2" name="field-radio" type="radio" value="2">
102
- <label for="field-radio-2">
103
- ラジオボタン 2
104
- </label>
105
- </li>
106
- </ul>
107
- </div>
108
- <div class="fieldset">
109
- <legend>ラジオボタン(入れ子)</legend>
110
- <ul class="reset-ul">
111
- <li class="radio-inside">
112
- <label for="field-radio-inside-0">
113
- <input id="field-radio-inside-0" name="field-radio-inside" type="radio" value="0">
114
- <span>
115
- ラジオボタン 0
116
- </span>
117
- </label>
118
- </li>
119
- <li class="radio-inside">
120
- <label for="field-radio-inside-1">
121
- <input id="field-radio-inside-1" name="field-radio-inside" type="radio" value="1">
122
- <span>
123
- ラジオボタン 1
124
- </span>
125
- </label>
126
- </li>
127
- <li class="radio-inside">
128
- <label for="field-radio-inside-2">
129
- <input id="field-radio-inside-2" name="field-radio-inside" type="radio" value="2">
130
- <span>
131
- ラジオボタン 2
132
- </span>
133
- </label>
134
- </li>
135
- </ul>
136
- </div>
137
- <div class="fieldset">
138
- <legend>チェックボックス(並列)</legend>
139
- <ul class="reset-ul">
140
- <li class="checkbox">
141
- <input id="field-checkbox-0" type="checkbox" value="0">
142
- <label for="field-checkbox-0">
143
- チェックボックス 0
144
- </label>
145
- </li>
146
- <li class="checkbox">
147
- <input id="field-checkbox-1" type="checkbox" value="1">
148
- <label for="field-checkbox-1">
149
- チェックボックス 1
150
- </label>
151
- </li>
152
- <li class="checkbox">
153
- <input id="field-checkbox-2" type="checkbox" value="2">
154
- <label for="field-checkbox-2">
155
- チェックボックス 2
156
- </label>
157
- </li>
158
- </ul>
159
- </div>
160
- <div class="fieldset">
161
- <legend>チェックボックス(入れ子)</legend>
162
- <ul class="reset-ul">
163
- <li class="checkbox-inside">
164
- <label for="field-checkbox-inside-0">
165
- <input id="field-checkbox-inside-0" type="checkbox" value="0">
166
- <span>
167
- チェックボックス 0
168
- </span>
169
- </label>
170
- </li>
171
- <li class="checkbox-inside">
172
- <label for="field-checkbox-inside-1">
173
- <input id="field-checkbox-inside-1" type="checkbox" value="1">
174
- <span>
175
- チェックボックス 1
176
- </span>
177
- </label>
178
- </li>
179
- <li class="checkbox-inside">
180
- <label for="field-checkbox-inside-2">
181
- <input id="field-checkbox-inside-2" type="checkbox" value="2">
182
- <span>
183
- チェックボックス 2
184
- </span>
185
- </label>
186
- </li>
187
- </ul>
188
- </div>
189
- <div class="fieldset">
190
- <legend>スイッチ(チェックボックス)</legend>
191
- <ul class="reset-ul">
192
- <li>
193
- <div class="switch">
194
- <input id="field-checkbox-switch-0" type="checkbox" value="0">
195
- <label for="field-checkbox-switch-0"></label>
196
- </div>
197
- </li>
198
- </ul>
199
- </div>
200
- <div class="fieldset">
201
- <legend>セレクトボックス</legend>
202
- <div class="select">
203
- <select id="field-select">
204
- <option value="1">選択肢1</option>
205
- <option value="2">選択肢2</option>
206
- <option value="3">選択肢3</option>
207
- </select>
208
- </div>
209
- </div>
210
- <!-- <div class="fieldset">
211
- <legend>ファイルアップロード</legend>
212
- <div class="file-upload">
213
- <input type="file" name="file-upload" id="file-upload">
214
- <label for="file-upload">ファイルを選択する</label>
215
- <span class="selected"></span>
216
- </div>
217
- </div> -->
218
- <div class="fieldset">
219
- <div class="button-group">
220
- <input class="button" type="submit" value="送信">
221
- <input class="button-border" type="reset" value="リセット">
222
- </div>
223
- </div>
224
- </form>
225
- </section>
226
- </div>
227
- <div class="col-md-4">
228
- <section class="demo-styles">
229
- <h2>Table styles</h2>
230
- <table class="table">
231
- <thead>
232
- <tr>
233
- <th>xxx</th>
234
- <th>xxx</th>
235
- <th>xxx</th>
236
- </tr>
237
- </thead>
238
- <tbody>
239
- <tr>
240
- <td>xxx</td>
241
- <td>xxx</td>
242
- <td>xxx</td>
243
- </tr>
244
- <tr>
245
- <td>xxx</td>
246
- <td>xxx</td>
247
- <td>xxx</td>
248
- </tr>
249
- <tr>
250
- <td>xxx</td>
251
- <td>xxx</td>
252
- <td>xxx</td>
253
- </tr>
254
- </tbody>
255
- </table>
256
- <table class="table-line">
257
- <thead>
258
- <tr>
259
- <th>xxx</th>
260
- <th>xxx</th>
261
- <th>xxx</th>
262
- </tr>
263
- </thead>
264
- <tbody>
265
- <tr>
266
- <td>xxx</td>
267
- <td>xxx</td>
268
- <td>xxx</td>
269
- </tr>
270
- <tr>
271
- <td>xxx</td>
272
- <td>xxx</td>
273
- <td>xxx</td>
274
- </tr>
275
- <tr>
276
- <td>xxx</td>
277
- <td>xxx</td>
278
- <td>xxx</td>
279
- </tr>
280
- </tbody>
281
- </table>
282
- <table class="table-stripe">
283
- <thead>
284
- <tr>
285
- <th>xxx</th>
286
- <th>xxx</th>
287
- <th>xxx</th>
288
- </tr>
289
- </thead>
290
- <tbody>
291
- <tr>
292
- <td>xxx</td>
293
- <td>xxx</td>
294
- <td>xxx</td>
295
- </tr>
296
- <tr>
297
- <td>xxx</td>
298
- <td>xxx</td>
299
- <td>xxx</td>
300
- </tr>
301
- <tr>
302
- <td>xxx</td>
303
- <td>xxx</td>
304
- <td>xxx</td>
305
- </tr>
306
- </tbody>
307
- </table>
308
- </section>
309
- </div>
310
- </div>
311
- </div>
312
-
313
- <div class="container pt-3">
314
- <div class="row">
315
- <div class="col-12">
316
- <p><a href="https://github.com/is8r/spuit" target="_blank">github</a></p>
317
- </div>
318
- </div>
319
- </div>
320
-
321
- <script src="/javascripts/scripts.js"></script>
322
- </body>
323
- </html>
1
+ <!DOCTYPE html><html lang=ja><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title></title><link href=/stylesheets/styles.css rel=stylesheet></head><body><div class=container><div class=row><div class=col-12><p>Spuit</p></div></div></div><div class=container><div class=row><div class=col-md-4><section class=demo-styles><h2>Text Styles</h2><h1>heading 1</h1><h2>heading 2</h2><h3>heading 3</h3><h4>heading 4</h4><h5>heading 5</h5><h6>heading 6</h6><p>paragraf <a href=#>link</a> <b>bold</b></p></section></div><div class=col-md-4><section class=demo-styles><h2>Utilities</h2><h3>word break</h3><p class=word-break>.word-break</p><br><p class=word-break-none>.word-break-none</p><h3>text-overflow</h3><p class=text-overflow>.text-overflow</p><h3>wordwrap-fadeout</h3><div class=wordwrap-fadeout><p>.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout</p></div></section></div><div class=col-md-4><section class=demo-styles><h2>button styles</h2><a href=# class=button>Button</a> <input type=submit class=button value=Button> <button type=button class=button>Button</button> <a href=# class="button is-loading">Button</a> <a href=# class=button-semiflat>Button</a> <a href=# class=button-border>Button</a> <a href=# class=button-emboss>Button</a></section><section class=demo-styles><h2>icon styles</h2><i class=icon-hamburger></i> <i class=icon-twitter></i> <i class=icon-facebook></i> <i class=icon-hatena></i></section></div></div><div class=row><div class=col-md-4><section class=demo-styles><h2>Form styles</h2><form><div class=fieldset><legend>お名前</legend><div><input id=field-text placeholder=お名前 type=text></div></div><div class=fieldset><legend>お問い合わせ内容</legend><textarea cols=50 id=field-textarea placeholder=お問い合わせ内容を入力下さい rows=10></textarea></div><div class=fieldset><legend>ラジオボタン(並列)</legend><ul class=reset-ul><li class=radio><input id=field-radio-0 name=field-radio type=radio value=0> <label for=field-radio-0>ラジオボタン 0</label></li><li class=radio><input id=field-radio-1 name=field-radio type=radio value=1> <label for=field-radio-1>ラジオボタン 1</label></li><li class=radio><input id=field-radio-2 name=field-radio type=radio value=2> <label for=field-radio-2>ラジオボタン 2</label></li></ul></div><div class=fieldset><legend>ラジオボタン(入れ子)</legend><ul class=reset-ul><li class=radio-inside><label for=field-radio-inside-0><input id=field-radio-inside-0 name=field-radio-inside type=radio value=0> <span>ラジオボタン 0</span></label></li><li class=radio-inside><label for=field-radio-inside-1><input id=field-radio-inside-1 name=field-radio-inside type=radio value=1> <span>ラジオボタン 1</span></label></li><li class=radio-inside><label for=field-radio-inside-2><input id=field-radio-inside-2 name=field-radio-inside type=radio value=2> <span>ラジオボタン 2</span></label></li></ul></div><div class=fieldset><legend>チェックボックス(並列)</legend><ul class=reset-ul><li class=checkbox><input id=field-checkbox-0 type=checkbox value=0> <label for=field-checkbox-0>チェックボックス 0</label></li><li class=checkbox><input id=field-checkbox-1 type=checkbox value=1> <label for=field-checkbox-1>チェックボックス 1</label></li><li class=checkbox><input id=field-checkbox-2 type=checkbox value=2> <label for=field-checkbox-2>チェックボックス 2</label></li></ul></div><div class=fieldset><legend>チェックボックス(入れ子)</legend><ul class=reset-ul><li class=checkbox-inside><label for=field-checkbox-inside-0><input id=field-checkbox-inside-0 type=checkbox value=0> <span>チェックボックス 0</span></label></li><li class=checkbox-inside><label for=field-checkbox-inside-1><input id=field-checkbox-inside-1 type=checkbox value=1> <span>チェックボックス 1</span></label></li><li class=checkbox-inside><label for=field-checkbox-inside-2><input id=field-checkbox-inside-2 type=checkbox value=2> <span>チェックボックス 2</span></label></li></ul></div><div class=fieldset><legend>スイッチ(チェックボックス)</legend><ul class=reset-ul><li><div class=switch><input id=field-checkbox-switch-0 type=checkbox value=0> <label for=field-checkbox-switch-0></label></div></li></ul></div><div class=fieldset><legend>セレクトボックス</legend><div class=select><select id=field-select><option value=1>選択肢1</option><option value=2>選択肢2</option><option value=3>選択肢3</option></select></div></div><div class=fieldset><div class=button-group><input class=button type=submit value=送信> <input class=button-border type=reset value=リセット></div></div></form></section></div><div class=col-md-4><section class=demo-styles><h2>Table styles</h2><table class=table><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table><table class=table-line><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table><table class=table-stripe><thead><tr><th>xxx</th><th>xxx</th><th>xxx</th></tr></thead><tbody><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr><tr><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody></table></section></div></div></div><div class="container pt-3"><div class=row><div class=col-12><p><a href=https://github.com/is8r/spuit target=_blank>github</a></p></div></div></div><script src=/javascripts/scripts.js></script><script type=text/javascript src=javascripts/scripts.js></script></body></html>