protozaur 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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: []