stipe 0.0.5.9 → 0.0.6.0
Sign up to get free protection for your applications and to get access to all the features.
data/readme.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
#Stipe Compass Extension
|
2
2
|
Stipe is the life blood of the Toadstool style guide framework. Consisting of a series of mixins, extends and defaults that give Toadstool that 'instant on' experience.
|
3
3
|
|
4
4
|
[Stipe](https://rubygems.org/gems/stipe)
|
@@ -12,6 +12,11 @@ To use the Stipe gem, using Bundler `gem 'stipe'`
|
|
12
12
|
Stipe is a Compass Extension, so Compass is a dependency. You will need to include `require 'stipe'` in your config.rb file.
|
13
13
|
|
14
14
|
# Stipe Changelog
|
15
|
+
###0.0.6.0
|
16
|
+
* Updated `@clearfix` to remove redundant CSS output.
|
17
|
+
* Added some additional @media query-scoped grid placeholders.
|
18
|
+
* Updated gem homepage.
|
19
|
+
|
15
20
|
###0.0.5.9
|
16
21
|
* Removed uneccessary instances of the box-sizing mixin, namely, in the push/pull mixins.
|
17
22
|
* Added _legacy_extends.scss file to stipe/grid. This is an optional @import, not included in the Stipe manifest. It restores some legacy placeholders. Consider it deprecated.
|
@@ -1,11 +1,5 @@
|
|
1
1
|
// These are legacy placeholder classes. You shouldn't use them. They will be removed in a future release.
|
2
2
|
|
3
|
-
/*
|
4
|
-
|
5
|
-
Am I here?
|
6
|
-
|
7
|
-
*/
|
8
|
-
|
9
3
|
%grid_1 {
|
10
4
|
@extend %grid_1of12;
|
11
5
|
@media #{$tablet_portrait} {
|
@@ -125,3 +119,47 @@ Am I here?
|
|
125
119
|
@extend %grid_4of4;
|
126
120
|
}
|
127
121
|
}
|
122
|
+
|
123
|
+
|
124
|
+
@media #{$mobile} {
|
125
|
+
%grid_full_mobile {
|
126
|
+
/* grid_full_mobile */
|
127
|
+
@include full_width_block(12, $main_grid_align: left);
|
128
|
+
}
|
129
|
+
}
|
130
|
+
@media #{$mobile_portrait} {
|
131
|
+
%grid_full_mobile_portrait {
|
132
|
+
/* grid_full_mobile_portrait */
|
133
|
+
@include full_width_block(12, $main_grid_align: left);
|
134
|
+
}
|
135
|
+
}
|
136
|
+
@media #{$mobile_landscape} {
|
137
|
+
%grid_full_mobile_landscape {
|
138
|
+
/* grid_full_mobile_landscape */
|
139
|
+
@include full_width_block(12, $main_grid_align: left);
|
140
|
+
}
|
141
|
+
}
|
142
|
+
@media #{$tablet} {
|
143
|
+
%grid_full_tablet {
|
144
|
+
/* grid_full_tablet */
|
145
|
+
@include full_width_block(12, $main_grid_align: left);
|
146
|
+
}
|
147
|
+
}
|
148
|
+
@media #{$tablet_portrait} {
|
149
|
+
%grid_full_tablet_portrait {
|
150
|
+
/* grid_full_tablet_portrait */
|
151
|
+
@include full_width_block(12, $main_grid_align: left);
|
152
|
+
}
|
153
|
+
}
|
154
|
+
@media #{$tablet_landscape} {
|
155
|
+
%grid_full_tablet_landscape {
|
156
|
+
/* grid_full_tablet_landscape */
|
157
|
+
@include full_width_block(12, $main_grid_align: left);
|
158
|
+
}
|
159
|
+
}
|
160
|
+
@media #{$desktop} {
|
161
|
+
%grid_full_desktop {
|
162
|
+
/* grid_full_mobile */
|
163
|
+
@include full_width_block(12, $main_grid_align: left);
|
164
|
+
}
|
165
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@media #{$tablet_portrait} {
|
2
|
+
@for $i from 1 through 10 {
|
3
|
+
%grid_#{$i}of10 {
|
4
|
+
@include grid($i, $grid_context: 10);
|
5
|
+
}
|
6
|
+
}
|
7
|
+
@for $i from 11 through 12 {
|
8
|
+
%grid_#{$i}of10 {
|
9
|
+
@include grid(10, $grid_context: 10);
|
10
|
+
}
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@media #{$mobile} {
|
15
|
+
@for $i from 1 through 4 {
|
16
|
+
%grid_#{$i}of4 {
|
17
|
+
@include grid($i, $grid_context: 4);
|
18
|
+
}
|
19
|
+
}
|
20
|
+
@for $i from 5 through 12 {
|
21
|
+
%grid_#{$i}of4 {
|
22
|
+
@include grid(4, $grid_context: 4);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
@@ -69,16 +69,7 @@ ol,ul {
|
|
69
69
|
|
70
70
|
blockquote, q {
|
71
71
|
quotes: none;
|
72
|
-
|
73
|
-
|
74
|
-
blockquote {
|
75
|
-
&:before, &:after {
|
76
|
-
content: '';
|
77
|
-
content: none;
|
78
|
-
}
|
79
|
-
}
|
80
|
-
|
81
|
-
q {
|
72
|
+
|
82
73
|
&:before, &:after {
|
83
74
|
content: '';
|
84
75
|
content: none;
|
@@ -133,16 +124,13 @@ table {
|
|
133
124
|
font: 100%;
|
134
125
|
}
|
135
126
|
|
136
|
-
sub {
|
127
|
+
sub, sup {
|
137
128
|
font-size: 75%;
|
138
129
|
line-height: 0;
|
139
130
|
position: relative;
|
140
131
|
}
|
141
132
|
|
142
133
|
sup {
|
143
|
-
font-size: 75%;
|
144
|
-
line-height: 0;
|
145
|
-
position: relative;
|
146
134
|
top: -0.5em;
|
147
135
|
}
|
148
136
|
|
@@ -157,14 +145,18 @@ pre, code, kbd, samp {
|
|
157
145
|
}
|
158
146
|
|
159
147
|
// * hand cursor on clickable elements
|
148
|
+
%stipe-cursor-pointer {
|
149
|
+
cursor: pointer;
|
150
|
+
}
|
151
|
+
|
160
152
|
|
161
153
|
.clickable, label {
|
162
|
-
cursor
|
154
|
+
@extend %stipe-cursor-pointer;
|
163
155
|
}
|
164
156
|
|
165
157
|
input {
|
166
158
|
&[type=button], &[type=submit] {
|
167
|
-
cursor
|
159
|
+
@extend %stipe-cursor-pointer;
|
168
160
|
}
|
169
161
|
}
|
170
162
|
|
@@ -11,7 +11,7 @@
|
|
11
11
|
$prefix_defaults: -moz- -webkit- -o- -ms- '' !default;
|
12
12
|
$webkit_support: -webkit- '' !default;
|
13
13
|
$moz_support: -moz- '' !default;
|
14
|
-
$ms_support: -ms- '' !default;
|
14
|
+
$ms_support: -ms- '' !default;
|
15
15
|
$moz_webkit_support: -moz- -webkit- '' !default;
|
16
16
|
$moz_ms_support: -moz- -ms- '' !default;
|
17
17
|
$webkit_ms_support: -webkit- -ms- '' !default;
|
@@ -123,11 +123,11 @@ $inset_shadow: em($ih-shadow) em($iv-shadow) em($iblur) em($is-shadow);
|
|
123
123
|
/////////// image with gradient background ////////////
|
124
124
|
// ------------------------------------------------- //
|
125
125
|
|
126
|
-
// This tool is pretty crazy and a little complex. Purpose is to simplify the creation of dual background assets that consist of an image and a gradient background.
|
127
|
-
// This tool also requires that a gradient object be created as variables.
|
126
|
+
// This tool is pretty crazy and a little complex. Purpose is to simplify the creation of dual background assets that consist of an image and a gradient background.
|
127
|
+
// This tool also requires that a gradient object be created as variables.
|
128
128
|
// Known restrictions ... images must be .png, position of background is currently hard-coded
|
129
129
|
@mixin icon_gradient_background($icon_image, $fallback_color, $w3c_color_spec, $safari_color_spec, $ie_start, $ie_stop) {
|
130
|
-
// w3c //:
|
130
|
+
// w3c //:
|
131
131
|
@include linear_gradient_bkgimage ('#{$imgDir}#{$icon_image}.png',5% 50%, $fallback_color, $w3c_color_spec);
|
132
132
|
// legacy safari //
|
133
133
|
@include linear_gradient_bkgimage_legacy_safari ('#{$imgDir}#{$icon_image}.png', 5% 50%, $safari_color_spec);
|
@@ -138,11 +138,11 @@ $inset_shadow: em($ih-shadow) em($iv-shadow) em($iblur) em($is-shadow);
|
|
138
138
|
// Example using this mixin
|
139
139
|
// .your_new_class {
|
140
140
|
// @include icon_gradient_background(
|
141
|
-
// $icon_image: play_icon,
|
142
|
-
// $fallback_color: $echo_color_bravo,
|
143
|
-
// $w3c_color_spec: $alpha_color_gradient_var_w3c,
|
144
|
-
// $safari_color_spec: $alpha_color_gradient_var_legacy_safari,
|
145
|
-
// $ie_start: $echo_color_delta,
|
141
|
+
// $icon_image: play_icon,
|
142
|
+
// $fallback_color: $echo_color_bravo,
|
143
|
+
// $w3c_color_spec: $alpha_color_gradient_var_w3c,
|
144
|
+
// $safari_color_spec: $alpha_color_gradient_var_legacy_safari,
|
145
|
+
// $ie_start: $echo_color_delta,
|
146
146
|
// $ie_stop: $echo_color_delta);
|
147
147
|
// }
|
148
148
|
// }
|
@@ -168,12 +168,12 @@ $inset_shadow: em($ih-shadow) em($iv-shadow) em($iblur) em($is-shadow);
|
|
168
168
|
// based on number of items in the flexbox when encompassing the full width of the view.
|
169
169
|
// As result, Stipe's engineering is based on using flexboxlegacy and flexbox modernizer tests.
|
170
170
|
@mixin flexbox (
|
171
|
-
$width,
|
172
|
-
$height,
|
171
|
+
$width,
|
172
|
+
$height,
|
173
173
|
$orient: horizontal,
|
174
|
-
$direction: row,
|
175
|
-
$pack: center,
|
176
|
-
$align: center,
|
174
|
+
$direction: row,
|
175
|
+
$pack: center,
|
176
|
+
$align: center,
|
177
177
|
$wrap: none,
|
178
178
|
$prefixes: $prefix_defaults,
|
179
179
|
$legacyPrefixes: $moz_webkit_support) {
|
@@ -183,7 +183,7 @@ $legacyPrefixes: $moz_webkit_support) {
|
|
183
183
|
#{$prefix}box-orient: $orient;
|
184
184
|
#{$prefix}box-pack: $pack;
|
185
185
|
#{$prefix}box-align: $align;
|
186
|
-
}
|
186
|
+
}
|
187
187
|
}
|
188
188
|
//As of 15.0.1 Mozilla does not support the new Flexbox spec
|
189
189
|
//As of Chrome 21.0.1180.89 Webkit is to buggy to impliment, causes lower scoll bar
|
@@ -207,15 +207,15 @@ $legacyPrefixes: $moz_webkit_support) {
|
|
207
207
|
width: $width;
|
208
208
|
}
|
209
209
|
|
210
|
-
|
210
|
+
|
211
211
|
@mixin flex (
|
212
|
-
$value,
|
212
|
+
$value,
|
213
213
|
$prefixes: $prefix_defaults,
|
214
214
|
$legacyPrefixes: $moz_webkit_support) {
|
215
215
|
@each $prefix in $legacyPrefixes {
|
216
216
|
.flexboxlegacy & {
|
217
217
|
#{$prefix}box-flex: $value;
|
218
|
-
}
|
218
|
+
}
|
219
219
|
}
|
220
220
|
@each $prefix in $ms_support {
|
221
221
|
.flexbox & {
|
@@ -268,17 +268,13 @@ $legacyPrefixes: $moz_webkit_support) {
|
|
268
268
|
/////// clearfix //////////
|
269
269
|
@mixin clearfix () {
|
270
270
|
zoom: 1;
|
271
|
-
&:before {
|
271
|
+
&:before, &:after {
|
272
272
|
content: "\0020";
|
273
273
|
display: block;
|
274
274
|
height: 0;
|
275
275
|
overflow: hidden;
|
276
276
|
}
|
277
277
|
&:after {
|
278
|
-
content: "\0020";
|
279
|
-
display: block;
|
280
|
-
height: 0;
|
281
|
-
overflow: hidden;
|
282
278
|
clear: both;
|
283
279
|
}
|
284
280
|
}
|
@@ -319,7 +315,7 @@ $legacyPrefixes: $moz_webkit_support) {
|
|
319
315
|
|
320
316
|
|
321
317
|
// This mixin is used for a linear layout of LIs versus using floats
|
322
|
-
// Build off of the ``flexbox`` mixin, this tool allows for quick
|
318
|
+
// Build off of the ``flexbox`` mixin, this tool allows for quick
|
323
319
|
// development of a ul/li layout using flexbox
|
324
320
|
// -----------------------------------------------------------------
|
325
321
|
@mixin ul_flexbox ($width :100%, $height: auto, $text_align :center) {
|
@@ -337,7 +333,7 @@ $legacyPrefixes: $moz_webkit_support) {
|
|
337
333
|
|
338
334
|
// Standard block clear and default spacing
|
339
335
|
// This tool is designed to be a standard spacing element between markup blocks.
|
340
|
-
// The only value to be adjusted is the margin-bottom spacing. This is an argument addressed
|
336
|
+
// The only value to be adjusted is the margin-bottom spacing. This is an argument addressed
|
341
337
|
// in the ``_config.scss`` file
|
342
338
|
@mixin standard_block_spacing ($default_block_spacing: $default_block_spacing) {
|
343
339
|
@include clearfix;
|
@@ -372,4 +368,4 @@ $legacyPrefixes: $moz_webkit_support) {
|
|
372
368
|
|
373
369
|
@mixin disabled_box_shadow ($h-shadow: $h-shadow, $v-shadow: $v-shadow, $blur: $blur) {
|
374
370
|
@include box_shadow (fade-out($shadow_color, 0.4), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
|
375
|
-
}
|
371
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: stipe
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.6.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2013-05-
|
13
|
+
date: 2013-05-21 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: compass
|
@@ -82,6 +82,7 @@ files:
|
|
82
82
|
- stylesheets/stipe/grid/_debug.scss
|
83
83
|
- stylesheets/stipe/grid/_extends.scss
|
84
84
|
- stylesheets/stipe/grid/_legacy_extends.scss
|
85
|
+
- stylesheets/stipe/grid/_media_extends.scss
|
85
86
|
- stylesheets/stipe/grid/_mixins.scss
|
86
87
|
- stylesheets/stipe/grid/lib/_grid_background.scss
|
87
88
|
- stylesheets/stipe/grid/lib/_grid_margin.scss
|
@@ -120,7 +121,7 @@ files:
|
|
120
121
|
- stylesheets/stipe/typography/_mixins.scss
|
121
122
|
- stylesheets/stipe/typography/headings.md
|
122
123
|
- stylesheets/stipe/typography/readme.md
|
123
|
-
homepage: https://github.com/
|
124
|
+
homepage: https://github.com/Toadstool-Stipe/stipe
|
124
125
|
licenses: []
|
125
126
|
post_install_message:
|
126
127
|
rdoc_options: []
|