smashing-layout 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. data/README.mdown +15 -4
  2. data/lib/smashing-layout.rb +1 -1
  3. data/stylesheets/_smashing-layout.sass +36 -24
  4. data/stylesheets/_smashing-layout.scss +36 -24
  5. metadata +3 -3
data/README.mdown CHANGED
@@ -19,11 +19,22 @@ The `smashing-layout` mixin sets up the core layout based on the default variabl
19
19
  Here is the default configuration of Smashing Layout. If you plan to override this, be sure to do so above the import of smashing-layout.
20
20
 
21
21
  // Configuration
22
- $direction: right
23
- $max-width: 1200px
24
- $min-width: 900px
22
+ $smashing-direction: right
23
+ $smashing-max-width: 1200px
24
+ $smashing-min-width: 900px
25
+ $smashing-support-ie6: false
25
26
 
26
- This assumes the following markup structure to create the layout.
27
+ The following markup structure is needed to create the Smashing Layout.
28
+
29
+ #your-id
30
+ .max-width
31
+ .padding
32
+ .primary.column
33
+ ...
34
+ .secondary.column
35
+ ...
36
+
37
+ If you have set the variable `$smashing-support-ie6` to `true` (set to `false` by default), the following markup structure is needed to create the Smashing Layout.
27
38
 
28
39
  #your-id
29
40
  .max-width
data/lib/smashing-layout.rb CHANGED
@@ -5,7 +5,7 @@ Compass::Frameworks.register("smashing-layout", :path => "#{File.dirname(__FILE_
5
5
 
6
6
  module SmashingLayout
7
7
 
8
- VERSION = "0.0.2".freeze
8
+ VERSION = "0.0.3".freeze
9
9
  DATE = "2011-3-20".freeze
10
10
 
11
11
  end
data/stylesheets/_smashing-layout.sass CHANGED
@@ -1,49 +1,61 @@
1
1
  @import compass/utilities
2
2
 
3
3
  // Configuration
4
- $direction: right !default
5
- $max-width: 1200px !default
6
- $min-width: 900px !default
4
+ $smashing-direction: right !default
5
+ $smashing-max-width: 1200px !default
6
+ $smashing-min-width: 900px !default
7
+ $smashing-support-ie6: false !default
7
8
 
8
- // Smashing Layout logic
9
- $divine-proportion: $min-width / 1.62
10
- $width: 95%
11
- $sidebar-width: floor($min-width - $divine-proportion)
12
- $negative-sidebar-width: -(ceil($sidebar-width))
9
+ // Layout logic variables
10
+ $smashing-divine-proportion: $smashing-min-width / 1.62
11
+ $smashing-width: 95%
12
+ $smashing-sidebar-width: floor($smashing-min-width - $smashing-divine-proportion)
13
+ $smashing-negative-sidebar-width: -(ceil($smashing-sidebar-width))
13
14
 
14
- =smashing-layout($direction)
15
+ =smashing-layout($smashing-direction)
15
16
  +smashing-width
16
- +smashing-padding($direction)
17
- +smashing-columns($direction)
17
+ +smashing-padding($smashing-direction)
18
+ +smashing-columns($smashing-direction)
18
19
 
19
20
  // Sets a div's width to behave like the width of +smashing-layout
20
21
  // Assumes 2 inner wrapping div's .max-width and .min-width
21
22
  =smashing-width
22
23
  width: 100%
23
- .max-width
24
- +pie-clearfix
25
- margin: 0 auto
26
- min-width: $min-width
27
- max-width: $max-width
28
- width: $width
24
+ @if $smashing-support-ie6
25
+ .max-width
26
+ margin: 0 auto
27
+ max-width: $smashing-max-width
28
+ width: $smashing-width
29
+ .min-width
30
+ +pie-clearfix
31
+ margin: 0 auto
32
+ min-width: $smashing-min-width
33
+ width: $smashing-width
34
+ @else
35
+ .max-width
36
+ +pie-clearfix
37
+ margin: 0 auto
38
+ min-width: $smashing-min-width
39
+ max-width: $smashing-max-width
40
+ width: $smashing-width
29
41
 
30
42
  // Used only in +smashing-layout
31
- =smashing-padding($direction)
43
+ =smashing-padding($smashing-direction)
32
44
  .padding
33
45
  +pie-clearfix
34
- padding-#{$direction}: $sidebar-width
46
+ padding-#{$smashing-direction}: $smashing-sidebar-width
35
47
  width: auto
36
48
 
37
49
  // Used only in +smashing-layout
38
- =smashing-columns($direction)
50
+ =smashing-columns($smashing-direction)
39
51
  .column
40
- @if $direction == right
52
+ @if $smashing-direction == right
41
53
  float: left
42
- @else if $direction == left
54
+ @else if $smashing-direction == left
43
55
  float: right
44
56
  position: relative
45
57
  &.primary
46
58
  width: 100%
47
59
  &.secondary
48
- margin-#{$direction}: $negative-sidebar-width
49
- width: $sidebar-width
60
+ margin-#{$smashing-direction}: $smashing-negative-sidebar-width
61
+ width: $smashing-sidebar-width
data/stylesheets/_smashing-layout.scss CHANGED
@@ -1,49 +1,61 @@
1
1
  @import "compass/utilities";
2
2
 
3
3
  // Configuration
4
- $direction: right !default;
5
- $max-width: 1200px !default;
6
- $min-width: 900px !default;
4
+ $smashing-direction: right !default;
5
+ $smashing-max-width: 1200px !default;
6
+ $smashing-min-width: 900px !default;
7
+ $smashing-support-ie6: false !default;
7
8
 
8
- // Smashing Layout logic
9
- $divine-proportion: $min-width / 1.62;
10
- $width: 95%;
11
- $sidebar-width: floor($min-width - $divine-proportion);
12
- $negative-sidebar-width: -(ceil($sidebar-width));
9
+ // Layout logic variables
10
+ $smashing-divine-proportion: $smashing-min-width / 1.62;
11
+ $smashing-width: 95%;
12
+ $smashing-sidebar-width: floor($smashing-min-width - $smashing-divine-proportion);
13
+ $smashing-negative-sidebar-width: -(ceil($smashing-sidebar-width));
13
14
 
14
- @mixin smashing-layout($direction) {
15
+ @mixin smashing-layout($smashing-direction) {
15
16
  @include smashing-width;
16
- @include smashing-padding($direction);
17
- @include smashing-columns($direction); }
17
+ @include smashing-padding($smashing-direction);
18
+ @include smashing-columns($smashing-direction); }
18
19
 
19
20
  // Sets a div's width to behave like the width of +smashing-layout
20
21
  // Assumes 2 inner wrapping div's .max-width and .min-width
21
22
  @mixin smashing-width {
22
23
  width: 100%;
23
- .max-width {
24
- @include pie-clearfix;
25
- margin: 0 auto;
26
- min-width: $min-width;
27
- max-width: $max-width;
28
- width: $width; } }
24
+ @if $smashing-support-ie6 {
25
+ .max-width {
26
+ margin: 0 auto;
27
+ max-width: $smashing-max-width;
28
+ width: $smashing-width; }
29
+ .min-width {
30
+ @include pie-clearfix;
31
+ margin: 0 auto;
32
+ min-width: $smashing-min-width;
33
+ width: $smashing-width; } }
34
+ @else {
35
+ .max-width {
36
+ @include pie-clearfix;
37
+ margin: 0 auto;
38
+ min-width: $smashing-min-width;
39
+ max-width: $smashing-max-width;
40
+ width: $smashing-width; } } }
29
41
 
30
42
  // Used only in +smashing-layout
31
- @mixin smashing-padding($direction) {
43
+ @mixin smashing-padding($smashing-direction) {
32
44
  .padding {
33
45
  @include pie-clearfix;
34
- padding-#{$direction}: $sidebar-width;
46
+ padding-#{$smashing-direction}: $smashing-sidebar-width;
35
47
  width: auto; } }
36
48
 
37
49
  // Used only in +smashing-layout
38
- @mixin smashing-columns($direction) {
50
+ @mixin smashing-columns($smashing-direction) {
39
51
  .column {
40
- @if $direction == right {
52
+ @if $smashing-direction == right {
41
53
  float: left; }
42
- @else if $direction == left {
54
+ @else if $smashing-direction == left {
43
55
  float: right; }
44
56
  position: relative;
45
57
  &.primary {
46
58
  width: 100%; }
47
59
  &.secondary {
48
- margin-#{$direction}: $negative-sidebar-width;
49
- width: $sidebar-width; } } }
60
+ margin-#{$smashing-direction}: $smashing-negative-sidebar-width;
61
+ width: $smashing-sidebar-width; } } }
metadata CHANGED
@@ -1,13 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: smashing-layout
3
3
  version: !ruby/object:Gem::Version
4
- hash: 27
4
+ hash: 25
5
5
  prerelease: false
6
6
  segments:
7
7
  - 0
8
8
  - 0
9
- - 2
10
- version: 0.0.2
9
+ - 3
10
+ version: 0.0.3
11
11
  platform: ruby
12
12
  authors:
13
13
  - Adam Stacoviak