carljm-compass-susy-plugin 0.1.4 → 0.1.5
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/README.mkdn +21 -10
- data/VERSION +1 -1
- data/compass-susy-plugin.gemspec +1 -1
- data/sass/susy/_grid.sass +17 -16
- data/sass/susy/_utils.sass +2 -2
- metadata +1 -1
data/README.mkdn
CHANGED
@@ -15,14 +15,14 @@ Create a Susy-based Compass Project
|
|
15
15
|
|
16
16
|
compass -r susy -f susy <project name>
|
17
17
|
|
18
|
-
Then edit your `screen.sass` and `print.sass` files accordingly. A reset is added automatically.
|
18
|
+
Then edit your `base.sass`, `screen.sass` and `print.sass` files accordingly. A reset is added automatically.
|
19
19
|
|
20
20
|
Customizing your Grid System
|
21
21
|
============================
|
22
22
|
|
23
23
|
To create a grid system, set the !grid_unit, !total_cols, !col_width, and
|
24
|
-
!gutter_width variables and then use the `+grid-container` mixin to declare
|
25
|
-
|
24
|
+
!gutter_width variables in your `base.sass` and then use the `+grid-container` mixin to declare
|
25
|
+
your container element.
|
26
26
|
|
27
27
|
Example:
|
28
28
|
|
@@ -41,16 +41,19 @@ Making Semantic Grids
|
|
41
41
|
|
42
42
|
* Use the `+grid-container` mixin to declare your container element.
|
43
43
|
|
44
|
-
* Use the `+grid-col` mixin to declare a grid element.
|
44
|
+
* Use the `+grid-col` mixin to declare a grid element. The first argument
|
45
45
|
is the number of cols, the second is the size (in grid columns) of the
|
46
|
-
containing element (defaults to the containers total_cols).
|
47
|
-
|
48
|
-
|
49
|
-
|
46
|
+
containing element (defaults to the containers total_cols).
|
47
|
+
|
48
|
+
* Use the `+last` mixin to declare the last comumn in a row.
|
49
|
+
|
50
|
+
* Use the `+right` mixin to float a grid item to the right instead of left.
|
50
51
|
|
51
52
|
* Use the `+grid-prefix` and `+grid-suffix` mixins to add grid columns
|
52
53
|
before or after a grid element.
|
53
54
|
|
55
|
+
|
56
|
+
|
54
57
|
Example:
|
55
58
|
|
56
59
|
#page
|
@@ -58,5 +61,13 @@ Example:
|
|
58
61
|
#left-nav
|
59
62
|
+grid-col(3)
|
60
63
|
#main-content
|
61
|
-
+grid-prefix(
|
62
|
-
+grid-col(4, 10
|
64
|
+
+grid-prefix(2)
|
65
|
+
+grid-col(4, 10)
|
66
|
+
+last
|
67
|
+
+right
|
68
|
+
|
69
|
+
Extra Utility Mixins
|
70
|
+
=====================
|
71
|
+
|
72
|
+
Extra utilities are included in Susy's `utils.sass` file, with additional list options,
|
73
|
+
experimental (CSS3/proprietary) CSS, and more.
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.1.
|
1
|
+
0.1.5
|
data/compass-susy-plugin.gemspec
CHANGED
data/sass/susy/_grid.sass
CHANGED
@@ -3,30 +3,31 @@
|
|
3
3
|
!col_width ||= 4
|
4
4
|
!gutter_width ||= 1
|
5
5
|
|
6
|
-
=grid-container
|
6
|
+
=grid-container
|
7
|
+
+clearfix
|
7
8
|
:margin-left auto
|
8
9
|
:margin-right auto
|
9
|
-
:
|
10
|
-
:width= (!grid * !col_width) + ((!grid - 1) * !gutter_width) + !grid_unit
|
10
|
+
:width= (!total_cols * !col_width) + ((!total_cols - 1) * !gutter_width) + !grid_unit
|
11
11
|
:max-width 99%
|
12
12
|
|
13
|
-
=
|
13
|
+
=get-col-width(!n, !context = !total_cols)
|
14
14
|
:width= ((!n * !col_width) + ((!n - 1) * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
|
15
15
|
|
16
|
-
=grid-col(!n, !
|
17
|
-
+
|
16
|
+
=grid-col(!n, !context = !total_cols)
|
17
|
+
+get-col-width(!n, !context)
|
18
18
|
:display inline
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
19
|
+
:float left
|
20
|
+
:margin-right= !gutter_width / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
|
21
|
+
|
22
|
+
=last
|
23
|
+
:margin-right= 0
|
24
|
+
|
25
|
+
=right
|
26
|
+
:display inline
|
27
|
+
:float right
|
27
28
|
|
28
29
|
=grid-prefix(!n, !context = !total_cols)
|
29
|
-
:padding-left= ((!n * !col_width) + (
|
30
|
+
:padding-left= ((!n * !col_width) + (!n * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
|
30
31
|
|
31
32
|
=grid-suffix(!n, !context = !total_cols)
|
32
|
-
:padding-right= ((!n * !col_width) + (
|
33
|
+
:padding-right= ((!n * !col_width) + (!n * !gutter_width)) / ((!context * !col_width) + ((!context - 1) * !gutter_width)) * 100 + "%"
|
data/sass/susy/_utils.sass
CHANGED
@@ -26,10 +26,10 @@
|
|
26
26
|
// hide an element from the viewport, but keep it for accessability
|
27
27
|
=hide
|
28
28
|
:position absolute
|
29
|
-
:top -
|
29
|
+
:top -9999em
|
30
30
|
|
31
31
|
// a skip-to-content accessibility link that will appear on focus
|
32
|
-
=skip-link(
|
32
|
+
=skip-link(!t = 0, !r = fales, !b = false, !l = false)
|
33
33
|
+hide
|
34
34
|
:display block
|
35
35
|
&:focus
|