eleven40 1.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,35 @@
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 "1140/mobile";
34
+
35
+ This will include the mobile styles that will overload the default screen styles.
@@ -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,93 @@
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: 3.8%;
39
+ float: left;
40
+ }
41
+ }
42
+
43
+ @mixin eleven40-onecol {
44
+ @include eleven40-subcolumn(4.85%);
45
+ }
46
+
47
+ @mixin eleven40-twocol {
48
+ @include eleven40-subcolumn(13.5%);
49
+ }
50
+
51
+ @mixin eleven40-threecol {
52
+ @include eleven40-subcolumn(22.15%);
53
+ }
54
+
55
+ @mixin eleven40-fourcol {
56
+ @include eleven40-subcolumn(30.8%);
57
+ }
58
+
59
+ @mixin eleven40-fivecol {
60
+ @include eleven40-subcolumn(39.45%);
61
+ }
62
+
63
+ @mixin eleven40-sixcol {
64
+ @include eleven40-subcolumn(48.1%);
65
+ }
66
+
67
+ @mixin eleven40-sevencol {
68
+ @include eleven40-subcolumn(56.75%);
69
+ }
70
+
71
+ @mixin eleven40-eightcol {
72
+ @include eleven40-subcolumn(65.4%);
73
+ }
74
+
75
+ @mixin eleven40-ninecol {
76
+ @include eleven40-subcolumn(74.05%);
77
+ }
78
+
79
+ @mixin eleven40-tencol {
80
+ @include eleven40-subcolumn(82.7%);
81
+ }
82
+
83
+ @mixin eleven40-elevencol {
84
+ @include eleven40-subcolumn(91.35%);
85
+ }
86
+
87
+ @mixin eleven40-twelvecol {
88
+ @include eleven40-subcolumn(100%);
89
+ }
90
+
91
+ @mixin eleven40-last {
92
+ margin-right: 0px;
93
+ }
@@ -0,0 +1,43 @@
1
+ @mixin eleven40-onecol {
2
+ @include eleven40-subcolumn(4.7%);
3
+ }
4
+
5
+ @mixin eleven40-twocol {
6
+ @include eleven40-subcolumn(13.2%);
7
+ }
8
+
9
+ @mixin eleven40-threecol {
10
+ @include eleven40-subcolumn(22.05%);
11
+ }
12
+
13
+ @mixin eleven40-fourcol {
14
+ @include eleven40-subcolumn(30.6%);
15
+ }
16
+
17
+ @mixin eleven40-fivecol {
18
+ @include eleven40-subcolumn(39%);
19
+ }
20
+
21
+ @mixin eleven40-sixcol {
22
+ @include eleven40-subcolumn(48%);
23
+ }
24
+
25
+ @mixin eleven40-sevencol {
26
+ @include eleven40-subcolumn(56.75%);
27
+ }
28
+
29
+ @mixin eleven40-eightcol {
30
+ @include eleven40-subcolumn(61.6%);
31
+ }
32
+
33
+ @mixin eleven40-ninecol {
34
+ @include eleven40-subcolumn(74.05%);
35
+ }
36
+
37
+ @mixin eleven40-tencol {
38
+ @include eleven40-subcolumn(82%);
39
+ }
40
+
41
+ @mixin eleven40-elevencol {
42
+ @include eleven40-subcolumn(91.35%);
43
+ }
@@ -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 "1140/reset";
2
+ @import "1140/base";
3
+ @import "1140/ie";
4
+ @import "1140/typography";
5
+
6
+ @import "partials/layout";
@@ -0,0 +1,37 @@
1
+ description "eleven40 compass extension"
2
+
3
+ stylesheet 'screen.scss', :media => 'screen'
4
+ stylesheet 'ie.scss', :media => 'screen', :condition => "lt IE 8"
5
+ stylesheet 'mobile.scss', :media => 'handheld, only screen and (max-width: 767px)'
6
+ stylesheet 'smallscreen.scss', :media => 'only screen and (max-width: 1023px)'
7
+
8
+ help %Q{
9
+ Please see the cssgrid website for source information:
10
+
11
+ http://cssgrid.net/
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
+ }
30
+
31
+ welcome_message %Q{
32
+ Please see the cssgrid website for source information:
33
+
34
+ http://cssgrid.net/
35
+
36
+ This extension provides mixins to do what the classes in the original did.
37
+ }
@@ -0,0 +1,6 @@
1
+ @import "1140/reset";
2
+ @import "1140/base";
3
+ @import "1140/mobile";
4
+ @import "1140/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 "1140/reset";
2
+ @import "1140/base";
3
+ @import "1140/typography";
4
+
5
+ @import "partials/layout";
@@ -0,0 +1,6 @@
1
+ @import "1140/reset";
2
+ @import "1140/smallscreen";
3
+ @import "1140/base";
4
+ @import "1140/typography";
5
+
6
+ @import "partials/layout";
metadata ADDED
@@ -0,0 +1,89 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: eleven40
3
+ version: !ruby/object:Gem::Version
4
+ prerelease: false
5
+ segments:
6
+ - 1
7
+ - 1
8
+ version: "1.1"
9
+ platform: ruby
10
+ authors:
11
+ - Jeremy Bush
12
+ autorequire:
13
+ bindir: bin
14
+ cert_chain: []
15
+
16
+ date: 2010-12-03 00:00:00 -06:00
17
+ default_executable:
18
+ dependencies:
19
+ - !ruby/object:Gem::Dependency
20
+ name: compass
21
+ prerelease: false
22
+ requirement: &id001 !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ segments:
27
+ - 0
28
+ - 10
29
+ - 0
30
+ - rc3
31
+ version: 0.10.0.rc3
32
+ type: :runtime
33
+ version_requirements: *id001
34
+ description: a cssgrid implementation in compass
35
+ email: contractfrombelow@gmail.com
36
+ executables: []
37
+
38
+ extensions: []
39
+
40
+ extra_rdoc_files: []
41
+
42
+ files:
43
+ - README.md
44
+ - stylesheets/_1140.sass
45
+ - stylesheets/eleven40/_base.scss
46
+ - stylesheets/eleven40/_ie.scss
47
+ - stylesheets/eleven40/_mobile.scss
48
+ - stylesheets/eleven40/_reset.scss
49
+ - stylesheets/eleven40/_smallscreen.scss
50
+ - stylesheets/eleven40/_typography.scss
51
+ - stylesheets/eleven40/reset/_utilities.scss
52
+ - templates/project/ie.scss
53
+ - templates/project/manifest.rb
54
+ - templates/project/mobile.scss
55
+ - templates/project/partials/_layout.scss
56
+ - templates/project/screen.scss
57
+ - templates/project/smallscreen.scss
58
+ has_rdoc: true
59
+ homepage: https://github.com/zombor/eleven40-compass
60
+ licenses: []
61
+
62
+ post_install_message:
63
+ rdoc_options: []
64
+
65
+ require_paths:
66
+ - lib
67
+ required_ruby_version: !ruby/object:Gem::Requirement
68
+ requirements:
69
+ - - ">="
70
+ - !ruby/object:Gem::Version
71
+ segments:
72
+ - 0
73
+ version: "0"
74
+ required_rubygems_version: !ruby/object:Gem::Requirement
75
+ requirements:
76
+ - - ">="
77
+ - !ruby/object:Gem::Version
78
+ segments:
79
+ - 0
80
+ version: "0"
81
+ requirements: []
82
+
83
+ rubyforge_project:
84
+ rubygems_version: 1.3.6
85
+ signing_key:
86
+ specification_version: 3
87
+ summary: a cssgrid implementation in compass
88
+ test_files: []
89
+