gridpaper 0.0.6 → 0.0.7
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.rdoc +1 -0
- data/bin/gridpaper +1 -0
- data/examples/index.html +227 -13
- data/examples/pencil.html +341 -0
- data/examples/stylesheets/sass/_settings.sass +8 -0
- data/examples/stylesheets/sass/gridpaper/_effects.sass +1 -1
- data/examples/stylesheets/sass/gridpaper/_forms.sass +0 -25
- data/examples/stylesheets/sass/gridpaper/_grid.sass +46 -0
- data/examples/stylesheets/sass/gridpaper/_reset.sass +39 -19
- data/examples/stylesheets/sass/gridpaper/_tables.sass +0 -0
- data/examples/stylesheets/sass/gridpaper/pencil/_all.sass +1 -0
- data/examples/stylesheets/sass/gridpaper/pencil/_colors.sass +9 -0
- data/examples/stylesheets/sass/gridpaper/pencil/_elements.sass +13 -0
- data/examples/stylesheets/sass/gridpaper/pencil/_forms.sass +22 -0
- data/examples/stylesheets/sass/gridpaper/pencil/_layout.sass +30 -0
- data/examples/stylesheets/sass/gridpaper/pencil/_tables.sass +5 -0
- data/examples/stylesheets/sass/gridpaper/pencil/_typography.sass +17 -0
- data/examples/stylesheets/sass/index.html.sass +119 -0
- data/examples/stylesheets/sass/pencil.html.sass +157 -0
- data/lib/gridpaper/version.rb +1 -1
- data/templates/sass/_settings.sass +8 -0
- data/templates/sass/gridpaper/_effects.sass +1 -1
- data/templates/sass/gridpaper/_forms.sass +0 -25
- data/templates/sass/gridpaper/_grid.sass +46 -0
- data/templates/sass/gridpaper/_reset.sass +39 -19
- data/templates/sass/gridpaper/_tables.sass +0 -0
- data/templates/sass/gridpaper/pencil/_all.sass +1 -0
- data/templates/sass/gridpaper/pencil/_colors.sass +9 -0
- data/templates/sass/gridpaper/pencil/_elements.sass +13 -0
- data/templates/sass/gridpaper/pencil/_forms.sass +22 -0
- data/templates/sass/gridpaper/pencil/_layout.sass +30 -0
- data/templates/sass/gridpaper/pencil/_tables.sass +5 -0
- data/templates/sass/gridpaper/pencil/_typography.sass +17 -0
- data/templates/scss/_settings.scss +8 -0
- data/templates/scss/gridpaper/_effects.scss +1 -1
- data/templates/scss/gridpaper/_forms.scss +1 -19
- data/templates/scss/gridpaper/_grid.scss +47 -0
- data/templates/scss/gridpaper/_reset.scss +29 -25
- data/templates/scss/gridpaper/_tables.scss +1 -0
- data/templates/scss/gridpaper/pencil/_all.scss +11 -0
- data/templates/scss/gridpaper/pencil/_colors.scss +9 -0
- data/templates/scss/gridpaper/pencil/_elements.scss +13 -0
- data/templates/scss/gridpaper/pencil/_forms.scss +17 -0
- data/templates/scss/gridpaper/pencil/_layout.scss +28 -0
- data/templates/scss/gridpaper/pencil/_tables.scss +5 -0
- data/templates/scss/gridpaper/pencil/_typography.scss +16 -0
- metadata +36 -12
- data/examples/stylesheets/sass/styles.sass +0 -2
- data/templates/sass/gridpaper/examples/_columns.sass +0 -46
- data/templates/scss/gridpaper/examples/_columns.scss +0 -45
@@ -20,7 +20,7 @@
|
|
20
20
|
@if $ie
|
21
21
|
behavior: url(/javascripts/PIE.htc)
|
22
22
|
|
23
|
-
@mixin
|
23
|
+
@mixin linear-gradient($from, $to)
|
24
24
|
background-color: mix($from, $to)
|
25
25
|
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to))
|
26
26
|
background-image: -webkit-linear-gradient(top, $from, $to)
|
@@ -1,27 +1,2 @@
|
|
1
|
-
form
|
2
|
-
|
3
|
-
.field
|
4
|
-
margin-bottom: 1em
|
5
|
-
|
6
|
-
legend
|
7
|
-
display: block
|
8
|
-
margin-bottom: 1em
|
9
|
-
|
10
|
-
label
|
11
|
-
display: block
|
12
|
-
|
13
|
-
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea
|
14
|
-
padding: 0.25em 0.5em
|
15
|
-
font:
|
16
|
-
size: 1em
|
17
|
-
family: sans-serif
|
18
|
-
border: 1px solid #7E7E7E
|
19
|
-
|
20
|
-
input[type="submit"]
|
21
|
-
padding: 0.5em 1em
|
22
|
-
border: 1px solid #7E7E7E
|
23
|
-
@include border-radius(5px)
|
24
|
-
cursor: pointer
|
25
|
-
|
26
1
|
|
27
2
|
|
@@ -7,6 +7,7 @@
|
|
7
7
|
$grid-columns: 24 !default
|
8
8
|
$grid-column-width: 24px !default
|
9
9
|
$grid-gutter-width: 16px !default
|
10
|
+
$base-font-size: 16px !default
|
10
11
|
|
11
12
|
@mixin container
|
12
13
|
width: ($grid-columns * $grid-column-width) + (($grid-columns - 1) * $grid-gutter-width)
|
@@ -27,6 +28,11 @@ $grid-gutter-width: 16px !default
|
|
27
28
|
width: ($grid-column-width * $n) + ($grid-gutter-width * ($n - 1)) + $adj
|
28
29
|
margin-right: $grid-gutter-width
|
29
30
|
|
31
|
+
@mixin table-span($n: $grid-columns, $adj: 0)
|
32
|
+
display: table
|
33
|
+
width: ($grid-column-width * $n) + ($grid-gutter-width * ($n - 1)) + $adj
|
34
|
+
margin-right: $grid-gutter-width
|
35
|
+
|
30
36
|
@mixin padding($left: inherit, $right: inherit)
|
31
37
|
@if $left != inherit
|
32
38
|
padding-left: ($grid-column-width * $left) + ($grid-gutter-width * $left)
|
@@ -57,3 +63,43 @@ $grid-gutter-width: 16px !default
|
|
57
63
|
border:
|
58
64
|
top: 1px solid fade-out(#dd7d96, 0.7)
|
59
65
|
right: 1px solid fade-out(#7dcadd, 0.3)
|
66
|
+
|
67
|
+
|
68
|
+
// baseline grid
|
69
|
+
body
|
70
|
+
font-size: $base-font-size
|
71
|
+
|
72
|
+
p
|
73
|
+
line-height: 1.5
|
74
|
+
|
75
|
+
h1
|
76
|
+
font-size: 5em
|
77
|
+
h2
|
78
|
+
font-size: 4em
|
79
|
+
h3
|
80
|
+
font-size: 3em
|
81
|
+
h4
|
82
|
+
font-size: 2em
|
83
|
+
h5
|
84
|
+
font-size: 1.5em
|
85
|
+
h6
|
86
|
+
font-size: 1em
|
87
|
+
|
88
|
+
form
|
89
|
+
.field
|
90
|
+
padding-bottom: 0.75em
|
91
|
+
margin-bottom: 0.75em
|
92
|
+
|
93
|
+
legend
|
94
|
+
margin-bottom: 1.5em
|
95
|
+
|
96
|
+
|
97
|
+
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea
|
98
|
+
padding: 0.375em 0.5em
|
99
|
+
|
100
|
+
table
|
101
|
+
margin-bottom: 1.5em
|
102
|
+
th, td
|
103
|
+
height: 1.5em
|
104
|
+
line-height: 1.5em
|
105
|
+
padding: 0 0.5em
|
@@ -5,7 +5,7 @@
|
|
5
5
|
Author: Richard Clark - http: //richclarkdesign.com
|
6
6
|
Twitter: @rich_clark
|
7
7
|
|
8
|
-
|
8
|
+
|
9
9
|
|
10
10
|
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
|
11
11
|
margin: 0
|
@@ -21,9 +21,6 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote,
|
|
21
21
|
background: transparent
|
22
22
|
line-height: 1
|
23
23
|
|
24
|
-
body
|
25
|
-
font-size: $base-font-size
|
26
|
-
|
27
24
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
|
28
25
|
display: block
|
29
26
|
|
@@ -65,29 +62,16 @@ hr
|
|
65
62
|
display: block
|
66
63
|
height: 0px
|
67
64
|
border: 0
|
68
|
-
border-top: 1px solid
|
65
|
+
border-top: 1px solid
|
69
66
|
margin: 0
|
70
67
|
padding: 0
|
71
68
|
|
72
|
-
input, select
|
69
|
+
input, select, button
|
73
70
|
vertical-align: middle
|
74
71
|
|
75
72
|
textarea
|
76
73
|
margin: 0
|
77
74
|
|
78
|
-
h1
|
79
|
-
font-size: 5em
|
80
|
-
h2
|
81
|
-
font-size: 4em
|
82
|
-
h3
|
83
|
-
font-size: 3em
|
84
|
-
h4
|
85
|
-
font-size: 2em
|
86
|
-
h5
|
87
|
-
font-size: 1.5em
|
88
|
-
h6
|
89
|
-
font-size: 1em
|
90
|
-
|
91
75
|
@mixin clearfix
|
92
76
|
display: block
|
93
77
|
&:after
|
@@ -100,3 +84,39 @@ h6
|
|
100
84
|
|
101
85
|
.clear
|
102
86
|
@include clearfix
|
87
|
+
|
88
|
+
|
89
|
+
form
|
90
|
+
|
91
|
+
.field
|
92
|
+
overflow: hidden
|
93
|
+
|
94
|
+
label
|
95
|
+
display: block
|
96
|
+
float: left
|
97
|
+
text-align: right
|
98
|
+
margin-right: 1em
|
99
|
+
width: 6em
|
100
|
+
|
101
|
+
|
102
|
+
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select, input[type="submit"], button
|
103
|
+
font:
|
104
|
+
size: 0.85em
|
105
|
+
family: sans-serif
|
106
|
+
|
107
|
+
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea
|
108
|
+
padding: 0.25em 0.5em
|
109
|
+
border: 1px solid
|
110
|
+
|
111
|
+
input[type="submit"], button
|
112
|
+
padding: 0.75em 1em
|
113
|
+
cursor: pointer
|
114
|
+
border: 1px solid
|
115
|
+
|
116
|
+
table
|
117
|
+
border: none
|
118
|
+
|
119
|
+
th, td
|
120
|
+
text-align: left
|
121
|
+
border: 1px solid
|
122
|
+
|
File without changes
|
@@ -0,0 +1 @@
|
|
1
|
+
@import colors, elements, typography, forms, tables, layout
|
@@ -0,0 +1,13 @@
|
|
1
|
+
@mixin image($height: 200px)
|
2
|
+
display: block
|
3
|
+
height: $height
|
4
|
+
color: $light-grey
|
5
|
+
line-height: $height
|
6
|
+
text-align: center
|
7
|
+
background-color: $dark-grey
|
8
|
+
|
9
|
+
@mixin box
|
10
|
+
overflow: hidden
|
11
|
+
display: block
|
12
|
+
padding: 1em
|
13
|
+
background-color: $light-grey
|
@@ -0,0 +1,22 @@
|
|
1
|
+
form
|
2
|
+
legend
|
3
|
+
margin-bottom: 0.5em
|
4
|
+
border-bottom: 1px solid $medium-grey
|
5
|
+
|
6
|
+
fieldset
|
7
|
+
margin-bottom: 0.5em
|
8
|
+
|
9
|
+
label
|
10
|
+
font-size: 16px
|
11
|
+
line-height: 1.5em
|
12
|
+
|
13
|
+
input, textarea
|
14
|
+
height: 1.5em
|
15
|
+
padding: 3px 8px
|
16
|
+
border: 1px solid $medium-grey
|
17
|
+
|
18
|
+
textarea
|
19
|
+
height: 10em
|
20
|
+
|
21
|
+
input[type="submit"], button
|
22
|
+
height: 32px
|
@@ -0,0 +1,30 @@
|
|
1
|
+
body
|
2
|
+
@include container
|
3
|
+
margin:
|
4
|
+
top: 3em
|
5
|
+
bottom: 3em
|
6
|
+
|
7
|
+
section
|
8
|
+
margin-bottom: 3em
|
9
|
+
|
10
|
+
h1, h2, h3, h4, h5, h6
|
11
|
+
text-transform: capitalize
|
12
|
+
|
13
|
+
header
|
14
|
+
margin-bottom: 1.5em
|
15
|
+
padding-bottom: 1.5em
|
16
|
+
border-bottom: 1px solid $light-grey
|
17
|
+
|
18
|
+
nav
|
19
|
+
ul li
|
20
|
+
display: inline
|
21
|
+
|
22
|
+
a
|
23
|
+
display: inline-block
|
24
|
+
margin-right: 2em
|
25
|
+
|
26
|
+
footer
|
27
|
+
margin-top: 1.5em
|
28
|
+
padding-top: 1.5em
|
29
|
+
color: $medium-grey
|
30
|
+
border-top: 1px solid $light-grey
|
@@ -0,0 +1,17 @@
|
|
1
|
+
h1, h2, h3, h4, h5, h6
|
2
|
+
margin-bottom: $base-font-size
|
3
|
+
font:
|
4
|
+
weight: bold
|
5
|
+
line-height: 1
|
6
|
+
|
7
|
+
p
|
8
|
+
margin-bottom: $base-font-size
|
9
|
+
line-height: 1.5
|
10
|
+
|
11
|
+
&:last-child
|
12
|
+
margin-bottom: 0
|
13
|
+
|
14
|
+
hgroup
|
15
|
+
margin-bottom: $base-font-size
|
16
|
+
h1, h2, h3, h4, h5, h6
|
17
|
+
margin-bottom: 0
|
@@ -0,0 +1,119 @@
|
|
1
|
+
@import settings
|
2
|
+
@import gridpaper/all
|
3
|
+
|
4
|
+
html
|
5
|
+
background: $light-grey
|
6
|
+
|
7
|
+
body
|
8
|
+
@include container
|
9
|
+
color: $dark-grey
|
10
|
+
background: $white
|
11
|
+
|
12
|
+
header
|
13
|
+
padding: 3em 0
|
14
|
+
h1
|
15
|
+
text-transform: uppercase
|
16
|
+
letter-spacing: -0.08em
|
17
|
+
|
18
|
+
section, header, footer
|
19
|
+
overflow: hidden
|
20
|
+
margin-bottom: 1.5em
|
21
|
+
padding-bottom: 1.5em
|
22
|
+
|
23
|
+
section h4:first-child
|
24
|
+
margin-bottom: 0.5em
|
25
|
+
padding: 0.25em 0.5em
|
26
|
+
color: $white
|
27
|
+
background: $dark-grey
|
28
|
+
|
29
|
+
pre
|
30
|
+
background: $silver
|
31
|
+
code
|
32
|
+
font-family: monospace
|
33
|
+
|
34
|
+
|
35
|
+
// CSS3 Effects
|
36
|
+
|
37
|
+
.effects-example
|
38
|
+
overflow: hidden
|
39
|
+
padding: 16px 0
|
40
|
+
|
41
|
+
.effects-box
|
42
|
+
@include column
|
43
|
+
@include span(8, -2px)
|
44
|
+
height: 10em
|
45
|
+
border: 1px solid #fff
|
46
|
+
background-color: $light-grey
|
47
|
+
|
48
|
+
pre
|
49
|
+
@include column
|
50
|
+
@include span(16)
|
51
|
+
height: 10em
|
52
|
+
|
53
|
+
#border-radius
|
54
|
+
@include border-radius(10px)
|
55
|
+
|
56
|
+
#box-shadow
|
57
|
+
@include box-shadow(4px 4px 4px fade-out(#000, 0.75))
|
58
|
+
|
59
|
+
#linear-gradient
|
60
|
+
@include linear-gradient(#ccc, #777)
|
61
|
+
|
62
|
+
|
63
|
+
// Columns
|
64
|
+
.grid-column
|
65
|
+
height: 6em
|
66
|
+
margin-bottom: 1em
|
67
|
+
border: none
|
68
|
+
top: 1px solid #E4C1CB
|
69
|
+
right: 1px solid #98CFDE
|
70
|
+
background: $silver url(../images/grid.png)
|
71
|
+
|
72
|
+
#two-columns
|
73
|
+
.grid-column
|
74
|
+
@include column
|
75
|
+
@include span(12, -2px)
|
76
|
+
|
77
|
+
#three-columns
|
78
|
+
.grid-column
|
79
|
+
@include column
|
80
|
+
@include span(8, -2px)
|
81
|
+
|
82
|
+
#four-columns
|
83
|
+
.grid-column
|
84
|
+
@include column
|
85
|
+
@include span(6, -2px)
|
86
|
+
|
87
|
+
#six-columns
|
88
|
+
.grid-column
|
89
|
+
@include column
|
90
|
+
@include span(4, -2px)
|
91
|
+
|
92
|
+
#eight-columns
|
93
|
+
.grid-column
|
94
|
+
@include column
|
95
|
+
@include span(3, -2px)
|
96
|
+
|
97
|
+
.text-columns
|
98
|
+
margin-bottom: 1.5em
|
99
|
+
@include showgrid
|
100
|
+
|
101
|
+
#two-text-columns
|
102
|
+
@include text-columns(2)
|
103
|
+
|
104
|
+
#three-text-columns
|
105
|
+
@include text-columns(3)
|
106
|
+
|
107
|
+
#four-text-columns
|
108
|
+
@include text-columns(4)
|
109
|
+
|
110
|
+
#columns-example, #text-columns-example
|
111
|
+
.row
|
112
|
+
overflow: hidden
|
113
|
+
|
114
|
+
// Forms
|
115
|
+
|
116
|
+
// Tables
|
117
|
+
table
|
118
|
+
@include column
|
119
|
+
@include table-span(12)
|
@@ -0,0 +1,157 @@
|
|
1
|
+
@import settings
|
2
|
+
@import gridpaper/all
|
3
|
+
@import gridpaper/pencil/all
|
4
|
+
|
5
|
+
|
6
|
+
|
7
|
+
header
|
8
|
+
padding: 3em 0
|
9
|
+
h1
|
10
|
+
text-transform: uppercase
|
11
|
+
letter-spacing: -0.08em
|
12
|
+
|
13
|
+
section, header, footer
|
14
|
+
overflow: hidden
|
15
|
+
margin-bottom: 1.5em
|
16
|
+
padding-bottom: 1.5em
|
17
|
+
|
18
|
+
section h4:first-child
|
19
|
+
margin-bottom: 0.5em
|
20
|
+
padding: 0.25em 0.5em
|
21
|
+
color: $white
|
22
|
+
background: $dark-grey
|
23
|
+
|
24
|
+
em
|
25
|
+
font:
|
26
|
+
weight: bold
|
27
|
+
style: normal
|
28
|
+
color: darken(#f00, 20%)
|
29
|
+
|
30
|
+
pre
|
31
|
+
|
32
|
+
background: $silver
|
33
|
+
code
|
34
|
+
font-family: monospace
|
35
|
+
|
36
|
+
|
37
|
+
|
38
|
+
// CSS3 Effects
|
39
|
+
|
40
|
+
.effects-example
|
41
|
+
overflow: hidden
|
42
|
+
padding: 16px 0
|
43
|
+
|
44
|
+
.effects-box
|
45
|
+
@include column
|
46
|
+
@include span(8, -2px)
|
47
|
+
height: 10em
|
48
|
+
border: 1px solid #fff
|
49
|
+
background-color: $light-grey
|
50
|
+
|
51
|
+
pre
|
52
|
+
@include column
|
53
|
+
@include span(16)
|
54
|
+
height: 10em
|
55
|
+
|
56
|
+
|
57
|
+
|
58
|
+
|
59
|
+
#border-radius
|
60
|
+
@include border-radius(10px)
|
61
|
+
|
62
|
+
#box-shadow
|
63
|
+
@include box-shadow(4px 4px 4px fade-out(#000, 0.75))
|
64
|
+
|
65
|
+
#linear-gradient
|
66
|
+
@include linear-gradient(#ccc, #777)
|
67
|
+
|
68
|
+
|
69
|
+
// Columns
|
70
|
+
#columns-example
|
71
|
+
.grid-column
|
72
|
+
height: 6em
|
73
|
+
margin-bottom: 1.5em
|
74
|
+
border: none
|
75
|
+
top: 1px solid #E4C1CB
|
76
|
+
right: 1px solid #98CFDE
|
77
|
+
background: $silver url(../images/grid.png)
|
78
|
+
|
79
|
+
#two-columns
|
80
|
+
.grid-column
|
81
|
+
@include column
|
82
|
+
@include span(12, -2px)
|
83
|
+
|
84
|
+
#three-columns
|
85
|
+
.grid-column
|
86
|
+
@include column
|
87
|
+
@include span(8, -2px)
|
88
|
+
|
89
|
+
#four-columns
|
90
|
+
.grid-column
|
91
|
+
@include column
|
92
|
+
@include span(6, -2px)
|
93
|
+
|
94
|
+
#six-columns
|
95
|
+
.grid-column
|
96
|
+
@include column
|
97
|
+
@include span(4, -2px)
|
98
|
+
|
99
|
+
#eight-columns
|
100
|
+
.grid-column
|
101
|
+
@include column
|
102
|
+
@include span(3, -2px)
|
103
|
+
|
104
|
+
#text-columns-example
|
105
|
+
.text-columns
|
106
|
+
margin-bottom: 1.5em
|
107
|
+
@include showgrid
|
108
|
+
|
109
|
+
#two-text-columns
|
110
|
+
@include text-columns(2)
|
111
|
+
|
112
|
+
#three-text-columns
|
113
|
+
@include text-columns(3)
|
114
|
+
|
115
|
+
#four-text-columns
|
116
|
+
@include text-columns(4)
|
117
|
+
|
118
|
+
#columns-example, #text-columns-example
|
119
|
+
.row
|
120
|
+
overflow: hidden
|
121
|
+
|
122
|
+
pre
|
123
|
+
margin-bottom: 3em
|
124
|
+
|
125
|
+
// Forms
|
126
|
+
form
|
127
|
+
legend
|
128
|
+
@include column
|
129
|
+
@include span(8)
|
130
|
+
|
131
|
+
.fields
|
132
|
+
@include column
|
133
|
+
@include span(16)
|
134
|
+
@include last
|
135
|
+
margin-bottom: 0.5em
|
136
|
+
background-color: $silver
|
137
|
+
|
138
|
+
.actions
|
139
|
+
@extend .fields
|
140
|
+
background-color: transparent
|
141
|
+
|
142
|
+
.field
|
143
|
+
margin: 0.5em 0
|
144
|
+
|
145
|
+
|
146
|
+
label
|
147
|
+
@include span(4)
|
148
|
+
|
149
|
+
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea
|
150
|
+
padding: 7px
|
151
|
+
border: 1px solid #7E7E7E
|
152
|
+
@include span(11)
|
153
|
+
|
154
|
+
// Tables
|
155
|
+
table
|
156
|
+
@include column
|
157
|
+
@include table-span(12)
|