carljm-compass-susy-plugin 0.1.6 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/VERSION +1 -1
- data/compass-susy-plugin.gemspec +1 -1
- data/lib/susy/sass_extensions.rb +46 -3
- data/sass/susy/_grid.sass +6 -8
- data/templates/project/_base.sass +9 -6
- metadata +1 -1
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.
|
1
|
+
0.2.0
|
data/compass-susy-plugin.gemspec
CHANGED
data/lib/susy/sass_extensions.rb
CHANGED
@@ -1,7 +1,50 @@
|
|
1
1
|
require 'sass'
|
2
2
|
|
3
3
|
module Sass::Script::Functions
|
4
|
-
|
5
|
-
|
4
|
+
# set the Susy column and gutter widths and number of columns
|
5
|
+
# column and gutter widths should be sent as unitless numbers,
|
6
|
+
# though they may "really" be ems or pixels (_grid.sass handles units).
|
7
|
+
# return total width of container (without units)
|
8
|
+
def container(total_columns, column_width, gutter_width)
|
9
|
+
@@susy_total_columns = total_columns.value
|
10
|
+
@@susy_column_width = Float(column_width.value)
|
11
|
+
@@susy_gutter_width = Float(gutter_width.value)
|
12
|
+
context
|
6
13
|
end
|
7
|
-
|
14
|
+
|
15
|
+
# return the width of 'n' columns plus 'n - 1' gutters
|
16
|
+
def context(n = nil)
|
17
|
+
begin
|
18
|
+
n = n.value
|
19
|
+
rescue NoMethodError
|
20
|
+
n = @@susy_total_columns
|
21
|
+
end
|
22
|
+
c, g = [@@susy_column_width, @@susy_gutter_width]
|
23
|
+
Sass::Script::Number.new((n * c) + ((n - 1) * g))
|
24
|
+
end
|
25
|
+
|
26
|
+
# return the percentage width of 'number' columns in a context of
|
27
|
+
# 'context_columns'
|
28
|
+
def columns(number, context_columns = nil)
|
29
|
+
n = number.value
|
30
|
+
context_width = context(context_columns).value
|
31
|
+
c, g = [@@susy_column_width, @@susy_gutter_width]
|
32
|
+
Sass::Script::Number.new((((n * c) + ((n - 1) * g)) / context_width) * 100)
|
33
|
+
end
|
34
|
+
|
35
|
+
# return the percentage width of a single gutter in a context of
|
36
|
+
# 'context_columns'
|
37
|
+
def gutter(context_columns = nil)
|
38
|
+
context_width = context(context_columns).value
|
39
|
+
g = @@susy_gutter_width
|
40
|
+
Sass::Script::Number.new((g / context_width) * 100)
|
41
|
+
end
|
42
|
+
|
43
|
+
# return the percentage width of a single column in a context of
|
44
|
+
# 'context_columns'
|
45
|
+
def column(context_columns = nil)
|
46
|
+
context_width = context(context_columns).value
|
47
|
+
c = @@susy_column_width
|
48
|
+
Sass::Script::Number.new((c / context_width) * 100)
|
49
|
+
end
|
50
|
+
end
|
data/sass/susy/_grid.sass
CHANGED
@@ -2,22 +2,20 @@
|
|
2
2
|
!total_cols ||= 16
|
3
3
|
!col_width ||= 4
|
4
4
|
!gutter_width ||= 1
|
5
|
+
!container_width = container(!total_cols, !col_width, !gutter_width)
|
5
6
|
|
6
7
|
=grid-container
|
7
8
|
+clearfix
|
8
9
|
:margin-left auto
|
9
10
|
:margin-right auto
|
10
|
-
:width=
|
11
|
+
:width= !container_width + !grid_unit
|
11
12
|
:max-width 99%
|
12
13
|
|
13
|
-
=get-col-width(!n, !context = !total_cols)
|
14
|
-
:width= ((!n * !col_width) + ((!n - 1) * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
|
15
|
-
|
16
14
|
=grid-col(!n, !context = !total_cols)
|
17
|
-
|
15
|
+
:width= columns(!n, !context) + "%"
|
18
16
|
:display inline
|
19
17
|
:float left
|
20
|
-
:margin-right=
|
18
|
+
:margin-right= gutter(!context) + "%"
|
21
19
|
|
22
20
|
=last
|
23
21
|
:margin-right= 0
|
@@ -27,7 +25,7 @@
|
|
27
25
|
:float right
|
28
26
|
|
29
27
|
=grid-prefix(!n, !context = !total_cols)
|
30
|
-
:padding-left= (
|
28
|
+
:padding-left= columns(!n, !context) + gutter(!context) + "%"
|
31
29
|
|
32
30
|
=grid-suffix(!n, !context = !total_cols)
|
33
|
-
:padding-right= (
|
31
|
+
:padding-right= columns(!n, !context) + gutter(!context) + "%"
|
@@ -7,16 +7,19 @@
|
|
7
7
|
/* RESET STYLES
|
8
8
|
@import compass/reset.sass
|
9
9
|
|
10
|
-
// MIXINS
|
11
|
-
@import susy/utils.sass
|
12
|
-
@import susy/grid.sass
|
13
|
-
|
14
10
|
// GRID
|
11
|
+
// override these values as needed for your grid layout
|
12
|
+
|
15
13
|
// !grid_unit = "em"
|
16
14
|
// !total_cols = 10
|
17
15
|
// !col_width = 7
|
18
16
|
// !gutter_width = 1
|
19
17
|
|
18
|
+
// MIXINS
|
19
|
+
// (don't move these @imports above the GRID overrides)
|
20
|
+
@import susy/utils.sass
|
21
|
+
@import susy/grid.sass
|
22
|
+
|
20
23
|
|
21
24
|
// COLORS
|
22
25
|
!dark = #000
|
@@ -29,7 +32,7 @@
|
|
29
32
|
!base_font_size_px ||= 12
|
30
33
|
!base_line_height_px ||= 18
|
31
34
|
|
32
|
-
// SUSY
|
35
|
+
// SUSY can do the math to make that relative
|
33
36
|
!base_line_height = (!base_line_height_px / !base_font_size_px) + "em"
|
34
37
|
!base_font_size = (!base_font_size_px / 16) + "em"
|
35
38
|
|
@@ -99,4 +102,4 @@ del
|
|
99
102
|
:text-decoration line-through
|
100
103
|
|
101
104
|
/* replaced tags
|
102
|
-
img
|
105
|
+
img
|