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.
Files changed (50) hide show
  1. data/README.rdoc +1 -0
  2. data/bin/gridpaper +1 -0
  3. data/examples/index.html +227 -13
  4. data/examples/pencil.html +341 -0
  5. data/examples/stylesheets/sass/_settings.sass +8 -0
  6. data/examples/stylesheets/sass/gridpaper/_effects.sass +1 -1
  7. data/examples/stylesheets/sass/gridpaper/_forms.sass +0 -25
  8. data/examples/stylesheets/sass/gridpaper/_grid.sass +46 -0
  9. data/examples/stylesheets/sass/gridpaper/_reset.sass +39 -19
  10. data/examples/stylesheets/sass/gridpaper/_tables.sass +0 -0
  11. data/examples/stylesheets/sass/gridpaper/pencil/_all.sass +1 -0
  12. data/examples/stylesheets/sass/gridpaper/pencil/_colors.sass +9 -0
  13. data/examples/stylesheets/sass/gridpaper/pencil/_elements.sass +13 -0
  14. data/examples/stylesheets/sass/gridpaper/pencil/_forms.sass +22 -0
  15. data/examples/stylesheets/sass/gridpaper/pencil/_layout.sass +30 -0
  16. data/examples/stylesheets/sass/gridpaper/pencil/_tables.sass +5 -0
  17. data/examples/stylesheets/sass/gridpaper/pencil/_typography.sass +17 -0
  18. data/examples/stylesheets/sass/index.html.sass +119 -0
  19. data/examples/stylesheets/sass/pencil.html.sass +157 -0
  20. data/lib/gridpaper/version.rb +1 -1
  21. data/templates/sass/_settings.sass +8 -0
  22. data/templates/sass/gridpaper/_effects.sass +1 -1
  23. data/templates/sass/gridpaper/_forms.sass +0 -25
  24. data/templates/sass/gridpaper/_grid.sass +46 -0
  25. data/templates/sass/gridpaper/_reset.sass +39 -19
  26. data/templates/sass/gridpaper/_tables.sass +0 -0
  27. data/templates/sass/gridpaper/pencil/_all.sass +1 -0
  28. data/templates/sass/gridpaper/pencil/_colors.sass +9 -0
  29. data/templates/sass/gridpaper/pencil/_elements.sass +13 -0
  30. data/templates/sass/gridpaper/pencil/_forms.sass +22 -0
  31. data/templates/sass/gridpaper/pencil/_layout.sass +30 -0
  32. data/templates/sass/gridpaper/pencil/_tables.sass +5 -0
  33. data/templates/sass/gridpaper/pencil/_typography.sass +17 -0
  34. data/templates/scss/_settings.scss +8 -0
  35. data/templates/scss/gridpaper/_effects.scss +1 -1
  36. data/templates/scss/gridpaper/_forms.scss +1 -19
  37. data/templates/scss/gridpaper/_grid.scss +47 -0
  38. data/templates/scss/gridpaper/_reset.scss +29 -25
  39. data/templates/scss/gridpaper/_tables.scss +1 -0
  40. data/templates/scss/gridpaper/pencil/_all.scss +11 -0
  41. data/templates/scss/gridpaper/pencil/_colors.scss +9 -0
  42. data/templates/scss/gridpaper/pencil/_elements.scss +13 -0
  43. data/templates/scss/gridpaper/pencil/_forms.scss +17 -0
  44. data/templates/scss/gridpaper/pencil/_layout.scss +28 -0
  45. data/templates/scss/gridpaper/pencil/_tables.scss +5 -0
  46. data/templates/scss/gridpaper/pencil/_typography.scss +16 -0
  47. metadata +36 -12
  48. data/examples/stylesheets/sass/styles.sass +0 -2
  49. data/templates/sass/gridpaper/examples/_columns.sass +0 -46
  50. data/templates/scss/gridpaper/examples/_columns.scss +0 -45
@@ -5,3 +5,11 @@ $grid-gutter-width: 16px
5
5
 
6
6
  // Set your base font size
7
7
  $base-font-size: 16px
8
+
9
+ // Color Variables
10
+ $white: #fff
11
+ $silver: #f1f1f1
12
+ $light-grey: #ccc
13
+ $medium-grey: #777
14
+ $dark-grey: #333
15
+ $black: #000
@@ -20,7 +20,7 @@
20
20
  @if $ie
21
21
  behavior: url(/javascripts/PIE.htc)
22
22
 
23
- @mixin box-gradient($from, $to)
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
- $base-font-size: 16px !default
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 #cccccc
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
+
@@ -0,0 +1 @@
1
+ @import colors, elements, typography, forms, tables, layout
@@ -0,0 +1,9 @@
1
+ $black: #000000
2
+ $dark-grey: #333333
3
+ $light-grey: #e1e1e1
4
+ $medium-grey: #666666
5
+ $white: #ffffff
6
+
7
+ body
8
+ background-color: $white
9
+ color: $dark-grey
@@ -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,5 @@
1
+ table
2
+ th
3
+ background: $medium-grey
4
+ color: $white
5
+ border-color: $black
@@ -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)