eleven40 1.1

Sign up to get free protection for your applications and to get access to all the features.
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
+