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 +35 -0
- data/stylesheets/_1140.sass +4 -0
- data/stylesheets/eleven40/_base.scss +93 -0
- data/stylesheets/eleven40/_ie.scss +43 -0
- data/stylesheets/eleven40/_mobile.scss +18 -0
- data/stylesheets/eleven40/_reset.scss +3 -0
- data/stylesheets/eleven40/_smallscreen.scss +6 -0
- data/stylesheets/eleven40/_typography.scss +75 -0
- data/stylesheets/eleven40/reset/_utilities.scss +30 -0
- data/templates/project/ie.scss +6 -0
- data/templates/project/manifest.rb +37 -0
- data/templates/project/mobile.scss +6 -0
- data/templates/project/partials/_layout.scss +12 -0
- data/templates/project/screen.scss +5 -0
- data/templates/project/smallscreen.scss +6 -0
- metadata +89 -0
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,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,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,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
|
+
}
|
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
|
+
|