ericam-compass-susy-plugin 0.4.0 → 0.4.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +1 -1
- data/VERSION +1 -1
- data/compass-susy-plugin.gemspec +1 -1
- data/docs/tutorial/index.mkdn +7 -3
- data/lib/susy/sass_extensions.rb +14 -0
- data/sass/susy/_grid.sass +13 -21
- data/sass/susy/_text.sass +3 -1
- data/sass/susy/_utils.sass +13 -2
- data/templates/project/screen.sass +1 -3
- metadata +1 -1
data/README.mkdn
CHANGED
@@ -82,7 +82,7 @@ Grid Basics
|
|
82
82
|
* In nested contexts, all of these mixins take an extra final argument, the
|
83
83
|
width in columns of the parent (nesting) element.
|
84
84
|
|
85
|
-
|
85
|
+
That's it for the basics! Here's a sample Susy grid layout:
|
86
86
|
|
87
87
|
body
|
88
88
|
+susy
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.4.
|
1
|
+
0.4.1
|
data/compass-susy-plugin.gemspec
CHANGED
data/docs/tutorial/index.mkdn
CHANGED
@@ -117,10 +117,14 @@ And style the links:
|
|
117
117
|
&:focus, &:hover, &:active
|
118
118
|
:color= !light
|
119
119
|
:border-bottom
|
120
|
-
:width
|
120
|
+
:width= px2em(2) + "em"
|
121
121
|
:style dashed
|
122
122
|
|
123
|
-
(
|
123
|
+
(Susy provides the convenience function `px2em`, which can approximate a pixel
|
124
|
+
value in ems, given our chosen `!base_font_size_px`. Here we want the dashed
|
125
|
+
bottom border to be 2 pixels wide at the default font size, but we size it in
|
126
|
+
ems - the result here will be .1429em. Susy's math functions return bare
|
127
|
+
numbers, so we add "em" ourselves).
|
124
128
|
|
125
129
|
And we'll add a bit of margin to our paragraphs:
|
126
130
|
|
@@ -332,5 +336,5 @@ Compass than Susy.
|
|
332
336
|
place](03_structure/) (this should match what you have if you followed
|
333
337
|
along).
|
334
338
|
|
335
|
-
* [My final styles](../src/) for [the site](http://www.oddbird.net/
|
339
|
+
* [My final styles](../src/) for [the site](http://www.oddbird.net/susy/).
|
336
340
|
|
data/lib/susy/sass_extensions.rb
CHANGED
@@ -1,6 +1,20 @@
|
|
1
1
|
require 'sass'
|
2
2
|
|
3
3
|
module Sass::Script::Functions
|
4
|
+
# set the Susy base font size (in pixels)
|
5
|
+
# return the percentage base font size
|
6
|
+
# this could be done in Sass, but we need to store the px_size so we
|
7
|
+
# can provide a px_to_em function
|
8
|
+
def base_font_size(base_font_size_px)
|
9
|
+
@@susy_base_font_size_px = Float(base_font_size_px.value)
|
10
|
+
Sass::Script::Number.new((@@susy_base_font_size_px / 16) * 100)
|
11
|
+
end
|
12
|
+
|
13
|
+
# approximate a given pixel size in ems
|
14
|
+
def px2em(size_in_px)
|
15
|
+
Sass::Script::Number.new((size_in_px.value / @@susy_base_font_size_px))
|
16
|
+
end
|
17
|
+
|
4
18
|
# set the Susy column and gutter widths and number of columns
|
5
19
|
# column, gutter and padding widths should be sent as unitless numbers,
|
6
20
|
# though they may "really" be ems or pixels (_grid.sass handles units).
|
data/sass/susy/_grid.sass
CHANGED
@@ -52,7 +52,7 @@
|
|
52
52
|
|
53
53
|
//**
|
54
54
|
set on the first element of a row to take side-gutters into account
|
55
|
-
- must
|
55
|
+
- must set !n for nested columns
|
56
56
|
=alpha(!nested = false)
|
57
57
|
@if !nested
|
58
58
|
:margin-left 0
|
@@ -61,30 +61,22 @@
|
|
61
61
|
|
62
62
|
//**
|
63
63
|
set on the last element of a row to take side-gutters into account
|
64
|
-
-
|
65
|
-
|
66
|
-
|
67
|
-
|
64
|
+
- set !nested for nested columns
|
65
|
+
- set !right for right-floated omega elements
|
66
|
+
=omega(!nested = false, !right = false)
|
67
|
+
!s = side_gutter()
|
68
|
+
@if !nested
|
69
|
+
:margin-right 0
|
68
70
|
@else
|
69
|
-
:margin-right=
|
70
|
-
|
71
|
-
//**
|
72
|
-
use to override +omega in ie.sass for IE6-7 to handle sub-pixel rounding issues
|
73
|
-
- must override `!nested` for nested columns
|
74
|
-
- must override `!right` for right-floated omega elements
|
75
|
-
=ie-omega(!nested = false, !right = false)
|
71
|
+
:margin-right= !s + "%"
|
72
|
+
/* ugly hacks for IE6-7 */
|
76
73
|
@if !right
|
77
|
-
|
78
|
-
:margin-right 0
|
79
|
-
@else
|
80
|
-
:margin-right= side_gutter() + "%"
|
81
|
-
:margin-left -1%
|
74
|
+
:#margin-left -1%
|
82
75
|
@else
|
83
|
-
@if !nested
|
84
|
-
|
76
|
+
@if !nested
|
77
|
+
:#margin-right -1%
|
85
78
|
@else
|
86
|
-
|
87
|
-
|
79
|
+
:#margin-right= !s - 1 + "%"
|
88
80
|
|
89
81
|
//**
|
90
82
|
set on an element that will span it's entire context
|
data/sass/susy/_text.sass
CHANGED
@@ -8,7 +8,9 @@
|
|
8
8
|
|
9
9
|
//**
|
10
10
|
Susy can do the math to make that relative
|
11
|
-
|
11
|
+
we call base_font_size function (even though we could do the math here)
|
12
|
+
because Susy needs to "remember" our base_font_size_px for px2em()
|
13
|
+
!base_font_size = base_font_size(!base_font_size_px) + "%"
|
12
14
|
!base_line_height = (!base_line_height_px / !base_font_size_px) * 100 + "%"
|
13
15
|
|
14
16
|
//**
|
data/sass/susy/_utils.sass
CHANGED
@@ -2,14 +2,25 @@
|
|
2
2
|
|
3
3
|
//**
|
4
4
|
removes all background images and colors from the element and offspring
|
5
|
-
then adds a grid image of your choosing
|
5
|
+
then adds a grid image of your choosing. highlights divs on modern browsers
|
6
6
|
=show-grid(!src)
|
7
7
|
:background
|
8
8
|
:image= image_url(!src)
|
9
9
|
:repeat repeat
|
10
|
-
:position
|
10
|
+
:position= side_gutter() + "% 0"
|
11
11
|
*
|
12
12
|
:background transparent
|
13
|
+
div
|
14
|
+
:background rgba(0,0,0,.125)
|
15
|
+
|
16
|
+
=inline-block
|
17
|
+
:display -moz-inline-box
|
18
|
+
:-moz-box-orient vertical
|
19
|
+
:display inline-block
|
20
|
+
:vertical-align middle
|
21
|
+
:#display inline
|
22
|
+
// fixes alignment against native input/button on IE6
|
23
|
+
:#vertical-align auto
|
13
24
|
|
14
25
|
//**
|
15
26
|
an inline-block list that works in IE
|