smashing-layout 0.0.3 → 0.0.4
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/lib/smashing-layout.rb +2 -4
- data/stylesheets/_smashing-layout.sass +40 -40
- metadata +32 -60
- data/Gemfile +0 -7
- data/Rakefile +0 -30
- 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.
|
9
|
-
DATE = "2011-
|
6
|
+
VERSION = "0.0.4"
|
7
|
+
DATE = "2011-09-19"
|
10
8
|
|
11
9
|
end
|
@@ -1,61 +1,61 @@
|
|
1
|
-
@import compass
|
1
|
+
@import "compass"
|
2
2
|
|
3
3
|
// Configuration
|
4
4
|
$smashing-direction: right !default
|
5
|
-
$smashing-max-width:
|
6
|
-
$smashing-min-width:
|
7
|
-
$smashing-
|
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
|
10
|
+
// Layout variables
|
10
11
|
$smashing-divine-proportion: $smashing-min-width / 1.62
|
11
|
-
$smashing-width:
|
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
|
17
|
+
=smashing-layout
|
16
18
|
+smashing-width
|
17
|
-
+smashing-padding
|
18
|
-
+smashing-columns
|
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
|
23
|
+
// Assumes an inner wrapping div .width
|
22
24
|
=smashing-width
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
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
|
35
|
+
=smashing-padding
|
44
36
|
.padding
|
37
|
+
+box-sizing(border-box)
|
45
38
|
+pie-clearfix
|
46
|
-
|
47
|
-
|
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
|
46
|
+
=smashing-columns
|
51
47
|
.column
|
48
|
+
+box-sizing(border-box)
|
52
49
|
@if $smashing-direction == right
|
53
|
-
float
|
54
|
-
@else
|
55
|
-
float
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
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
|
-
|
5
|
-
prerelease:
|
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
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
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
|
-
|
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
|
-
|
38
|
-
|
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
|
-
|
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
|
-
|
67
|
-
segments:
|
42
|
+
requirements:
|
43
|
+
- - ! '>='
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: '0'
|
46
|
+
segments:
|
68
47
|
- 0
|
69
|
-
|
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.
|
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
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
|
@@ -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; } } }
|