smashing-layout 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. data/lib/smashing-layout.rb +2 -4
  2. data/stylesheets/_smashing-layout.sass +40 -40
  3. metadata +32 -60
  4. data/Gemfile +0 -7
  5. data/Rakefile +0 -30
  6. data/stylesheets/_smashing-layout.scss +0 -61
data/lib/smashing-layout.rb CHANGED
@@ -1,11 +1,9 @@
1
1
  require 'compass'
2
-
3
- # path from the library file to where you're keeping your compass stuff.
4
2
  Compass::Frameworks.register("smashing-layout", :path => "#{File.dirname(__FILE__)}/..")
5
3
 
6
4
  module SmashingLayout
7
5
 
8
- VERSION = "0.0.3".freeze
9
- DATE = "2011-3-20".freeze
6
+ VERSION = "0.0.4"
7
+ DATE = "2011-09-19"
10
8
 
11
9
  end
data/stylesheets/_smashing-layout.sass CHANGED
@@ -1,61 +1,61 @@
1
- @import compass/utilities
1
+ @import "compass"
2
2
 
3
3
  // Configuration
4
4
  $smashing-direction: right !default
5
- $smashing-max-width: 1200px !default
6
- $smashing-min-width: 900px !default
7
- $smashing-support-ie6: false !default
5
+ $smashing-max-width: 1100px !default
6
+ $smashing-min-width: 960px !default
7
+ $smashing-cushion: 0 2.5% !default
8
+ $smashing-devine: false !default
8
9
 
9
- // Layout logic variables
10
+ // Layout variables
10
11
  $smashing-divine-proportion: $smashing-min-width / 1.62
11
- $smashing-width: 95%
12
- $smashing-sidebar-width: floor($smashing-min-width - $smashing-divine-proportion)
12
+ $smashing-sidebar-width: 400px
13
+ $smashing-sidebar-width-divine: floor($smashing-min-width - $smashing-divine-proportion)
13
14
  $smashing-negative-sidebar-width: -(ceil($smashing-sidebar-width))
15
+ $smashing-negative-sidebar-width-divine: -(ceil($smashing-sidebar-width-divine))
14
16
 
15
- =smashing-layout($smashing-direction)
17
+ =smashing-layout
16
18
  +smashing-width
17
- +smashing-padding($smashing-direction)
18
- +smashing-columns($smashing-direction)
19
+ +smashing-padding
20
+ +smashing-columns
19
21
 
20
22
  // Sets a div's width to behave like the width of +smashing-layout
21
- // Assumes 2 inner wrapping div's .max-width and .min-width
23
+ // Assumes an inner wrapping div .width
22
24
  =smashing-width
23
- width: 100%
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
25
+ &
26
+ width: 100%
27
+ .width
28
+ +pie-clearfix
29
+ margin: 0 auto
30
+ min-width: $smashing-min-width
31
+ max-width: $smashing-max-width
32
+ padding: $smashing-cushion
41
33
 
42
34
  // Used only in +smashing-layout
43
- =smashing-padding($smashing-direction)
35
+ =smashing-padding
44
36
  .padding
37
+ +box-sizing(border-box)
45
38
  +pie-clearfix
46
- padding-#{$smashing-direction}: $smashing-sidebar-width
47
- width: auto
39
+ @if $smashing-devine
40
+ padding-#{$smashing-direction}: $smashing-sidebar-width-divine
41
+ @else
42
+ padding-#{$smashing-direction}: $smashing-sidebar-width
43
+ width: 100%
48
44
 
49
45
  // Used only in +smashing-layout
50
- =smashing-columns($smashing-direction)
46
+ =smashing-columns
51
47
  .column
48
+ +box-sizing(border-box)
52
49
  @if $smashing-direction == right
53
- float: left
54
- @else if $smashing-direction == left
55
- float: right
56
- position: relative
57
- &.primary
58
- width: 100%
59
- &.secondary
50
+ +float-left
51
+ @else
52
+ +float-right
53
+ .primary
54
+ width: 100%
55
+ .secondary
56
+ @if $smashing-devine
57
+ margin-#{$smashing-direction}: $smashing-negative-sidebar-width-divine
58
+ width: $smashing-sidebar-width-divine
59
+ @else
60
60
  margin-#{$smashing-direction}: $smashing-negative-sidebar-width
61
61
  width: $smashing-sidebar-width
metadata CHANGED
@@ -1,89 +1,61 @@
1
- --- !ruby/object:Gem::Specification
1
+ --- !ruby/object:Gem::Specification
2
2
  name: smashing-layout
3
- version: !ruby/object:Gem::Version
4
- hash: 25
5
- prerelease: false
6
- segments:
7
- - 0
8
- - 0
9
- - 3
10
- version: 0.0.3
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.4
5
+ prerelease:
11
6
  platform: ruby
12
- authors:
7
+ authors:
13
8
  - Adam Stacoviak
14
9
  autorequire:
15
10
  bindir: bin
16
11
  cert_chain: []
17
-
18
- date: 2011-03-20 00:00:00 -05:00
19
- default_executable:
20
- dependencies:
21
- - !ruby/object:Gem::Dependency
22
- version_requirements: &id001 !ruby/object:Gem::Requirement
12
+ date: 2011-09-19 00:00:00.000000000Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: compass
16
+ requirement: &70220532523400 !ruby/object:Gem::Requirement
23
17
  none: false
24
- requirements:
25
- - - ">="
26
- - !ruby/object:Gem::Version
27
- hash: 59
28
- segments:
29
- - 0
30
- - 10
31
- - 6
32
- version: 0.10.6
33
- requirement: *id001
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: 0.11.5
34
22
  type: :runtime
35
- name: compass
36
23
  prerelease: false
37
- description: A Sass experiment to recreate Smashing Magazine's layout (circa 2009) turned Compass extension
38
- email: adam@adamstacoviak.com
24
+ version_requirements: *70220532523400
25
+ description: A Sass experiment to recreate Smashing Magazine's layout (circa 2009)
26
+ email: adam@stacoviak.com
39
27
  executables: []
40
-
41
28
  extensions: []
42
-
43
29
  extra_rdoc_files: []
44
-
45
- files:
46
- - Gemfile
47
- - Rakefile
30
+ files:
48
31
  - README.mdown
49
32
  - lib/smashing-layout.rb
50
33
  - stylesheets/_smashing-layout.sass
51
- - stylesheets/_smashing-layout.scss
52
- has_rdoc: true
53
- homepage: http://adamstacoviak.com/
34
+ homepage: http://smashinglayout.com/
54
35
  licenses: []
55
-
56
36
  post_install_message:
57
37
  rdoc_options: []
58
-
59
- require_paths:
38
+ require_paths:
60
39
  - lib
61
- required_ruby_version: !ruby/object:Gem::Requirement
40
+ required_ruby_version: !ruby/object:Gem::Requirement
62
41
  none: false
63
- requirements:
64
- - - ">="
65
- - !ruby/object:Gem::Version
66
- hash: 3
67
- segments:
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: '0'
46
+ segments:
68
47
  - 0
69
- version: "0"
70
- required_rubygems_version: !ruby/object:Gem::Requirement
48
+ hash: -1884267593530934182
49
+ required_rubygems_version: !ruby/object:Gem::Requirement
71
50
  none: false
72
- requirements:
73
- - - ">="
74
- - !ruby/object:Gem::Version
75
- hash: 23
76
- segments:
77
- - 1
78
- - 3
79
- - 6
51
+ requirements:
52
+ - - ! '>='
53
+ - !ruby/object:Gem::Version
80
54
  version: 1.3.6
81
55
  requirements: []
82
-
83
56
  rubyforge_project:
84
- rubygems_version: 1.3.7
57
+ rubygems_version: 1.8.10
85
58
  signing_key:
86
59
  specification_version: 3
87
60
  summary: A Sass recreatation of Smashing Magazine.com's layout (circa 2009)
88
61
  test_files: []
89
-
data/Gemfile DELETED
@@ -1,7 +0,0 @@
1
- source 'http://rubygems.org'
2
-
3
- # Source: https://github.com/nex3/haml
4
- gem "haml", "~> 3.0.25"
5
-
6
- # Source: https://github.com/chriseppstein/compass
7
- gem "compass", "~> 0.10.6"
data/Rakefile DELETED
@@ -1,30 +0,0 @@
1
- require 'rubygems'
2
- require 'bundler/setup'
3
-
4
- Bundler.require(:default)
5
-
6
- require 'lib/smashing-layout'
7
-
8
- namespace :sass do
9
-
10
- desc "Converts the Sass to SCSS"
11
- task :convert do
12
- puts "*** Converting Sass to SCSS ***"
13
- system "sass-convert stylesheets/*.sass stylesheets/*.scss"
14
- end
15
-
16
- end
17
-
18
- namespace :gem do
19
-
20
- desc "Build the gem"
21
- task :build do
22
- system "gem build *.gemspec"
23
- end
24
-
25
- desc "Build and release the gem"
26
- task :release => :build do
27
- system "gem push smashing-layout-#{SmashingLayout::VERSION}.gem"
28
- end
29
-
30
- end
data/stylesheets/_smashing-layout.scss DELETED
@@ -1,61 +0,0 @@
1
- @import "compass/utilities";
2
-
3
- // Configuration
4
- $smashing-direction: right !default;
5
- $smashing-max-width: 1200px !default;
6
- $smashing-min-width: 900px !default;
7
- $smashing-support-ie6: false !default;
8
-
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));
14
-
15
- @mixin smashing-layout($smashing-direction) {
16
- @include smashing-width;
17
- @include smashing-padding($smashing-direction);
18
- @include smashing-columns($smashing-direction); }
19
-
20
- // Sets a div's width to behave like the width of +smashing-layout
21
- // Assumes 2 inner wrapping div's .max-width and .min-width
22
- @mixin smashing-width {
23
- width: 100%;
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; } } }
41
-
42
- // Used only in +smashing-layout
43
- @mixin smashing-padding($smashing-direction) {
44
- .padding {
45
- @include pie-clearfix;
46
- padding-#{$smashing-direction}: $smashing-sidebar-width;
47
- width: auto; } }
48
-
49
- // Used only in +smashing-layout
50
- @mixin smashing-columns($smashing-direction) {
51
- .column {
52
- @if $smashing-direction == right {
53
- float: left; }
54
- @else if $smashing-direction == left {
55
- float: right; }
56
- position: relative;
57
- &.primary {
58
- width: 100%; }
59
- &.secondary {
60
- margin-#{$smashing-direction}: $smashing-negative-sidebar-width;
61
- width: $smashing-sidebar-width; } } }