ericam-compass-susy-plugin 0.1.6 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +5 -5
- 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/README.mkdn
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
Susy - Compass Plugin
|
2
2
|
================================
|
3
3
|
|
4
|
-
Let me introduce you to Susy
|
4
|
+
Let me introduce you to Susy.
|
5
5
|
|
6
6
|
Susy is a semantic CSS framework creator built native to [Compass](http://compass-style.org/).
|
7
7
|
|
8
8
|
Susy is an expert at designing elastic (or fixed, if you swing that way) grids that will never activate that bloody side-scroll bar. Susy sets your width on the outer element (@grid-container@), adds a @max-width@ of @99%@ and builds the rest of your grid in percentages of the whole.
|
9
9
|
|
10
|
-
Columns can also be nested by declaring the context along with the target width. Etc
|
10
|
+
Columns can also be nested by declaring the context along with the target width. Etc.
|
11
11
|
|
12
12
|
Install
|
13
13
|
=======
|
@@ -21,13 +21,13 @@ Create a Susy-based Compass Project
|
|
21
21
|
|
22
22
|
compass -r susy -f susy <project name>
|
23
23
|
|
24
|
-
Then edit your `
|
24
|
+
Then edit your `_base.sass`, `screen.sass` and `print.sass` files accordingly. A reset is added automatically.
|
25
25
|
|
26
26
|
Customizing your Grid System
|
27
27
|
============================
|
28
28
|
|
29
|
-
To create a grid system, set the
|
30
|
-
|
29
|
+
To create a grid system, set the `!grid_unit`, `!total_cols`, `!col_width`, and
|
30
|
+
`!gutter_width` variables in your `base.sass` and then use the `+grid-container` mixin to declare
|
31
31
|
your container element.
|
32
32
|
|
33
33
|
Example:
|
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
|