rapido-css 0.0.3 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/README.md +44 -9
- data/stylesheets/_default-styles.scss +309 -138
- data/stylesheets/_functions.scss +67 -4
- data/stylesheets/_normalize.scss +39 -513
- data/stylesheets/_rapido.scss +17 -8
- data/stylesheets/_susy.scss +2 -5
- data/stylesheets/components/_alerts.scss +39 -5
- data/stylesheets/components/_breadcrumbs.scss +21 -4
- data/stylesheets/components/_button-groups.scss +42 -17
- data/stylesheets/components/_buttons.scss +69 -29
- data/stylesheets/components/_captions.scss +38 -19
- data/stylesheets/components/_close.scss +14 -3
- data/stylesheets/components/_dropdowns.scss +76 -28
- data/stylesheets/components/_forms.scss +477 -350
- data/stylesheets/components/_grids.scss +86 -0
- data/stylesheets/components/_labels.scss +26 -4
- data/stylesheets/components/_modals.scss +122 -38
- data/stylesheets/components/_navs.scss +51 -21
- data/stylesheets/components/_pager.scss +55 -10
- data/stylesheets/components/_pagination.scss +40 -25
- data/stylesheets/components/_responsive-navs.scss +141 -28
- data/stylesheets/components/_sliders.scss +45 -26
- data/stylesheets/components/_tables.scss +43 -16
- data/stylesheets/components/_tabs.scss +47 -9
- data/stylesheets/components/_type.scss +139 -73
- data/stylesheets/settings/_base.scss +73 -27
- data/stylesheets/settings/_colors.scss +43 -16
- data/stylesheets/settings/_components.scss +102 -43
- data/stylesheets/settings/_dimensions.scss +273 -92
- data/stylesheets/settings/_effects.scss +20 -12
- data/stylesheets/styleguide.md +33 -0
- data/stylesheets/utilities/_animations.scss +150 -129
- data/stylesheets/utilities/_debug.scss +29 -3
- data/stylesheets/utilities/_helper-classes.scss +135 -18
- data/stylesheets/utilities/_icon-fonts.scss +77 -80
- data/stylesheets/utilities/_mixins.scss +385 -63
- metadata +6 -13
- data/stylesheets/components/config.rb +0 -8
- data/stylesheets/settings/config.rb +0 -8
- data/stylesheets/utilities/_media-queries.scss +0 -50
- data/stylesheets/utilities/_sprites.scss +0 -22
- data/stylesheets/utilities/config.rb +0 -8
|
@@ -1,110 +1,291 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$base-border-radius:
|
|
6
|
-
$horizontal-offset:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
$
|
|
25
|
-
$
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
$
|
|
32
|
-
$
|
|
33
|
-
|
|
34
|
-
$
|
|
35
|
-
$
|
|
36
|
-
|
|
1
|
+
/* ====================================================================================================================
|
|
2
|
+
|
|
3
|
+
Base Dimensions
|
|
4
|
+
|
|
5
|
+
$base-border-radius: 4px # Border radius used as a standard on all elements.
|
|
6
|
+
$horizontal-offset: 180px # Labels width in horizontal forms.
|
|
7
|
+
|
|
8
|
+
Styleguide 28
|
|
9
|
+
|
|
10
|
+
==================================================================================================================== */
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
$base-border-radius: 4px !default;
|
|
14
|
+
$horizontal-offset: 180px !default;
|
|
15
|
+
$dropdowns-with: 160px !default;
|
|
16
|
+
|
|
17
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
18
|
+
|
|
19
|
+
Text Size
|
|
20
|
+
|
|
21
|
+
Font sizes you can used with the compass mixin `adjust-font-size-to()`. Naming convention from [Inuit](http://inuitcss.com/).
|
|
22
|
+
|
|
23
|
+
$giga-size: $base-font-size * 7 # 98px
|
|
24
|
+
$mega-size: $base-font-size * 5 # 70px
|
|
25
|
+
$kilo-size: $base-font-size * 3.5 # 49px
|
|
26
|
+
|
|
27
|
+
$h1-size: $base-font-size * 2.5 # 35px
|
|
28
|
+
$h2-size: $base-font-size * 2 # 28px
|
|
29
|
+
$h3-size: $base-font-size * 1.85 # 26px
|
|
30
|
+
$h4-size: $base-font-size * 1.5 # 21px
|
|
31
|
+
$h5-size: $base-font-size * 1.25 # 17.5px
|
|
32
|
+
$h6-size: $base-font-size * 1 # 14px
|
|
33
|
+
|
|
34
|
+
$milli-size: $base-font-size * .85 # 12px
|
|
35
|
+
$micro-size: $base-font-size * .7 # 10px
|
|
36
|
+
|
|
37
|
+
Styleguide 28.1
|
|
38
|
+
|
|
39
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
40
|
+
|
|
41
|
+
$giga-size: $base-font-size * 7 !default;
|
|
42
|
+
$mega-size: $base-font-size * 5 !default;
|
|
43
|
+
$kilo-size: $base-font-size * 3.5 !default;
|
|
44
|
+
|
|
45
|
+
$h1-size: $base-font-size * 2.5 !default;
|
|
46
|
+
$h2-size: $base-font-size * 2 !default;
|
|
47
|
+
$h3-size: $base-font-size * 1.85 !default;
|
|
48
|
+
$h4-size: $base-font-size * 1.5 !default;
|
|
49
|
+
$h5-size: $base-font-size * 1.25 !default;
|
|
50
|
+
$h6-size: $base-font-size * 1 !default;
|
|
51
|
+
|
|
52
|
+
$milli-size: $base-font-size * .85 !default;
|
|
53
|
+
$micro-size: $base-font-size * .7 !default;
|
|
54
|
+
|
|
55
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
56
|
+
|
|
57
|
+
Line-Height
|
|
58
|
+
|
|
59
|
+
By default all titles have a line-height based on the font-size, to ensure that it will allways respect the vertical rhythm.
|
|
60
|
+
Sometimes this result is not what we expect/want so it's possible to override the default proportion width these.
|
|
61
|
+
|
|
62
|
+
These values mean: X times the base line-height.
|
|
63
|
+
|
|
64
|
+
$h1-line-height: 2
|
|
65
|
+
$h2-line-height: 2
|
|
66
|
+
$h3-line-height: 2
|
|
67
|
+
$h4-line-height: 1.5
|
|
68
|
+
$h5-line-height: 1.5
|
|
69
|
+
$h6-line-height: 1.5
|
|
70
|
+
|
|
71
|
+
Styleguide 28.1.1
|
|
72
|
+
|
|
73
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
74
|
+
|
|
75
|
+
$h1-line-height: 2 !default;
|
|
76
|
+
$h2-line-height: 2 !default;
|
|
77
|
+
$h3-line-height: 2 !default;
|
|
78
|
+
$h4-line-height: 1.5 !default;
|
|
79
|
+
$h5-line-height: 1.5 !default;
|
|
80
|
+
$h6-line-height: 1.5 !default;
|
|
81
|
+
|
|
82
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
83
|
+
|
|
84
|
+
Forms
|
|
85
|
+
|
|
86
|
+
Base padding and margins used in the forms.
|
|
87
|
+
|
|
88
|
+
$control-margin-bottom: $base-line-height
|
|
89
|
+
$label-margin-bottom: 10px # Margin below labels
|
|
90
|
+
$input-border: 1px # Border width used for inputs and buttons
|
|
91
|
+
$input-padding-top: 10px # Base top padding
|
|
92
|
+
$input-padding-side: 10px # Base side padding
|
|
93
|
+
$checkbox-padding-left: 20px # Side padding used for checkboxes and radios
|
|
94
|
+
|
|
95
|
+
Styleguide 28.2
|
|
96
|
+
|
|
97
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
98
|
+
|
|
99
|
+
$control-margin-bottom: $base-line-height !default;
|
|
100
|
+
$label-margin-bottom: 10px !default;
|
|
101
|
+
$input-border: 1px !default;
|
|
102
|
+
$input-padding-top: 10px !default;
|
|
103
|
+
$input-padding-side: 10px !default;
|
|
104
|
+
$checkbox-padding-left: 20px !default;
|
|
37
105
|
|
|
38
106
|
// Do · not · edit
|
|
39
107
|
$input-padding: em($input-padding-top) em($input-padding-side) ;
|
|
40
|
-
$input-height:
|
|
41
|
-
$control-min-height:
|
|
108
|
+
$input-height: em($base-font-size + ($input-padding-top * 2) + ($input-border * 2)) ;
|
|
109
|
+
$control-min-height: em($base-line-height + $label-margin-bottom) + $input-height - em(5px) ;
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
113
|
+
|
|
114
|
+
Paddings
|
|
115
|
+
|
|
116
|
+
Padding specific to every component you can use to overwrite the base padding.
|
|
117
|
+
|
|
118
|
+
Helper classes
|
|
119
|
+
|
|
120
|
+
$wrapper-padding: em(20px) # Side padding used with .w and .wrapper
|
|
121
|
+
|
|
122
|
+
Buttons
|
|
123
|
+
|
|
124
|
+
$btn-padding: $input-padding # Buttons padding
|
|
125
|
+
$btn-large-padding: em($input-padding-top * 1) em($input-padding-side * 1.5)
|
|
126
|
+
$btn-small-padding: em($input-padding-top * .5) em($input-padding-side * .8)
|
|
127
|
+
$btn-mini-padding: em($input-padding-top * .1) em($input-padding-side * .6)
|
|
128
|
+
|
|
129
|
+
Components
|
|
130
|
+
|
|
131
|
+
$alerts-padding: $input-padding # Alerts padding
|
|
132
|
+
$captions-padding: $input-padding # Captions padding
|
|
133
|
+
$dropdowns-padding: $input-padding # Dropdowns padding
|
|
134
|
+
$modals-error-padding: $input-padding # Modals padding
|
|
135
|
+
$navs-padding: $input-padding # Navs padding
|
|
136
|
+
$pager-padding: $input-padding # Pager padding
|
|
137
|
+
$pagination-padding: $input-padding # Pagination padding
|
|
138
|
+
$pills-padding: .15em .35em # Pills padding
|
|
139
|
+
$tables-padding: $input-padding # Tables padding
|
|
140
|
+
$tabs-content-padding: $input-padding # Tabs padding
|
|
141
|
+
$tabs-tab-padding: $input-padding # Tabs padding
|
|
142
|
+
|
|
143
|
+
Styleguide 28.3
|
|
144
|
+
|
|
145
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
42
146
|
|
|
43
|
-
|
|
44
|
-
//
|
|
45
|
-
|
|
147
|
+
|
|
148
|
+
// Helper classes
|
|
149
|
+
$wrapper-padding: em(20px) !default;
|
|
46
150
|
|
|
47
151
|
// Buttons
|
|
48
|
-
$btn-padding:
|
|
49
|
-
$btn-large-padding:
|
|
50
|
-
$btn-small-padding:
|
|
51
|
-
$btn-mini-padding:
|
|
152
|
+
$btn-padding: $input-padding !default;
|
|
153
|
+
$btn-large-padding: em($input-padding-top * 1) em($input-padding-side * 1.5) !default;
|
|
154
|
+
$btn-small-padding: em($input-padding-top * .5) em($input-padding-side * .8) !default;
|
|
155
|
+
$btn-mini-padding: em($input-padding-top * .1) em($input-padding-side * .6) !default;
|
|
52
156
|
|
|
53
157
|
// Components
|
|
54
|
-
$alerts-padding:
|
|
55
|
-
$captions-padding:
|
|
56
|
-
$dropdowns-padding: $input-padding
|
|
57
|
-
$modals-error-padding: $input-padding
|
|
58
|
-
$navs-padding: $input-padding
|
|
59
|
-
$pager-padding:
|
|
60
|
-
$pagination-padding:
|
|
158
|
+
$alerts-padding: $input-padding !default;
|
|
159
|
+
$captions-padding: $input-padding !default;
|
|
160
|
+
$dropdowns-padding: $input-padding !default;
|
|
161
|
+
$modals-error-padding: $input-padding !default;
|
|
162
|
+
$navs-padding: $input-padding !default;
|
|
163
|
+
$pager-padding: $input-padding !default;
|
|
164
|
+
$pagination-padding: $input-padding !default;
|
|
61
165
|
$pills-padding: .15em .35em !default;
|
|
62
|
-
$tables-padding:
|
|
63
|
-
$tabs-content-padding:
|
|
64
|
-
$tabs-tab-padding:
|
|
166
|
+
$tables-padding: $input-padding !default;
|
|
167
|
+
$tabs-content-padding: $input-padding !default;
|
|
168
|
+
$tabs-tab-padding: $input-padding !default;
|
|
65
169
|
|
|
66
|
-
// Helper classes
|
|
67
|
-
$wrapper-padding: em(20px) !default;
|
|
68
170
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
171
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
172
|
+
|
|
173
|
+
Sizes
|
|
174
|
+
|
|
175
|
+
$loader-ico-size: 44px # Icon size of the loader used with some componets
|
|
176
|
+
$modal-btn-size: em(30px) # Size of buttons used with the modals
|
|
177
|
+
$slider-btn-size: em(30px) # Size of buttons used with the sliders
|
|
178
|
+
|
|
179
|
+
Styleguide 28.4
|
|
180
|
+
|
|
181
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
182
|
+
|
|
183
|
+
$loader-ico-size: 44px !default;
|
|
184
|
+
$modal-btn-size: em(30px) !default;
|
|
185
|
+
$slider-btn-size: em(30px) !default;
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
189
|
+
|
|
190
|
+
Heights
|
|
191
|
+
|
|
192
|
+
Some elements need to have a max-height specified for smoother animations, like dropdowns:
|
|
193
|
+
|
|
194
|
+
$dropdowns-height: em(600px);
|
|
195
|
+
|
|
196
|
+
Styleguide 28.5
|
|
197
|
+
|
|
198
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
$dropdowns-height: em(600px) !default;
|
|
202
|
+
|
|
203
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
204
|
+
|
|
205
|
+
Media Queries
|
|
206
|
+
|
|
207
|
+
Set the width of the three steps of the layout.
|
|
208
|
+
|
|
209
|
+
$lap-start: 481px # Max width of smartphone
|
|
210
|
+
$desk-start: 768px # Max width for tablet
|
|
211
|
+
$desk-end: 1080px # Max width for desktop
|
|
212
|
+
|
|
213
|
+
Styleguide 28.6
|
|
72
214
|
|
|
73
|
-
|
|
74
|
-
$desk-start: 768px !default;
|
|
75
|
-
$desk-end: 1080px !default;
|
|
215
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
76
216
|
|
|
77
|
-
$palm-end: $lap-start - 1px;
|
|
78
|
-
$lap-end: $desk-start - 1px;
|
|
79
217
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
218
|
+
$lap-start: 481px !default;
|
|
219
|
+
$desk-start: 768px !default;
|
|
220
|
+
$desk-end: 1080px !default;
|
|
83
221
|
|
|
84
|
-
$
|
|
85
|
-
$
|
|
86
|
-
$gutter-width: 30px !default;
|
|
87
|
-
$grid-padding: 10px !default;
|
|
88
|
-
$container-style: fluid !default;
|
|
222
|
+
$palm-end: $lap-start - 1px;
|
|
223
|
+
$lap-end: $desk-start - 1px;
|
|
89
224
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
225
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
226
|
+
|
|
227
|
+
Grid (Susy)
|
|
228
|
+
|
|
229
|
+
Default settings for susy grid. More info: [Susy](http://susy.oddbird.net/).
|
|
230
|
+
|
|
231
|
+
$total-columns: 12 # Number of columns
|
|
232
|
+
$column-width: 50px # Columns width
|
|
233
|
+
$gutter-width: 30px # Gutter width
|
|
234
|
+
$container-style: fluid # Grid style
|
|
235
|
+
|
|
236
|
+
Styleguide 28.7
|
|
237
|
+
|
|
238
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
$total-columns: 12 !default;
|
|
242
|
+
$column-width: 50px !default;
|
|
243
|
+
$gutter-width: 30px !default;
|
|
244
|
+
$container-style: fluid !default;
|
|
245
|
+
|
|
246
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
247
|
+
|
|
248
|
+
Nav Responsive Options
|
|
249
|
+
|
|
250
|
+
$navs-responsive-breakpoint: palm # On what step to switch to the responsive nav
|
|
251
|
+
$navs-responsive-type: slide # Responsive nav style: slide or off-canvas
|
|
252
|
+
$navs-responsive-dropdown-pos: right # Position of the button to open the nav
|
|
253
|
+
$navs-responsive-offset: 70% # How mutch to slide when using off-canvas
|
|
254
|
+
|
|
255
|
+
$navs-responsive-outside-wrapper: '.external-wrapper'
|
|
256
|
+
$navs-responsive-inside-wrapper: '.internal-wrapper'
|
|
257
|
+
|
|
258
|
+
Styleguide 28.8
|
|
259
|
+
|
|
260
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
93
261
|
|
|
94
262
|
$navs-responsive-breakpoint: palm !default;
|
|
95
|
-
$navs-responsive-type:
|
|
96
|
-
$navs-responsive-dropdown-pos:
|
|
97
|
-
$navs-responsive-offset:
|
|
98
|
-
|
|
99
|
-
$navs-responsive-outside-wrapper:
|
|
100
|
-
$navs-responsive-inside-wrapper:
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
$zindex-
|
|
109
|
-
$zindex-
|
|
110
|
-
$zindex-
|
|
263
|
+
$navs-responsive-type: slide !default;
|
|
264
|
+
$navs-responsive-dropdown-pos: right !default;
|
|
265
|
+
$navs-responsive-offset: 70% !default;
|
|
266
|
+
|
|
267
|
+
$navs-responsive-outside-wrapper: '.external-wrapper' !default;
|
|
268
|
+
$navs-responsive-inside-wrapper: '.internal-wrapper' !default;
|
|
269
|
+
|
|
270
|
+
/* --------------------------------------------------------------------------------------------------------------------
|
|
271
|
+
|
|
272
|
+
Z-index
|
|
273
|
+
|
|
274
|
+
Default settings for overlay components, taken from Bootstrap.
|
|
275
|
+
|
|
276
|
+
$zindex-dropdown: 1000 # Dropdowns
|
|
277
|
+
$zindex-popover: 1010 # Popovers
|
|
278
|
+
$zindex-tooltip: 1030 # Tooltips
|
|
279
|
+
$zindex-slider: 1040 # Sliders
|
|
280
|
+
$zindex-modal: 1050 # Modals
|
|
281
|
+
|
|
282
|
+
Styleguide 28.9
|
|
283
|
+
|
|
284
|
+
-------------------------------------------------------------------------------------------------------------------- */
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
$zindex-dropdown: 1000 !default;
|
|
288
|
+
$zindex-popover: 1010 !default;
|
|
289
|
+
$zindex-tooltip: 1030 !default;
|
|
290
|
+
$zindex-slider: 1040 !default;
|
|
291
|
+
$zindex-modal: 1050 !default;
|
|
@@ -1,18 +1,26 @@
|
|
|
1
|
-
//
|
|
1
|
+
// Effects
|
|
2
|
+
//
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
2
6
|
// ANIMATIONS w/ @include animate(...)
|
|
3
|
-
//
|
|
7
|
+
//
|
|
8
|
+
|
|
4
9
|
|
|
5
|
-
$animations: fadeIn, fadeOut !default;
|
|
6
|
-
$animations-classes: true !default;
|
|
7
10
|
|
|
8
|
-
$animations
|
|
9
|
-
$animations-
|
|
10
|
-
|
|
11
|
-
$animations-
|
|
11
|
+
$animations: fadeIn, fadeOut !default;
|
|
12
|
+
$animations-classes: true !default;
|
|
13
|
+
|
|
14
|
+
$animations-duration: .15s !default;
|
|
15
|
+
$animations-delay: 0s !default;
|
|
16
|
+
$animations-function: ease-out !default;
|
|
17
|
+
$animations-mode: both !default;
|
|
18
|
+
|
|
12
19
|
|
|
13
|
-
// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
|
|
14
20
|
// Transitions w/ @include transition(...)
|
|
15
|
-
//
|
|
21
|
+
//
|
|
22
|
+
|
|
23
|
+
|
|
16
24
|
|
|
17
|
-
$default-transition-duration:
|
|
18
|
-
$default-transition-function:
|
|
25
|
+
$default-transition-duration: $animations-duration !default;
|
|
26
|
+
$default-transition-function: toBezier($animations-function) !default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Rapido Framework
|
|
2
|
+
|
|
3
|
+
## Intro
|
|
4
|
+
|
|
5
|
+
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 based on Bootstrap without all the default styles.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
* Most of the modules from Boostrap (some heavily modified and streamlined)
|
|
10
|
+
* **CSS architecture and styling completely separated**, creating and switching complex themes is much easier
|
|
11
|
+
* **Every unused component can be disabled** to slim the final css
|
|
12
|
+
* All sizes are in **em** and respect the **vertical rhythm** of the page
|
|
13
|
+
* **Super easy responsive layouts** with Susy and custom mixins
|
|
14
|
+
* Full support of **automatic sprite generation** (with Compass)
|
|
15
|
+
* Full support of **icon fonts** with 8 fonts already included and custom mixin to remove any frictions
|
|
16
|
+
* Complete set of **css animations** with custom mixin
|
|
17
|
+
* There is a variable for almost everything
|
|
18
|
+
|
|
19
|
+
## Why?
|
|
20
|
+
|
|
21
|
+
The Rapido framework, is the result of a couple of months trying to figure out a way to incorporate a common framework in all my front-end projects, both for personal and client works. I started to look around at complete frameworks for quick prototyping and found three: [**Bootstrap**](https://github.com/twitter/bootstrap), [**Foundation**](https://github.com/zurb/foundation) and [**Inuit**](https://github.com/csswizardry/inuit.css). The first two are very similar, Bootstrap has more features that i never use so they where basically the same for me, Inuit is much smaller and more object oriented (ex: [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) naming syntax).
|
|
22
|
+
|
|
23
|
+
The problem was that after the first prototypes they where very difficult to tame and style like I wanted (and please, bootswatch.com and wrapbootstrap.com doesn't count, I mean real full designs). So I wanted to create a frankestein's framework with all the useful components from bootstrap, everything in variables like Foundation and the easy styling of Inuit.
|
|
24
|
+
|
|
25
|
+
I started taking off all the unnecessary bits from bootstrap, adding inuit variables and naming conventions and I was pretty happy with it, but then I started refactoring all the code, adding susy grids, structuring the files in a different way, cleaning all the unnecessary hacks for retro-compatibility, adding a bunch of useful mixing, and so on… so after all of this I thought that it may be useful for others.
|
|
26
|
+
|
|
27
|
+
#### Feedbacks
|
|
28
|
+
|
|
29
|
+
It was (and still is) made for my personal use so some stuff may seems strange but this is how I work, maybe with your help we can make it better, if you find a better solution of somethign covered in the framework please contact me and we'll se if it can work.
|
|
30
|
+
|
|
31
|
+
## Notes
|
|
32
|
+
|
|
33
|
+
This documentation is not meant for everyone, I've taken heavily from Bootstrap documentation for all common components that share the same characteristics and some parts are barebones because are meant to be a reference to other front-end developers that already know how Bootstrap (and css frameworks in general) work.
|