eleven40_16 1.2.1

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.md ADDED
@@ -0,0 +1,39 @@
1
+ # eleven40-compass extension
2
+
3
+ This is a Compass-CSS extension to enable the 1140px fluid layout style, originally described at http://cssgrid.net/
4
+
5
+ The main problem with the styles provided is that is makes your markup and style non-semantic. Compass and SASS fixes that.
6
+
7
+ This extension is not quite in line with the original, but will be soon. It currently only has screen and mobile support.
8
+
9
+ ## Usage
10
+
11
+ ### Mixins
12
+
13
+ This extension provides mixins to do what the classes in the original did. In general, you can follow this format:
14
+
15
+ @include eleven40-classname
16
+
17
+ For example:
18
+
19
+ @include eleven40-container
20
+
21
+ replaces the
22
+
23
+ .container
24
+
25
+ css class.
26
+
27
+ The same applies for the row class all the col classes. Make sure you use the eleven40-last mixin for the last column, just like in the css class version.
28
+
29
+ ### Mobile
30
+
31
+ To make a mobile stylesheet, simply:
32
+
33
+ @import "eleven40/mobile";
34
+
35
+ This will include the mobile styles that will overload the default screen styles.
36
+
37
+ ## Install
38
+
39
+ gem install eleven40
data/lib/eleven40.rb ADDED
@@ -0,0 +1,2 @@
1
+ require 'compass'
2
+ Compass::Frameworks.register("eleven40", :path => "#{File.dirname(__FILE__)}/..")
@@ -0,0 +1,4 @@
1
+ // This is your framework's main stylesheet. Use it to import all default modules.
2
+
3
+ @import "eleven40/reset";
4
+ @import "eleven40/base";
@@ -0,0 +1,109 @@
1
+ $mobile: false;
2
+
3
+ @mixin eleven40-container {
4
+ @if $mobile == true
5
+ {
6
+ @include eleven40-mobile-full;
7
+ }
8
+ @else
9
+ {
10
+ padding-left: 20px;
11
+ padding-right: 20px;
12
+ }
13
+ }
14
+
15
+ @mixin eleven40-row {
16
+ @if $mobile == true
17
+ {
18
+ @include eleven40-mobile-full;
19
+ }
20
+ @else
21
+ {
22
+ width: 100%;
23
+ max-width: 1140px;
24
+ margin: 0 auto;
25
+ overflow: hidden;
26
+ }
27
+ }
28
+
29
+ // $default-width should include the %
30
+ @mixin eleven40-subcolumn($default-width) {
31
+ @if $mobile == true
32
+ {
33
+ @include eleven40-mobile-column;
34
+ }
35
+ @else
36
+ {
37
+ width: $default-width;
38
+ margin-right: 2.4%;
39
+ float: left;
40
+ }
41
+ }
42
+
43
+ @mixin eleven40-onecol {
44
+ @include eleven40-subcolumn(4%);
45
+ }
46
+
47
+ @mixin eleven40-twocol {
48
+ @include eleven40-subcolumn(10.4%);
49
+ }
50
+
51
+ @mixin eleven40-threecol {
52
+ @include eleven40-subcolumn(16.8%);
53
+ }
54
+
55
+ @mixin eleven40-fourcol {
56
+ @include eleven40-subcolumn(23.2%);
57
+ }
58
+
59
+ @mixin eleven40-fivecol {
60
+ @include eleven40-subcolumn(29.6%);
61
+ }
62
+
63
+ @mixin eleven40-sixcol {
64
+ @include eleven40-subcolumn(36%);
65
+ }
66
+
67
+ @mixin eleven40-sevencol {
68
+ @include eleven40-subcolumn(42.4%);
69
+ }
70
+
71
+ @mixin eleven40-eightcol {
72
+ @include eleven40-subcolumn(48.8%);
73
+ }
74
+
75
+ @mixin eleven40-ninecol {
76
+ @include eleven40-subcolumn(55.2%);
77
+ }
78
+
79
+ @mixin eleven40-tencol {
80
+ @include eleven40-subcolumn(61.6%);
81
+ }
82
+
83
+ @mixin eleven40-elevencol {
84
+ @include eleven40-subcolumn(68%);
85
+ }
86
+
87
+ @mixin eleven40-twelvecol {
88
+ @include eleven40-subcolumn(74.4%);
89
+ }
90
+
91
+ @mixin eleven40-thirteencol {
92
+ @include eleven40-subcolumn(80.8%);
93
+ }
94
+
95
+ @mixin eleven40-fourteencol {
96
+ @include eleven40-subcolumn(87.2%);
97
+ }
98
+
99
+ @mixin eleven40-fifteencol {
100
+ @include eleven40-subcolumn(93.6%);
101
+ }
102
+
103
+ @mixin eleven40-sixteencol {
104
+ @include eleven40-subcolumn(100%);
105
+ }
106
+
107
+ @mixin eleven40-last {
108
+ margin-right: 0px;
109
+ }
@@ -0,0 +1,64 @@
1
+
2
+ @mixin eleven40-onecol {
3
+ @include eleven40-subcolumn(3.95%);
4
+ }
5
+
6
+ @mixin eleven40-twocol {
7
+ @include eleven40-subcolumn(10.3%);
8
+ }
9
+
10
+ @mixin eleven40-threecol {
11
+ @include eleven40-subcolumn(16.6%);
12
+ }
13
+
14
+ @mixin eleven40-fourcol {
15
+ @include eleven40-subcolumn(22.9%);
16
+ }
17
+
18
+ @mixin eleven40-fivecol {
19
+ @include eleven40-subcolumn(29.25%);
20
+ }
21
+
22
+ @mixin eleven40-sixcol {
23
+ @include eleven40-subcolumn(35.55%);
24
+ }
25
+
26
+ @mixin eleven40-sevencol {
27
+ @include eleven40-subcolumn(41.85%);
28
+ }
29
+
30
+ @mixin eleven40-eightcol {
31
+ @include eleven40-subcolumn(48.2%);
32
+ }
33
+
34
+ @mixin eleven40-ninecol {
35
+ @include eleven40-subcolumn(54.5%);
36
+ }
37
+
38
+ @mixin eleven40-tencol {
39
+ @include eleven40-subcolumn(60.8%);
40
+ }
41
+
42
+ @mixin eleven40-elevencol {
43
+ @include eleven40-subcolumn(67.1%);
44
+ }
45
+
46
+ @mixin eleven40-twelvecol {
47
+ @include eleven40-subcolumn(73.45%);
48
+ }
49
+
50
+ @mixin eleven40-thirteencol {
51
+ @include eleven40-subcolumn(79.75%);
52
+ }
53
+
54
+ @mixin eleven40-fourteencol {
55
+ @include eleven40-subcolumn(86.05%);
56
+ }
57
+
58
+ @mixin eleven40-fifteencol {
59
+ @include eleven40-subcolumn(92.4%);
60
+ }
61
+
62
+ @mixin eleven40-sixteencol {
63
+ @include eleven40-subcolumn(98.7%);
64
+ }
@@ -0,0 +1,18 @@
1
+ $mobile: true;
2
+
3
+ @mixin eleven40-mobile-column {
4
+ width: auto;
5
+ float: none;
6
+ margin-left: 0px;
7
+ margin-right: 0px;
8
+ padding-left: 20px;
9
+ padding-right: 20px;
10
+ }
11
+
12
+ @mixin eleven40-mobile-full {
13
+ width: 100%;
14
+ margin-left: 0px;
15
+ margin-right: 0px;
16
+ padding-left: 0px;
17
+ padding-right: 0px;
18
+ }
@@ -0,0 +1,3 @@
1
+ @import "reset/utilities";
2
+
3
+ @include eleven40-global-reset;
@@ -0,0 +1,6 @@
1
+ @mixin eleven40-smallscreen-reset {
2
+ body {
3
+ font-size: 0.8em; /* Makes type a bit smaller at 1024 so layout doesn't look unbalanced */
4
+ line-height: 1.5em; /* As above */
5
+ }
6
+ }
@@ -0,0 +1,75 @@
1
+ @mixin eleven40-typography
2
+ {
3
+ /* Type & image presets */
4
+
5
+ img, object, embed {
6
+ margin-bottom: 20px;
7
+ }
8
+
9
+ body {
10
+ font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
11
+ font-size: 14px;
12
+ line-height: 24px; /* Changing this will break the baseline grid. */
13
+ -webkit-text-size-adjust: none; /* Stops the iPhone scalling type up */
14
+ }
15
+
16
+ a {
17
+ text-decoration: none;
18
+ color: #005698;
19
+ font-weight: bold;
20
+ border-bottom: 1px solid #adadad;
21
+ }
22
+
23
+ a:hover {
24
+ color: #000;
25
+ border-bottom: none;
26
+ }
27
+
28
+ a img {
29
+ display: block; /* Stops image links getting text link styles */
30
+ }
31
+
32
+ img {
33
+ -webkit-border-radius: 3px;
34
+ -moz-border-radius: 3px;
35
+ border-radius: 3px;
36
+ margin-bottom: 20px;
37
+ }
38
+
39
+ p, ul, ol, blockquote {
40
+ margin-bottom: 24px; /* Changing this will break the baseline grid. */
41
+ }
42
+
43
+ li {
44
+ margin-bottom: 6px;
45
+ }
46
+
47
+ blockquote {
48
+ border-left: 1px solid #c1c1c1;
49
+ color: #747474;
50
+ padding-left: 15px;
51
+ margin-left: -15px;
52
+ }
53
+
54
+ h1 {
55
+ font-size: 30px;
56
+ line-height: 36px; /* Changing this will break the baseline grid. */
57
+ margin-bottom: 24px; /* Changing this will break the baseline grid. */
58
+ font-family: Georgia;
59
+ font-weight: lighter;
60
+ }
61
+
62
+ h2 {
63
+ font-size: 20px;
64
+ margin-bottom: 24px; /* Changing this will break the baseline grid. */
65
+ font-family: Georgia, serif;
66
+ font-weight: lighter;
67
+ }
68
+
69
+ h3 {
70
+ font-size: 16px;
71
+ margin-bottom: 24px; /* Changing this will break the baseline grid. */
72
+ font-family: Georgia, serif;
73
+ font-weight: lighter;
74
+ }
75
+ }
@@ -0,0 +1,30 @@
1
+ @mixin eleven40-global-reset {
2
+ @include eleven40-nested-reset;
3
+ }
4
+
5
+ @mixin eleven40-nested-reset {
6
+ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
7
+ address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,
8
+ fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
9
+ border:0;
10
+ margin:0;
11
+ padding:0;
12
+ }
13
+ article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,
14
+ video,object {
15
+ display:block
16
+ }
17
+ a img{
18
+ border:0;
19
+ }
20
+ figure {
21
+ position:relative;
22
+ }
23
+ figure img {
24
+ width:100%;
25
+ }
26
+
27
+ img, object, embed {
28
+ max-width: 100%;
29
+ }
30
+ }
@@ -0,0 +1,6 @@
1
+ @import "eleven40/reset";
2
+ @import "eleven40/base";
3
+ @import "eleven40/ie";
4
+ @import "eleven40/typography";
5
+
6
+ @import "partials/layout";
@@ -0,0 +1,38 @@
1
+ description "eleven40 compass extension"
2
+
3
+ stylesheet 'partials/_layout.scss'
4
+ stylesheet 'screen.scss', :media => 'screen'
5
+ stylesheet 'ie.scss', :media => 'screen', :condition => "lt IE 8"
6
+ stylesheet 'mobile.scss', :media => 'handheld, only screen and (max-width: 767px)'
7
+ stylesheet 'smallscreen.scss', :media => 'only screen and (max-width: 1023px)'
8
+
9
+ help %Q{
10
+ Please see the cssgrid website for source information:
11
+
12
+ http://cssgrid.net/
13
+
14
+ This extension provides mixins to do what the classes in the original did. In general, you can follow this format:
15
+
16
+ @include eleven40-classname
17
+
18
+ For example:
19
+
20
+ @include eleven40-container
21
+
22
+ replaces the
23
+
24
+ .container
25
+
26
+ css class.
27
+
28
+ The same applies for the row class all the col classes. Make sure you use the eleven40-last mixin for the last column, just like in the css class version.
29
+
30
+ }
31
+
32
+ welcome_message %Q{
33
+ Please see the cssgrid website for source information:
34
+
35
+ http://cssgrid.net/
36
+
37
+ This extension provides mixins to do what the classes in the original did.
38
+ }
@@ -0,0 +1,6 @@
1
+ @import "eleven40/reset";
2
+ @import "eleven40/base";
3
+ @import "eleven40/mobile";
4
+ @import "eleven40/typography";
5
+
6
+ @import "partials/layout";
@@ -0,0 +1,12 @@
1
+ .header {
2
+ @include eleven40-row;
3
+ }
4
+
5
+ .menu {
6
+ @include eleven40-fourcol;
7
+ }
8
+
9
+ .body {
10
+ @include eleven40-eightcol;
11
+ @include eleven40-last;
12
+ }
@@ -0,0 +1,5 @@
1
+ @import "eleven40/reset";
2
+ @import "eleven40/base";
3
+ @import "eleven40/typography";
4
+
5
+ @import "partials/layout";
@@ -0,0 +1,6 @@
1
+ @import "eleven40/reset";
2
+ @import "eleven40/smallscreen";
3
+ @import "eleven40/base";
4
+ @import "eleven40/typography";
5
+
6
+ @import "partials/layout";
metadata ADDED
@@ -0,0 +1,95 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: eleven40_16
3
+ version: !ruby/object:Gem::Version
4
+ prerelease: false
5
+ segments:
6
+ - 1
7
+ - 2
8
+ - 1
9
+ version: 1.2.1
10
+ platform: ruby
11
+ authors:
12
+ - Jeremy Bush
13
+ - "Ant\xC3\xB4nio Roberto"
14
+ autorequire:
15
+ bindir: bin
16
+ cert_chain: []
17
+
18
+ date: 2010-12-03 00:00:00 -02:00
19
+ default_executable:
20
+ dependencies:
21
+ - !ruby/object:Gem::Dependency
22
+ name: compass
23
+ prerelease: false
24
+ requirement: &id001 !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ">="
28
+ - !ruby/object:Gem::Version
29
+ segments:
30
+ - 0
31
+ - 10
32
+ - 0
33
+ - rc3
34
+ version: 0.10.0.rc3
35
+ type: :runtime
36
+ version_requirements: *id001
37
+ description: a 16 column cssgrid implementation in compass based in eleven40
38
+ email: forevertonny@gmail.com
39
+ executables: []
40
+
41
+ extensions: []
42
+
43
+ extra_rdoc_files: []
44
+
45
+ files:
46
+ - README.md
47
+ - lib/eleven40.rb
48
+ - stylesheets/_eleven40.scss
49
+ - stylesheets/eleven40/_base.scss
50
+ - stylesheets/eleven40/_ie.scss
51
+ - stylesheets/eleven40/_mobile.scss
52
+ - stylesheets/eleven40/_reset.scss
53
+ - stylesheets/eleven40/_smallscreen.scss
54
+ - stylesheets/eleven40/_typography.scss
55
+ - stylesheets/eleven40/reset/_utilities.scss
56
+ - templates/project/ie.scss
57
+ - templates/project/manifest.rb
58
+ - templates/project/mobile.scss
59
+ - templates/project/partials/_layout.scss
60
+ - templates/project/screen.scss
61
+ - templates/project/smallscreen.scss
62
+ has_rdoc: true
63
+ homepage: https://github.com/devton/eleven40-compass
64
+ licenses: []
65
+
66
+ post_install_message:
67
+ rdoc_options: []
68
+
69
+ require_paths:
70
+ - lib
71
+ required_ruby_version: !ruby/object:Gem::Requirement
72
+ none: false
73
+ requirements:
74
+ - - ">="
75
+ - !ruby/object:Gem::Version
76
+ segments:
77
+ - 0
78
+ version: "0"
79
+ required_rubygems_version: !ruby/object:Gem::Requirement
80
+ none: false
81
+ requirements:
82
+ - - ">="
83
+ - !ruby/object:Gem::Version
84
+ segments:
85
+ - 0
86
+ version: "0"
87
+ requirements: []
88
+
89
+ rubyforge_project:
90
+ rubygems_version: 1.3.7
91
+ signing_key:
92
+ specification_version: 3
93
+ summary: a 16 column cssgrid implementation in compass based in eleven40
94
+ test_files: []
95
+