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