rapido-css 0.1.4 → 0.1.5
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +4 -22
- data/stylesheets/_functions.scss +6 -6
- data/stylesheets/components/_captions.scss +7 -20
- data/stylesheets/components/_dropdowns.scss +8 -3
- data/stylesheets/components/_forms.scss +92 -28
- data/stylesheets/components/_off-canvas.scss +58 -47
- data/stylesheets/components/_pagination.scss +3 -2
- data/stylesheets/components/_tables.scss +1 -1
- data/stylesheets/components/_tabs.scss +1 -1
- data/stylesheets/components/_toggle.scss +43 -0
- data/stylesheets/components/_type.scss +19 -8
- data/stylesheets/rapido.scss +14 -17
- data/stylesheets/settings/_base.scss +6 -6
- data/stylesheets/settings/_colors.scss +3 -2
- data/stylesheets/settings/_components.scss +3 -3
- data/stylesheets/settings/_dimensions.scss +10 -10
- data/stylesheets/settings/_effects.scss +1 -1
- data/stylesheets/utilities/_animations.scss +117 -91
- data/stylesheets/utilities/_helper-classes.scss +7 -7
- data/stylesheets/utilities/_mixins.scss +106 -36
- metadata +5 -5
data/README.md
CHANGED
@@ -1,10 +1,9 @@
|
|
1
1
|
# Rapido Framework
|
2
2
|
|
3
|
-
An easy and quick [**Sass**](http://sass-lang.com/) + [**Compass**](http://compass-style.org/) + [**Susy**](http://susy.oddbird.net/) + [**OOCSS**](http://oocss.org/) + [**BEM**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) prototyping framework
|
3
|
+
An easy and quick [**Sass**](http://sass-lang.com/) + [**Compass**](http://compass-style.org/) + [**Susy**](http://susy.oddbird.net/) + [**OOCSS**](http://oocss.org/) + [**BEM**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) prototyping framework.
|
4
4
|
|
5
5
|
## Features
|
6
6
|
|
7
|
-
* Most of the modules from Boostrap (some heavily modified and streamlined)
|
8
7
|
* **CSS architecture and styling completely separated**, creating and switching complex themes is much easier
|
9
8
|
* **Every unused component can be disabled** to slim the final css
|
10
9
|
* All sizes are in **em** and respect the **vertical rhythm** of the page
|
@@ -20,29 +19,12 @@ A complete documentation of what is currently available can be found here: [Rapi
|
|
20
19
|
|
21
20
|
## Credits
|
22
21
|
|
23
|
-
* [
|
24
|
-
* [
|
25
|
-
* [Susy [a Compass plugin]](https://github.com/ericam/susy)
|
22
|
+
* [Compass](https://github.com/chriseppstein/compass)
|
23
|
+
* [Susy](https://github.com/ericam/susy)
|
26
24
|
* [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate)
|
27
25
|
* [Inuit.css](https://github.com/csswizardry/inuit.css)
|
28
26
|
|
29
27
|
|
30
28
|
## License
|
31
29
|
|
32
|
-
|
33
|
-
|
34
|
-
--
|
35
|
-
|
36
|
-
Copyright 2013 [Raffaele Rasini](http://twitter.com/raffaele)
|
37
|
-
|
38
|
-
Licensed under the Apache License, Version 2.0 (the "License");
|
39
|
-
you may not use this file except in compliance with the License.
|
40
|
-
You may obtain a copy of the License at
|
41
|
-
|
42
|
-
http://www.apache.org/licenses/LICENSE-2.0
|
43
|
-
|
44
|
-
Unless required by applicable law or agreed to in writing, software
|
45
|
-
distributed under the License is distributed on an "AS IS" BASIS,
|
46
|
-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
47
|
-
See the License for the specific language governing permissions and
|
48
|
-
limitations under the License.
|
30
|
+
MIT License (MIT)
|
data/stylesheets/_functions.scss
CHANGED
@@ -4,7 +4,7 @@ Functions
|
|
4
4
|
|
5
5
|
For 99% of the framework I used Compass' and Susy's functions but I've made some for covering edge cases.
|
6
6
|
|
7
|
-
Styleguide
|
7
|
+
Styleguide 25
|
8
8
|
|
9
9
|
*/
|
10
10
|
|
@@ -19,7 +19,7 @@ There are lots of easing options available, from the basic ``linear`` or ``ease-
|
|
19
19
|
* **easeOut**: easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutBack
|
20
20
|
* **easeInOut**: easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutBack
|
21
21
|
|
22
|
-
Styleguide
|
22
|
+
Styleguide 21.2
|
23
23
|
|
24
24
|
*/
|
25
25
|
|
@@ -76,7 +76,7 @@ Become:
|
|
76
76
|
|
77
77
|
left: -10em
|
78
78
|
|
79
|
-
Styleguide
|
79
|
+
Styleguide 25.2
|
80
80
|
|
81
81
|
*/
|
82
82
|
|
@@ -99,7 +99,7 @@ Become:
|
|
99
99
|
|
100
100
|
margin-left: -1.42857em;
|
101
101
|
|
102
|
-
Styleguide
|
102
|
+
Styleguide 25.3
|
103
103
|
|
104
104
|
*/
|
105
105
|
|
@@ -115,7 +115,7 @@ space_neg()
|
|
115
115
|
Similar to `rhythm_neg()` but for Susy's `space()` function, more info:
|
116
116
|
[Susy Reference](http://susy.oddbird.net/guides/reference/#ref-space).
|
117
117
|
|
118
|
-
Styleguide
|
118
|
+
Styleguide 25.4
|
119
119
|
|
120
120
|
*/
|
121
121
|
|
@@ -130,7 +130,7 @@ strip_units()
|
|
130
130
|
Remove eny type of unit from a number, more info:
|
131
131
|
[StackOverflow](http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass).
|
132
132
|
|
133
|
-
Styleguide
|
133
|
+
Styleguide 25.5
|
134
134
|
|
135
135
|
*/
|
136
136
|
|
@@ -44,11 +44,13 @@ Styleguide 5
|
|
44
44
|
position: relative;
|
45
45
|
float: left;
|
46
46
|
overflow: hidden;
|
47
|
+
@include perspective(1000);
|
47
48
|
|
48
49
|
&:nth-child(2n) {
|
49
50
|
margin-right: 0;
|
50
51
|
}
|
51
52
|
img {
|
53
|
+
display: block;
|
52
54
|
transition: $caption-animations-duration;
|
53
55
|
}
|
54
56
|
figcaption {
|
@@ -56,6 +58,7 @@ Styleguide 5
|
|
56
58
|
position: absolute;
|
57
59
|
transition: $caption-animations-duration;
|
58
60
|
width: 100%;
|
61
|
+
@include backface-visibility(hidden);
|
59
62
|
|
60
63
|
* {
|
61
64
|
margin-bottom: 0;
|
@@ -250,21 +253,17 @@ Styleguide 5
|
|
250
253
|
left: 0;
|
251
254
|
width: 100%;
|
252
255
|
height: 100%;
|
253
|
-
@include perspective(1300) ;
|
254
256
|
@include rotateY(180deg);
|
255
|
-
@include backface-visibility(hidden);
|
256
257
|
}
|
257
258
|
img {
|
258
|
-
|
259
|
+
|
259
260
|
transition: $caption-animations-duration;
|
260
261
|
}
|
261
262
|
&:hover, &:active {
|
262
263
|
figcaption {
|
263
|
-
@include perspective(1300) ;
|
264
264
|
@include rotateY(0deg);
|
265
265
|
}
|
266
266
|
img {
|
267
|
-
@include perspective(1300) ;
|
268
267
|
@include rotateY(-180deg);
|
269
268
|
}
|
270
269
|
}
|
@@ -277,21 +276,17 @@ Styleguide 5
|
|
277
276
|
left: 0;
|
278
277
|
width: 100%;
|
279
278
|
height: 100%;
|
280
|
-
@include perspective(1300) ;
|
281
279
|
@include rotateY(180deg);
|
282
|
-
@include backface-visibility(hidden);
|
283
280
|
}
|
284
281
|
img {
|
285
|
-
@include perspective(1300);
|
286
282
|
transition: $caption-animations-duration;
|
287
283
|
}
|
288
284
|
&:hover, &:active {
|
289
285
|
figcaption {
|
290
|
-
|
286
|
+
|
291
287
|
@include rotateY(360deg);
|
292
288
|
}
|
293
289
|
img {
|
294
|
-
@include perspective(1300) ;
|
295
290
|
@include rotateY(180deg);
|
296
291
|
}
|
297
292
|
}
|
@@ -304,21 +299,17 @@ Styleguide 5
|
|
304
299
|
left: 0;
|
305
300
|
width: 100%;
|
306
301
|
height: 100%;
|
307
|
-
@include perspective(1300);
|
308
302
|
@include rotateX(180deg);
|
309
|
-
@include backface-visibility(hidden);
|
310
303
|
}
|
311
304
|
img {
|
312
|
-
|
305
|
+
|
313
306
|
transition: $caption-animations-duration;
|
314
307
|
}
|
315
308
|
&:hover, &:active {
|
316
309
|
figcaption {
|
317
|
-
@include perspective(1300);
|
318
310
|
@include rotateX(360deg);
|
319
311
|
}
|
320
312
|
img {
|
321
|
-
@include perspective(1300) ;
|
322
313
|
@include rotateX(180deg);
|
323
314
|
}
|
324
315
|
}
|
@@ -331,21 +322,17 @@ Styleguide 5
|
|
331
322
|
left: 0;
|
332
323
|
width: 100%;
|
333
324
|
height: 100%;
|
334
|
-
@include perspective(1300);
|
335
325
|
@include rotateX(180deg);
|
336
|
-
@include backface-visibility(hidden);
|
337
326
|
}
|
338
327
|
img {
|
339
|
-
|
328
|
+
|
340
329
|
transition: $caption-animations-duration;
|
341
330
|
}
|
342
331
|
&:hover, &:active {
|
343
332
|
figcaption {
|
344
|
-
@include perspective(1300);
|
345
333
|
@include rotateX(0deg);
|
346
334
|
}
|
347
335
|
img {
|
348
|
-
@include perspective(1300);
|
349
336
|
@include rotateX(-180deg);;
|
350
337
|
}
|
351
338
|
}
|
@@ -6,9 +6,7 @@ Toggleable, contextual menu for displaying lists of links. Made interactive with
|
|
6
6
|
|
7
7
|
Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within `.dropdown`. Then just create the menu.
|
8
8
|
|
9
|
-
Script required:
|
10
|
-
|
11
|
-
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>
|
9
|
+
Script required: *rapido.js*.
|
12
10
|
|
13
11
|
Markup:
|
14
12
|
<div class="dropdown">
|
@@ -37,8 +35,15 @@ Markup:
|
|
37
35
|
<li><a tabindex="-1" href="#">Separated link</a></li>
|
38
36
|
</ul>
|
39
37
|
</div>
|
38
|
+
<script>$('.dropdown').rapido_Dropdown();</script>
|
39
|
+
|
40
|
+
Include this js after including rapido.js.
|
41
|
+
|
42
|
+
$('.dropdown').rapido_Dropdown();
|
40
43
|
|
44
|
+
**Options** (with defaul values):
|
41
45
|
|
46
|
+
event: click (click, hover)
|
42
47
|
|
43
48
|
Styleguide 7
|
44
49
|
|
@@ -60,16 +60,19 @@ legend {
|
|
60
60
|
}
|
61
61
|
}
|
62
62
|
|
63
|
-
label,
|
64
63
|
input,
|
65
64
|
button,
|
66
65
|
select,
|
67
66
|
textarea {
|
68
|
-
line-height: 1em;
|
69
67
|
font-family: $base-font-family;
|
70
68
|
@include border-radius($base-border-radius);
|
71
69
|
}
|
72
70
|
|
71
|
+
label {
|
72
|
+
line-height: $input-height/2;
|
73
|
+
display: block;
|
74
|
+
}
|
75
|
+
|
73
76
|
.input-text,
|
74
77
|
textarea,
|
75
78
|
input[type="text"],
|
@@ -103,8 +106,6 @@ select {
|
|
103
106
|
display: inline-block;
|
104
107
|
}
|
105
108
|
|
106
|
-
label { display: block; }
|
107
|
-
|
108
109
|
input,
|
109
110
|
textarea {
|
110
111
|
width: 240px;
|
@@ -142,10 +143,7 @@ select[size] {
|
|
142
143
|
height: auto;
|
143
144
|
}
|
144
145
|
|
145
|
-
|
146
|
-
textarea {
|
147
|
-
@include placeholder($placeholder-color);
|
148
|
-
}
|
146
|
+
@include placeholder($placeholder-color);
|
149
147
|
|
150
148
|
input[readonly],
|
151
149
|
select[readonly],
|
@@ -263,11 +261,12 @@ with class `.form__select`.
|
|
263
261
|
Markup:
|
264
262
|
<span class="form__select">
|
265
263
|
<select>
|
266
|
-
<option>
|
267
|
-
<option>
|
268
|
-
<option>
|
269
|
-
<option>
|
270
|
-
<option>
|
264
|
+
<option selected="selected">Select Country</option>
|
265
|
+
<option>United States</option>
|
266
|
+
<option>United Kingdom</option>
|
267
|
+
<option>Italy</option>
|
268
|
+
<option>France</option>
|
269
|
+
<option>Germany</option>
|
271
270
|
</select>
|
272
271
|
</span>
|
273
272
|
|
@@ -278,6 +277,7 @@ Styleguide 8.3
|
|
278
277
|
.form__select {
|
279
278
|
@extend %caret !optional;
|
280
279
|
@include border-radius(3px);
|
280
|
+
@include translateY($input-border);
|
281
281
|
border-style: solid;
|
282
282
|
border-width: $input-border;
|
283
283
|
cursor: pointer;
|
@@ -299,6 +299,9 @@ Styleguide 8.3
|
|
299
299
|
width:100%;
|
300
300
|
z-index: 3;
|
301
301
|
line-height: 1em;
|
302
|
+
text-indent: 1px;
|
303
|
+
text-overflow: '';
|
304
|
+
|
302
305
|
}
|
303
306
|
|
304
307
|
&:after {
|
@@ -394,6 +397,11 @@ Markup:
|
|
394
397
|
<input type="text">
|
395
398
|
<span class="form__addon">.00</span>
|
396
399
|
</div>
|
400
|
+
<div class="form__controls form__controls--multi">
|
401
|
+
<span class="form__addon"><input type="checkbox" value=""></span>
|
402
|
+
<input type="text">
|
403
|
+
<button type="submit" class="btn btn--default form__addon">Search</button>
|
404
|
+
</div>
|
397
405
|
|
398
406
|
Styleguide 8.6
|
399
407
|
|
@@ -481,13 +489,27 @@ Markup:
|
|
481
489
|
<div class="form__group">
|
482
490
|
<label class="form__label">Label</label>
|
483
491
|
<div class="form__controls">
|
484
|
-
<
|
492
|
+
<label class="form__radio inline">
|
493
|
+
<input type="radio" value="option1" checked> Option one
|
494
|
+
</label>
|
495
|
+
<label class="form__radio inline">
|
496
|
+
<input type="radio" value="option1" checked> Option two
|
497
|
+
</label>
|
485
498
|
</div>
|
486
499
|
</div>
|
487
500
|
<div class="form__group">
|
488
501
|
<label class="form__label">Label</label>
|
489
502
|
<div class="form__controls">
|
490
|
-
<
|
503
|
+
<span class="form__select">
|
504
|
+
<select>
|
505
|
+
<option selected="selected">Select Country</option>
|
506
|
+
<option>United States</option>
|
507
|
+
<option>United Kingdom</option>
|
508
|
+
<option>Italy</option>
|
509
|
+
<option>France</option>
|
510
|
+
<option>Germany</option>
|
511
|
+
</select>
|
512
|
+
</span>
|
491
513
|
</div>
|
492
514
|
</div>
|
493
515
|
<div class="form__actions">
|
@@ -573,14 +595,30 @@ The inline layout can also be used width a samplified markup.
|
|
573
595
|
Markup:
|
574
596
|
<form class="form--inline">
|
575
597
|
<label class="form__label">Label</label>
|
576
|
-
|
598
|
+
<input type="text" placeholder="Type something…">
|
577
599
|
<label class="form__label">Label</label>
|
578
|
-
|
600
|
+
<label class="form__radio inline">
|
601
|
+
<input type="radio" value="option1" checked> Option one
|
602
|
+
</label>
|
603
|
+
<label class="form__radio inline">
|
604
|
+
<input type="radio" value="option1" checked> Option two
|
605
|
+
</label>
|
579
606
|
<label class="form__label">Label</label>
|
580
|
-
|
607
|
+
<span class="form__select">
|
608
|
+
<select>
|
609
|
+
<option selected="selected">Select Country</option>
|
610
|
+
<option>United States</option>
|
611
|
+
<option>United Kingdom</option>
|
612
|
+
<option>Italy</option>
|
613
|
+
<option>France</option>
|
614
|
+
<option>Germany</option>
|
615
|
+
</select>
|
616
|
+
</span>
|
581
617
|
<button type="submit" class="btn btn--default ">Save changes</button>
|
582
618
|
</form>
|
583
619
|
|
620
|
+
</form>
|
621
|
+
|
584
622
|
Styleguide 8.8.1
|
585
623
|
|
586
624
|
*/
|
@@ -591,23 +629,49 @@ Styleguide 8.8.1
|
|
591
629
|
|
592
630
|
.form--inline {
|
593
631
|
|
594
|
-
* {
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
632
|
+
> * {
|
633
|
+
margin: 0 0 0 em(10px);
|
634
|
+
}
|
635
|
+
|
636
|
+
.form__label {
|
637
|
+
display: inline-block;
|
638
|
+
padding-right: 1em
|
639
|
+
}
|
640
|
+
|
641
|
+
.input-text,
|
642
|
+
.form__select,
|
643
|
+
textarea,
|
644
|
+
input[type="text"],
|
645
|
+
input[type="password"],
|
646
|
+
input[type="datetime"],
|
647
|
+
input[type="datetime-local"],
|
648
|
+
input[type="date"],
|
649
|
+
input[type="month"],
|
650
|
+
input[type="time"],
|
651
|
+
input[type="week"],
|
652
|
+
input[type="number"],
|
653
|
+
input[type="email"],
|
654
|
+
input[type="url"],
|
655
|
+
input[type="search"],
|
656
|
+
input[type="tel"],
|
657
|
+
input[type="color"] {
|
658
|
+
width: auto;
|
659
|
+
}
|
660
|
+
|
661
|
+
.form__select {
|
662
|
+
padding-right: 1.5em;
|
601
663
|
}
|
602
664
|
|
603
|
-
> * + *,
|
604
|
-
> * > * + *,
|
605
665
|
.form__group {
|
606
|
-
|
666
|
+
padding: 0;
|
667
|
+
display: inline-block;
|
607
668
|
}
|
608
669
|
|
609
670
|
.form__actions {
|
610
671
|
border: 0;
|
672
|
+
padding: 0;
|
673
|
+
margin: 0;
|
674
|
+
display: inline-block;
|
611
675
|
}
|
612
676
|
|
613
677
|
}
|