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 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
- * That's it for the basics! Here's a sample Susy grid layout:
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.0
1
+ 0.4.1
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |s|
4
4
  s.name = %q{compass-susy-plugin}
5
- s.version = "0.4.0"
5
+ s.version = "0.4.1"
6
6
 
7
7
  s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
8
8
  s.authors = ["Eric Meyer"]
@@ -117,10 +117,14 @@ And style the links:
117
117
  &:focus, &:hover, &:active
118
118
  :color= !light
119
119
  :border-bottom
120
- :width .1429em
120
+ :width= px2em(2) + "em"
121
121
  :style dashed
122
122
 
123
- (`.1429em` is just an approximation of `2px` in terms of our em units.)
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/susyss/).
339
+ * [My final styles](../src/) for [the site](http://www.oddbird.net/susy/).
336
340
 
@@ -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 override `!nested` for nested columns
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
- - must override `!nested` for nested columns
65
- =omega(!n = false)
66
- @if !n
67
- :margin-right= 0
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= side_gutter() + "%"
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
- @if !nested
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
- :margin-right= -1%
76
+ @if !nested
77
+ :#margin-right -1%
85
78
  @else
86
- :margin-right= side_gutter() - 1 + "%"
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
- !base_font_size = (!base_font_size_px / 16) * 100 + "%"
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
  //**
@@ -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 top left
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
@@ -46,8 +46,6 @@
46
46
 
47
47
  /*
48
48
  #page
49
- +show-grid("../images/grid.png")
50
- div
51
- :background rgba(0,0,0,.125)
49
+ +show-grid("grid.png")
52
50
 
53
51
  /* @end */
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ericam-compass-susy-plugin
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.4.0
4
+ version: 0.4.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Eric Meyer