protozaur 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +13 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +21 -0
  5. data/README.md +680 -0
  6. data/Rakefile +1 -0
  7. data/app/assets/stylesheets/ptz/base.css.sass +105 -0
  8. data/app/assets/stylesheets/ptz/framework.css.scss +109 -0
  9. data/app/assets/stylesheets/ptz/inputs-buttons/base.css.sass +52 -0
  10. data/app/assets/stylesheets/ptz/inputs-buttons/sizes.css.scss +11 -0
  11. data/app/assets/stylesheets/ptz/reset.css.sass +69 -0
  12. data/bin/console +14 -0
  13. data/bin/setup +7 -0
  14. data/docs/logo_550x550.jpg +0 -0
  15. data/lib/protozaur.rb +5 -0
  16. data/lib/protozaur/version.rb +3 -0
  17. data/protozaur.gemspec +32 -0
  18. metadata +89 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 1ac08c6a34b8d305c2af12c2bb62c4145f01d14e
4
+ data.tar.gz: e9e2836c34b935f29b0094d4490ffcb0f0a408bc
5
+ SHA512:
6
+ metadata.gz: 8454cc42a2ebc7460adbc4ea8ffc95bd619701661997b2425b098024346d63ef015854d55ff236fa62dfac82d5145fc2de439ea34c8961b95b8247cdff48a0c7
7
+ data.tar.gz: edb24b28c0111df2ecec6c88276cb45bd5aac93135de4be4175122b273d1e9059358d68f5304abd47e80d199f68cc658ec106db146403b344218588fcef63654
data/.gitignore ADDED
@@ -0,0 +1,13 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
10
+
11
+ .DS_Store
12
+ .AppleDouble
13
+ .LSOverride
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in protozaur.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2015 Ilya N. Zykin
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,680 @@
1
+ <p align="center" class='center' style="text-align:center">
2
+ <img src='https://raw.githubusercontent.com/the-teacher/protozaur/master/docs/logo_550x550.jpg'>
3
+ <br>
4
+ Primal rage of css primitives
5
+ </p>
6
+
7
+ <hr>
8
+
9
+ Protozaur is semantic, mnemonic, declarative CSS framework, created to avoid wasting time and increase productivity
10
+
11
+ ### Why?
12
+
13
+ 0. Rapid prototyping
14
+ 0. Dramatically Reduce the amount and size of CSS/BEM style modificators in CSS files
15
+ 0. Declarative approach to add context-dependent style properties to existed CSS classes or BEM blocks
16
+
17
+ ### Protozaur's cheat sheet
18
+
19
+ <table>
20
+ <tbody>
21
+ <tr>
22
+ <td style="text-align:left">
23
+ <b>CSS class</b>
24
+ </td>
25
+
26
+ <td style="text-align:left">
27
+ <b>CSS style</b>
28
+ </td>
29
+ </tr>
30
+
31
+ <tr>
32
+ <td width="400px" valign="top" style='vertical-align:top'>
33
+ ma
34
+ </td>
35
+ <td width="400px" valign="top" style='vertical-align:top'>
36
+ margin: auto
37
+ </td>
38
+ </tr>
39
+
40
+ <tr>
41
+ <td width="400px" valign="top" style='vertical-align:top'><b>Margin</b></td>
42
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
43
+ </tr>
44
+
45
+ <tr>
46
+ <td width="400px" valign="top" style='vertical-align:top'>
47
+ m0 ... m100 &mdash; <em>(step 5)</em>
48
+ </td>
49
+ <td width="400px" valign="top" style='vertical-align:top'>
50
+ margin: <b>X</b>px !important;
51
+ </td>
52
+ </tr>
53
+
54
+ <tr>
55
+ <td width="400px" valign="top" style='vertical-align:top'>
56
+ ml0 ... ml100
57
+ </td>
58
+ <td width="400px" valign="top" style='vertical-align:top'>
59
+ margin-left: <b>X</b>px !important;
60
+ </td>
61
+ </tr>
62
+
63
+ <tr>
64
+ <td width="400px" valign="top" style='vertical-align:top'>
65
+ mr0 ... mr100
66
+ </td>
67
+ <td width="400px" valign="top" style='vertical-align:top'>
68
+ margin-right: <b>X</b>px !important;
69
+ </td>
70
+ </tr>
71
+
72
+ <tr>
73
+ <td width="400px" valign="top" style='vertical-align:top'>
74
+ mt0 ... mt100
75
+ </td>
76
+ <td width="400px" valign="top" style='vertical-align:top'>
77
+ margin-top: <b>X</b>px !important;
78
+ </td>
79
+ </tr>
80
+
81
+ <tr>
82
+ <td width="400px" valign="top" style='vertical-align:top'>
83
+ mb0 ... mb100
84
+ </td>
85
+ <td width="400px" valign="top" style='vertical-align:top'>
86
+ margin-bottom: <b>X</b>px !important;
87
+ </td>
88
+ </tr>
89
+
90
+ <tr>
91
+ <td width="400px" valign="top" style='vertical-align:top'><b>Padding</b></td>
92
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
93
+ </tr>
94
+
95
+ <tr>
96
+ <td width="400px" valign="top" style='vertical-align:top'>
97
+ p0 ... p100
98
+ </td>
99
+ <td width="400px" valign="top" style='vertical-align:top'>
100
+ padding: <b>X</b>px !important;
101
+ </td>
102
+ </tr>
103
+
104
+ <tr>
105
+ <td width="400px" valign="top" style='vertical-align:top'>
106
+ pl0 ... pl100
107
+ </td>
108
+ <td width="400px" valign="top" style='vertical-align:top'>
109
+ padding-left: <b>X</b>px !important;
110
+ </td>
111
+ </tr>
112
+
113
+ <tr>
114
+ <td width="400px" valign="top" style='vertical-align:top'>
115
+ pr0 ... pr100
116
+ </td>
117
+ <td width="400px" valign="top" style='vertical-align:top'>
118
+ padding-right: <b>X</b>px !important;
119
+ </td>
120
+ </tr>
121
+
122
+ <tr>
123
+ <td width="400px" valign="top" style='vertical-align:top'>
124
+ pr0 ... pt100
125
+ </td>
126
+ <td width="400px" valign="top" style='vertical-align:top'>
127
+ padding-top: <b>X</b>px !important;
128
+ </td>
129
+ </tr>
130
+
131
+ <tr>
132
+ <td width="400px" valign="top" style='vertical-align:top'>
133
+ pb0 ... pb100
134
+ </td>
135
+ <td width="400px" valign="top" style='vertical-align:top'>
136
+ padding-bottom: <b>X</b>px !important;
137
+ </td>
138
+ </tr>
139
+
140
+ <tr>
141
+ <td width="400px" valign="top" style='vertical-align:top'><b>Width</b></td>
142
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
143
+ </tr>
144
+
145
+ <tr>
146
+ <td width="400px" valign="top" style='vertical-align:top'>
147
+ w10 ... w1200
148
+ </td>
149
+ <td width="400px" valign="top" style='vertical-align:top'>
150
+ width: <b>X</b>px !important;
151
+ </td>
152
+ </tr>
153
+
154
+ <tr>
155
+ <td width="400px" valign="top" style='vertical-align:top'>
156
+ w5p ... w100p
157
+ </td>
158
+ <td width="400px" valign="top" style='vertical-align:top'>
159
+ width: <b>X</b>% !important;
160
+ </td>
161
+ </tr>
162
+
163
+ <tr>
164
+ <td width="400px" valign="top" style='vertical-align:top'><b>Display</b></td>
165
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
166
+ </tr>
167
+
168
+ <tr>
169
+ <td width="400px" valign="top" style='vertical-align:top'>
170
+ inline
171
+ </td>
172
+ <td width="400px" valign="top" style='vertical-align:top'>
173
+ display: inline !important
174
+ </td>
175
+ </tr>
176
+
177
+ <tr>
178
+ <td width="400px" valign="top" style='vertical-align:top'>
179
+ block
180
+ </td>
181
+ <td width="400px" valign="top" style='vertical-align:top'>
182
+ display: block !important
183
+ </td>
184
+ </tr>
185
+
186
+ <tr>
187
+ <td width="400px" valign="top" style='vertical-align:top'>
188
+ iblock
189
+ </td>
190
+ <td width="400px" valign="top" style='vertical-align:top'>
191
+ display: inline-block !important
192
+ </td>
193
+ </tr>
194
+
195
+ <tr>
196
+ <td width="400px" valign="top" style='vertical-align:top'><b>Table</b></td>
197
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
198
+ </tr>
199
+
200
+ <tr>
201
+ <td width="400px" valign="top" style='vertical-align:top'>
202
+ ptz--table
203
+ </td>
204
+ <td width="400px" valign="top" style='vertical-align:top'>
205
+ display: table
206
+ </td>
207
+ </tr>
208
+
209
+ <tr>
210
+ <td width="400px" valign="top" style='vertical-align:top'>
211
+ ptz--row, ptz--tr
212
+ </td>
213
+ <td width="400px" valign="top" style='vertical-align:top'>
214
+ display: table-row
215
+ </td>
216
+ </tr>
217
+
218
+ <tr>
219
+ <td width="400px" valign="top" style='vertical-align:top'>
220
+ ptz--cell, ptz--th, ptz--td
221
+ </td>
222
+ <td width="400px" valign="top" style='vertical-align:top'>
223
+ display: table-cell; vertical-align: top
224
+ </td>
225
+ </tr>
226
+
227
+ <tr>
228
+ <td width="400px" valign="top" style='vertical-align:top'><b>Position</b></td>
229
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
230
+ </tr>
231
+
232
+ <tr>
233
+ <td width="400px" valign="top" style='vertical-align:top'>
234
+ posrel
235
+ </td>
236
+ <td width="400px" valign="top" style='vertical-align:top'>
237
+ position: relative !important
238
+ </td>
239
+ </tr>
240
+
241
+ <tr>
242
+ <td width="400px" valign="top" style='vertical-align:top'>
243
+ posabs
244
+ </td>
245
+ <td width="400px" valign="top" style='vertical-align:top'>
246
+ position: absolute !important
247
+ </td>
248
+ </tr>
249
+
250
+ <tr>
251
+ <td width="400px" valign="top" style='vertical-align:top'><b>Font style</b></td>
252
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
253
+ </tr>
254
+
255
+ <tr>
256
+ <td width="400px" valign="top" style='vertical-align:top'>
257
+ fs0, fs10 ... fs30 &mdash; <em>(step 1)</em>
258
+ </td>
259
+ <td width="400px" valign="top" style='vertical-align:top'>
260
+ font-size: <b>X</b>px !important;
261
+ </td>
262
+ </tr>
263
+
264
+ <tr>
265
+ <td width="400px" valign="top" style='vertical-align:top'>
266
+ lh100 ... lh200
267
+ </td>
268
+ <td width="400px" valign="top" style='vertical-align:top'>
269
+ line-height: <b>X</b>% !important;
270
+ </td>
271
+ </tr>
272
+
273
+ <tr>
274
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
275
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
276
+ </tr>
277
+
278
+ <tr>
279
+ <td width="400px" valign="top" style='vertical-align:top'>
280
+ tac
281
+ </td>
282
+ <td width="400px" valign="top" style='vertical-align:top'>
283
+ text-align: center !important
284
+ </td>
285
+ </tr>
286
+
287
+ <tr>
288
+ <td width="400px" valign="top" style='vertical-align:top'>
289
+ tar
290
+ </td>
291
+ <td width="400px" valign="top" style='vertical-align:top'>
292
+ text-align: right !important
293
+ </td>
294
+ </tr>
295
+
296
+ <tr>
297
+ <td width="400px" valign="top" style='vertical-align:top'>
298
+ tal
299
+ </td>
300
+ <td width="400px" valign="top" style='vertical-align:top'>
301
+ text-align: left !important
302
+ </td>
303
+ </tr>
304
+
305
+ <tr>
306
+ <td width="400px" valign="top" style='vertical-align:top'>
307
+ taj
308
+ </td>
309
+ <td width="400px" valign="top" style='vertical-align:top'>
310
+ text-align: justify !important
311
+ </td>
312
+ </tr>
313
+
314
+ <tr>
315
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
316
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
317
+ </tr>
318
+
319
+ <tr>
320
+ <td width="400px" valign="top" style='vertical-align:top'>
321
+ vat
322
+ </td>
323
+ <td width="400px" valign="top" style='vertical-align:top'>
324
+ vertical-align: top !important
325
+ </td>
326
+ </tr>
327
+
328
+ <tr>
329
+ <td width="400px" valign="top" style='vertical-align:top'>
330
+ vam
331
+ </td>
332
+ <td width="400px" valign="top" style='vertical-align:top'>
333
+ vertical-align: middle !important
334
+ </td>
335
+ </tr>
336
+
337
+ <tr>
338
+ <td width="400px" valign="top" style='vertical-align:top'>
339
+ vab
340
+ </td>
341
+ <td width="400px" valign="top" style='vertical-align:top'>
342
+ vertical-align: bottom !important
343
+ </td>
344
+ </tr>
345
+
346
+ <tr>
347
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
348
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
349
+ </tr>
350
+
351
+ <tr>
352
+ <td width="400px" valign="top" style='vertical-align:top'>
353
+ b
354
+ </td>
355
+ <td width="400px" valign="top" style='vertical-align:top'>
356
+ font-weight: bold !important
357
+ </td>
358
+ </tr>
359
+
360
+ <tr>
361
+ <td width="400px" valign="top" style='vertical-align:top'>
362
+ i
363
+ </td>
364
+ <td width="400px" valign="top" style='vertical-align:top'>
365
+ font-style: italic !important
366
+ </td>
367
+ </tr>
368
+
369
+ <tr>
370
+ <td width="400px" valign="top" style='vertical-align:top'>
371
+ n
372
+ </td>
373
+ <td width="400px" valign="top" style='vertical-align:top'>
374
+ font-style: normal !important
375
+ </td>
376
+ </tr>
377
+
378
+ <tr>
379
+ <td width="400px" valign="top" style='vertical-align:top'>
380
+ u
381
+ </td>
382
+ <td width="400px" valign="top" style='vertical-align:top'>
383
+ text-decoration: underline !important
384
+ </td>
385
+ </tr>
386
+
387
+ <tr>
388
+ <td width="400px" valign="top" style='vertical-align:top'>
389
+ fwn
390
+ </td>
391
+ <td width="400px" valign="top" style='vertical-align:top'>
392
+ font-weight: normal !important
393
+ </td>
394
+ </tr>
395
+
396
+ <tr>
397
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
398
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
399
+ </tr>
400
+
401
+ <tr>
402
+ <td width="400px" valign="top" style='vertical-align:top'>
403
+ upcase
404
+ </td>
405
+ <td width="400px" valign="top" style='vertical-align:top'>
406
+ text-transform: uppercase
407
+ </td>
408
+ </tr>
409
+
410
+ <tr>
411
+ <td width="400px" valign="top" style='vertical-align:top'>
412
+ downcase
413
+ </td>
414
+ <td width="400px" valign="top" style='vertical-align:top'>
415
+ text-transform: lowercase
416
+ </td>
417
+ </tr>
418
+
419
+ <tr>
420
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
421
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
422
+ </tr>
423
+
424
+ <tr>
425
+ <td width="400px" valign="top" style='vertical-align:top'>
426
+ ffa
427
+ </td>
428
+ <td width="400px" valign="top" style='vertical-align:top'>
429
+ font-family: Arial
430
+ </td>
431
+ </tr>
432
+
433
+ <tr>
434
+ <td width="400px" valign="top" style='vertical-align:top'>
435
+ fft
436
+ </td>
437
+ <td width="400px" valign="top" style='vertical-align:top'>
438
+ font-family: Tahoma
439
+ </td>
440
+ </tr>
441
+
442
+ <tr>
443
+ <td width="400px" valign="top" style='vertical-align:top'>
444
+ ffv
445
+ </td>
446
+ <td width="400px" valign="top" style='vertical-align:top'>
447
+ font-family: Verdana
448
+ </td>
449
+ </tr>
450
+
451
+ <tr>
452
+ <td width="400px" valign="top" style='vertical-align:top'>
453
+ ffg
454
+ </td>
455
+ <td width="400px" valign="top" style='vertical-align:top'>
456
+ font-family: Georgia
457
+ </td>
458
+ </tr>
459
+
460
+ <tr>
461
+ <td width="400px" valign="top" style='vertical-align:top'>
462
+ ffm
463
+ </td>
464
+ <td width="400px" valign="top" style='vertical-align:top'>
465
+ font-family: Monospace
466
+ </td>
467
+ </tr>
468
+
469
+ <tr>
470
+ <td width="400px" valign="top" style='vertical-align:top'>
471
+ fftnr
472
+ </td>
473
+ <td width="400px" valign="top" style='vertical-align:top'>
474
+ font-family: Times New Roman
475
+ </td>
476
+ </tr>
477
+
478
+ <tr>
479
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
480
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
481
+ </tr>
482
+
483
+ <tr>
484
+ <td width="400px" valign="top" style='vertical-align:top'>
485
+ br-off
486
+ </td>
487
+ <td width="400px" valign="top" style='vertical-align:top'>
488
+ white-space: nowrap
489
+ </td>
490
+ </tr>
491
+
492
+ <tr>
493
+ <td width="400px" valign="top" style='vertical-align:top'>
494
+ br-on
495
+ </td>
496
+ <td width="400px" valign="top" style='vertical-align:top'>
497
+ white-space: normal
498
+ </td>
499
+ </tr>
500
+
501
+ <tr>
502
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
503
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
504
+ </tr>
505
+
506
+ <tr>
507
+ <td width="400px" valign="top" style='vertical-align:top'>
508
+ ls0
509
+ </td>
510
+ <td width="400px" valign="top" style='vertical-align:top'>
511
+ letter-spacing: 0
512
+ </td>
513
+ </tr>
514
+
515
+ <tr>
516
+ <td width="400px" valign="top" style='vertical-align:top'>
517
+ lsn
518
+ </td>
519
+ <td width="400px" valign="top" style='vertical-align:top'>
520
+ letter-spacing: normal
521
+ </td>
522
+ </tr>
523
+
524
+ <tr>
525
+ <td width="400px" valign="top" style='vertical-align:top'><b>Buttons</b></td>
526
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
527
+ </tr>
528
+
529
+ <tr>
530
+ <td width="400px" valign="top" style='vertical-align:top'>
531
+ ptz--btn
532
+ </td>
533
+ <td width="400px" valign="top" style='vertical-align:top'>
534
+ button style
535
+ </td>
536
+ </tr>
537
+
538
+ <tr>
539
+ <td width="400px" valign="top" style='vertical-align:top'>
540
+ ptz--size-10 ... ptz--size-25
541
+ </td>
542
+ <td width="400px" valign="top" style='vertical-align:top'>
543
+ button's size. 10px ... 25px
544
+ </td>
545
+ </tr>
546
+
547
+ <tr>
548
+ <td width="400px" valign="top" style='vertical-align:top'><b>Inputs</b></td>
549
+ <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
550
+ </tr>
551
+
552
+ <tr>
553
+ <td width="400px" valign="top" style='vertical-align:top'>
554
+ ptz--input, ptz--textarea
555
+ </td>
556
+ <td width="400px" valign="top" style='vertical-align:top'>
557
+ Input style
558
+ </td>
559
+ </tr>
560
+
561
+ <tr>
562
+ <td width="400px" valign="top" style='vertical-align:top'>
563
+ ptz--size-10 ... ptz--size-25
564
+ </td>
565
+ <td width="400px" valign="top" style='vertical-align:top'>
566
+ inputs's size. 10px ... 25px
567
+ </td>
568
+ </tr>
569
+
570
+ </tbody>
571
+ </table>
572
+
573
+ ### How Protozaur works?
574
+
575
+ **Example 1**
576
+
577
+ ```html
578
+ <h1 class='fs18 lh130 mt20 mb20'>
579
+ Hello World!
580
+ </h1>
581
+ ```
582
+
583
+ Will add to your H1 following css properties:
584
+
585
+ ```css
586
+ font-size: 18px;
587
+ line-height: 130%;
588
+ margin-top: 20px;
589
+ margin-bottom: 20px;
590
+ ```
591
+
592
+ **Example 2**
593
+
594
+ ```html
595
+ <a href='http://github.com' class='ptz--btn ptz--size-16'>Button to Github</a>
596
+ ```
597
+
598
+ Will show button based on `font-size: 16px;`
599
+
600
+ **Example 3**
601
+
602
+ ```html
603
+
604
+ <form action='/action.php'>
605
+ <div class='m20'>
606
+
607
+ <div class='mb20'>
608
+ <input name='login' type='text' class='ptz--input ptz--size-16 w300'>
609
+ </div>
610
+
611
+ <div class='mb20'>
612
+ <input name='email' type='text' class='ptz--input ptz--size-16 w300'>
613
+ </div>
614
+
615
+ <div class='clearfix'>
616
+ <div class='pull-right'>
617
+ <input type='submit' class='ptz--submit ptz--size-16'>
618
+ </div>
619
+ </div>
620
+
621
+ </div>
622
+ </form>
623
+
624
+ ```
625
+
626
+ ### Protozaur's concept
627
+
628
+ All CSS properties can be split in 2 groups:
629
+
630
+ 0. decorative properties (`background`, `color`, `border` etc.)
631
+ 0. context-dependent properties (`margin`, `padding`, `font-size` etc.)
632
+
633
+ Protozaur say:
634
+
635
+ - It is pointless to write the most part of context-dependent properties in CSS files. It's reason to create tons of additional css declarations for context-dependent modificators
636
+
637
+ Protozaur advice:
638
+
639
+ - We can create some set of global simple CSS modificators. We can use it for context-dependent customization of existed CSS styles or BEM blocks
640
+
641
+ ### Protozaur components
642
+
643
+ 0. **reset.css** &mdash; just the reset file
644
+ 0. **framework.css** &mdash; the heart of framework
645
+ 0. **base.css** &mdash; some most common css definitions
646
+
647
+ also will be better to include `inputs-buttons` componetns:
648
+
649
+ 0. **inputs-buttons/base.css** &mdash; for using styles for inputs and buttons
650
+ 0. **inputs-buttons/sizes.css** &mdash; for set sizes to buttons and inputs
651
+
652
+ ### Features
653
+
654
+ Protozaur:
655
+
656
+ 0. based on `box-sizing: border-box` property
657
+ 0. based on **px** and **%**
658
+ 0. based on BEM principals
659
+
660
+ ### The MIT License (MIT)
661
+
662
+ Copyright (c) 2015 Ilya N. Zykin
663
+
664
+ Permission is hereby granted, free of charge, to any person obtaining a copy
665
+ of this software and associated documentation files (the "Software"), to deal
666
+ in the Software without restriction, including without limitation the rights
667
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
668
+ copies of the Software, and to permit persons to whom the Software is
669
+ furnished to do so, subject to the following conditions:
670
+
671
+ The above copyright notice and this permission notice shall be included in
672
+ all copies or substantial portions of the Software.
673
+
674
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
675
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
676
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
677
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
678
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
679
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
680
+ THE SOFTWARE.
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
data/app/assets/stylesheets/ptz/base.css.sass ADDED
@@ -0,0 +1,105 @@
1
+ // LINKS
2
+ a
3
+ color: #012d85
4
+ transition: color .2s ease
5
+
6
+ &:hover
7
+ color: red
8
+
9
+ // HEADERS
10
+ h1,h2,h3,h4,h5,h6
11
+ font-size: 18px
12
+ line-height: 130%
13
+ font-weight: normal
14
+
15
+ // PARAGRAPH
16
+ p
17
+ margin: 20px 0
18
+ color: #292e31
19
+ font-size: 16px
20
+ line-height: 160%
21
+
22
+ hr
23
+ border-top: 1px solid #eee
24
+ margin: 20px 0
25
+
26
+ // SUP/SUB
27
+ sup, sub
28
+ font-size: 85%
29
+ zoom: 1
30
+ sup
31
+ vertical-align: 40%
32
+ sub
33
+ vertical-align: -40%
34
+
35
+ // LISTS
36
+ .ol, .ul
37
+ margin-left: 20px
38
+ margin-bottom: 20px
39
+
40
+ .ol li, .ul li
41
+ list-style-position: outside
42
+ margin-left: 15px
43
+ padding-left: 5px
44
+ line-height: 135%
45
+
46
+ .ol li
47
+ list-style-type: decimal
48
+
49
+ .ul li
50
+ list-style-type: disc
51
+
52
+ // VISIBILITY
53
+ .hidden
54
+ display: none !important
55
+
56
+ .invisible
57
+ visibility: hidden !important
58
+ height: 0 !important
59
+
60
+ .visible
61
+ visibility: visible !important
62
+ height: auto
63
+
64
+ // FLOATING
65
+ .ob, .ofh
66
+ overflow: hidden !important
67
+ zoom: 1
68
+
69
+ .pull-left
70
+ float: left
71
+
72
+ .pull-right
73
+ float: right
74
+
75
+ .clearfix:after
76
+ content: "."
77
+ display: block
78
+ line-height: 0
79
+
80
+ height: 0
81
+ clear: both
82
+ visibility: hidden
83
+
84
+ html[xmlns] .clearfix
85
+ display: block
86
+
87
+ * html .clearfix
88
+ zoom: 1
89
+
90
+ // ADDITIONAL
91
+ .text-select-off
92
+ -webkit-touch-callout: none
93
+ -webkit-user-select: none
94
+ -khtml-user-select: none
95
+ -moz-user-select: none
96
+ -ms-user-select: none
97
+ -o-user-select: none
98
+ user-select: none
99
+
100
+ noscript
101
+ background: red
102
+ padding: 5px
103
+
104
+ color: white
105
+ font-size: 20px
data/app/assets/stylesheets/ptz/framework.css.scss ADDED
@@ -0,0 +1,109 @@
1
+ // margin/padding
2
+ .ma{ margin: auto }
3
+
4
+ $i: 0;
5
+ @while $i <= 100 {
6
+ .p#{ $i }{ padding:#{ $i }px !important }
7
+ .m#{ $i }{ margin: #{ $i }px !important }
8
+
9
+ .pt#{ $i }{ padding-top: #{ $i }px !important }
10
+ .pr#{ $i }{ padding-right: #{ $i }px !important }
11
+ .pb#{ $i }{ padding-bottom: #{ $i }px !important }
12
+ .pl#{ $i }{ padding-left: #{ $i }px !important }
13
+
14
+ .mt#{ $i }{ margin-top: #{ $i }px !important }
15
+ .mr#{ $i }{ margin-right: #{ $i }px !important }
16
+ .mb#{ $i }{ margin-bottom: #{ $i }px !important }
17
+ .ml#{ $i }{ margin-left: #{ $i }px !important }
18
+
19
+ $i: $i + 5;
20
+ }
21
+
22
+ // width
23
+ $i: 10;
24
+ @while $i <= 1200 {
25
+ .w#{ $i }{ width: #{ $i }px !important }
26
+ $i: $i + 5;
27
+ }
28
+
29
+ // width %
30
+ $i: 5;
31
+ @while $i <= 100 {
32
+ .w#{ $i }p{ width: #{ $i }% !important }
33
+ $i: $i + 5;
34
+ }
35
+
36
+ // font-size
37
+ .fs0{ font-size: 0 }
38
+
39
+ $i: 10;
40
+ @while $i <= 30 {
41
+ .fs#{ $i }{ font-size: #{ $i }px !important }
42
+ $i: $i + 1;
43
+ }
44
+
45
+ // line-height
46
+ $i: 100;
47
+ @while $i <= 200 {
48
+ .lh#{ $i }{ line-height: #{ $i + '%' } !important }
49
+ $i: $i + 5;
50
+ }
51
+
52
+ .tac{ text-align: center !important }
53
+ .tar{ text-align: right !important }
54
+ .tal{ text-align: left !important }
55
+ .taj{ text-align: justify !important }
56
+
57
+ .vat{ vertical-align: top !important }
58
+ .vam{ vertical-align: middle !important }
59
+ .vab{ vertical-align: bottom !important }
60
+
61
+ .b{ font-weight: bold !important }
62
+ .i{ font-style: italic !important }
63
+ .n{ font-style: normal !important }
64
+ .u{ text-decoration: underline !important }
65
+ .fwn{ font-weight: normal !important }
66
+
67
+ .upcase { text-transform: uppercase }
68
+ .downcase{ text-transform: lowercase }
69
+
70
+ .ffa{ font-family: Arial }
71
+ .fft{ font-family: Tahoma }
72
+ .ffv{ font-family: Verdana }
73
+ .ffg{ font-family: Georgia }
74
+ .ffm{ font-family: Monospace }
75
+ .fftnr{ font-family: Times New Roman }
76
+
77
+ .inline{ display: inline !important }
78
+ .block { display: block !important }
79
+ .iblock{ display: inline-block !important }
80
+
81
+ .showme{ border: 1px solid red !important }
82
+
83
+ .posrel{ position: relative !important }
84
+ .posabs{ position: absolute !important }
85
+
86
+ // TABLE
87
+ .ptz--table {
88
+ display: table
89
+ }
90
+
91
+ .ptz--row, .ptz--tr {
92
+ display: table-row
93
+ }
94
+
95
+ .ptz--cell, .ptz--th, .ptz--td {
96
+ display: table-cell;
97
+ vertical-align: top
98
+ }
99
+
100
+ // BORDER RADIUS
101
+ .brn{ border-radius: 0 !important }
102
+
103
+ // LINE BREAKES
104
+ .br-off, .nobr{ white-space: nowrap }
105
+ .br-on{ white-space: normal }
106
+
107
+ // LETTER SPACING
108
+ .ls0{ letter-spacing: 0 }
109
+ .lsn{ letter-spacing: normal }
data/app/assets/stylesheets/ptz/inputs-buttons/base.css.sass ADDED
@@ -0,0 +1,52 @@
1
+ // BUTTONS, INPUTS, TEXTAREAS
2
+ .ptz--btn, .ptz--input, .ptz--textarea
3
+ color: black
4
+ font-size: 15px
5
+ line-height: 18px
6
+
7
+ padding: 7px 10px
8
+ border-radius: 3px
9
+ vertical-align: top
10
+ border: 1px solid rgba(0, 0, 0, 0.2)
11
+
12
+ &:disabled
13
+ color: #eee
14
+ background: white
15
+ cursor: not-allowed
16
+
17
+ &:hover
18
+ color: #eee
19
+ background: white
20
+
21
+ // BUTTON
22
+ .ptz--btn
23
+ text-align: center
24
+ white-space: nowrap
25
+ display: inline-block
26
+
27
+ cursor: pointer
28
+ background: white
29
+ transition: background-color .2s ease
30
+
31
+ &.current
32
+ border-color: #7bc7ff
33
+ background-color: #c5e6ff
34
+
35
+ &:hover
36
+ background-color: #c5e6ff
37
+
38
+ &:hover
39
+ color: #000
40
+ background-color: #e3f2fd
41
+
42
+ // BUTTON SIDES
43
+ .ptz--btn
44
+ &--side-left
45
+ margin-right: -3px
46
+ border-top-right-radius: 0
47
+ border-bottom-right-radius: 0
48
+
49
+ &--side-right
50
+ margin-left: -3px
51
+ border-top-left-radius: 0
52
+ border-bottom-left-radius: 0
data/app/assets/stylesheets/ptz/inputs-buttons/sizes.css.scss ADDED
@@ -0,0 +1,11 @@
1
+ $i: 10;
2
+ @while $i <= 25 {
3
+
4
+ .ptz--size-#{ $i }{
5
+ font-size: #{ $i }px;
6
+ line-height: #{ $i + 3 }px;
7
+ padding: #{ $i - 5 }px #{ $i - 2 }px;
8
+ }
9
+
10
+ $i: $i + 1;
11
+ }
data/app/assets/stylesheets/ptz/reset.css.sass ADDED
@@ -0,0 +1,69 @@
1
+ // 29/10/15
2
+ *
3
+ margin: 0
4
+ padding: 0
5
+ border: 0
6
+ outline: 0
7
+ box-sizing: border-box
8
+
9
+ *:hover, *:active, *:focus
10
+ outline: 0
11
+
12
+ *::after, *::before
13
+ box-sizing: border-box
14
+
15
+ body
16
+ color: black
17
+ font-size: 10px
18
+ line-height: 125%
19
+ background: white
20
+
21
+ // IE a > img fix
22
+ a img
23
+ border: none
24
+
25
+ img
26
+ vertical-align: top
27
+
28
+ // A
29
+ a
30
+ text-decoration: none
31
+
32
+ &:hover
33
+ text-decoration: none
34
+
35
+ // LISTS
36
+ ol, ul
37
+ list-style: none
38
+ li
39
+ list-style-position: outside
40
+
41
+ // TABLES
42
+ table, tr, th, td
43
+ border-collapse: collapse
44
+ vertical-align: top
45
+ border-spacing: 0
46
+
47
+ th
48
+ font-weight: bold
49
+
50
+ // INPUTS/BUTTONS
51
+ ::-moz-focus-inner
52
+ border: 0
53
+ margin: 0
54
+ padding: 0
55
+ outline: 0
56
+
57
+ // PLACEHOLDER
58
+ input
59
+ &::-moz-placeholder
60
+ color: #ccc !important
61
+ &:-ms-input-placeholder
62
+ color: #ccc !important
63
+ &::-webkit-input-placeholder
64
+ color: #ccc !important
65
+ &:focus::-webkit-input-placeholder
66
+ color: transparent !important
67
+
68
+ input[type=submit]
69
+ cursor: pointer
data/bin/console ADDED
@@ -0,0 +1,14 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bundler/setup"
4
+ require "protozaur"
5
+
6
+ # You can add fixtures and/or initialization code here to make experimenting
7
+ # with your gem easier. You can also use a different console, if you like.
8
+
9
+ # (If you use this, don't forget to add pry to your Gemfile!)
10
+ # require "pry"
11
+ # Pry.start
12
+
13
+ require "irb"
14
+ IRB.start
data/bin/setup ADDED
@@ -0,0 +1,7 @@
1
+ #!/bin/bash
2
+ set -euo pipefail
3
+ IFS=$'\n\t'
4
+
5
+ bundle install
6
+
7
+ # Do any other automated setup that you need to do here
data/docs/logo_550x550.jpg ADDED
Binary file
data/lib/protozaur.rb ADDED
@@ -0,0 +1,5 @@
1
+ require "protozaur/version"
2
+
3
+ module Protozaur
4
+ class Engine < Rails::Engine; end
5
+ end
data/lib/protozaur/version.rb ADDED
@@ -0,0 +1,3 @@
1
+ module Protozaur
2
+ VERSION = "0.1.0"
3
+ end
data/protozaur.gemspec ADDED
@@ -0,0 +1,32 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'protozaur/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "protozaur"
8
+ spec.version = Protozaur::VERSION
9
+ spec.authors = ["Ilya N. Zykin"]
10
+ spec.email = ["zykin-ilya@ya.ru"]
11
+
12
+ spec.summary = %q{Protozaur CSS framework}
13
+ spec.description = %q{Protozaur CSS framework. Epic css framework}
14
+ spec.homepage = "http://github.com/the-teacher/protozaur"
15
+ spec.license = "MIT"
16
+
17
+ # Prevent pushing this gem to RubyGems.org by setting 'allowed_push_host', or
18
+ # delete this section to allow pushing this gem to any host.
19
+ if spec.respond_to?(:metadata)
20
+ spec.metadata['allowed_push_host'] = "https://rubygems.org"
21
+ else
22
+ raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
23
+ end
24
+
25
+ spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
26
+ spec.bindir = "exe"
27
+ spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
28
+ spec.require_paths = ["lib"]
29
+
30
+ spec.add_development_dependency "bundler", "~> 1.10"
31
+ spec.add_development_dependency "rake", "~> 10.0"
32
+ end
metadata ADDED
@@ -0,0 +1,89 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: protozaur
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Ilya N. Zykin
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2015-12-21 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.10'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.10'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ description: Protozaur CSS framework. Epic css framework
42
+ email:
43
+ - zykin-ilya@ya.ru
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - ".gitignore"
49
+ - Gemfile
50
+ - LICENSE.txt
51
+ - README.md
52
+ - Rakefile
53
+ - app/assets/stylesheets/ptz/base.css.sass
54
+ - app/assets/stylesheets/ptz/framework.css.scss
55
+ - app/assets/stylesheets/ptz/inputs-buttons/base.css.sass
56
+ - app/assets/stylesheets/ptz/inputs-buttons/sizes.css.scss
57
+ - app/assets/stylesheets/ptz/reset.css.sass
58
+ - bin/console
59
+ - bin/setup
60
+ - docs/logo_550x550.jpg
61
+ - lib/protozaur.rb
62
+ - lib/protozaur/version.rb
63
+ - protozaur.gemspec
64
+ homepage: http://github.com/the-teacher/protozaur
65
+ licenses:
66
+ - MIT
67
+ metadata:
68
+ allowed_push_host: https://rubygems.org
69
+ post_install_message:
70
+ rdoc_options: []
71
+ require_paths:
72
+ - lib
73
+ required_ruby_version: !ruby/object:Gem::Requirement
74
+ requirements:
75
+ - - ">="
76
+ - !ruby/object:Gem::Version
77
+ version: '0'
78
+ required_rubygems_version: !ruby/object:Gem::Requirement
79
+ requirements:
80
+ - - ">="
81
+ - !ruby/object:Gem::Version
82
+ version: '0'
83
+ requirements: []
84
+ rubyforge_project:
85
+ rubygems_version: 2.5.0
86
+ signing_key:
87
+ specification_version: 4
88
+ summary: Protozaur CSS framework
89
+ test_files: []