graphpaper 0.0.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/INSTALL +2 -0
- data/Manifest +22 -0
- data/README +6 -0
- data/Rakefile +12 -0
- data/graphpaper.gemspec +30 -0
- data/lib/graphpaper.rb +2 -0
- data/stylesheets/_graphpaper.sass +3 -0
- data/stylesheets/graphpaper/_ie.sass +1 -0
- data/stylesheets/graphpaper/_print.sass +0 -0
- data/stylesheets/graphpaper/_screen.sass +4 -0
- data/stylesheets/graphpaper/modules/_colors.sass +249 -0
- data/stylesheets/graphpaper/modules/_grid.sass +189 -0
- data/stylesheets/graphpaper/modules/_reset.sass +3 -0
- data/stylesheets/graphpaper/modules/_typography.sass +31 -0
- data/templates/project/common/_footer.sass +0 -0
- data/templates/project/common/_header.sass +0 -0
- data/templates/project/common/_typography.sass +0 -0
- data/templates/project/config/_base.sass +69 -0
- data/templates/project/config/_settings.sass +26 -0
- data/templates/project/ie.sass +1 -0
- data/templates/project/manifest.rb +8 -0
- data/templates/project/print.sass +1 -0
- data/templates/project/screen.sass +7 -0
- metadata +91 -0
data/INSTALL
ADDED
data/Manifest
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
INSTALL
|
|
2
|
+
README
|
|
3
|
+
Rakefile
|
|
4
|
+
lib/graphpaper.rb
|
|
5
|
+
stylesheets/_graphpaper.sass
|
|
6
|
+
stylesheets/graphpaper/_ie.sass
|
|
7
|
+
stylesheets/graphpaper/_print.sass
|
|
8
|
+
stylesheets/graphpaper/_screen.sass
|
|
9
|
+
stylesheets/graphpaper/modules/_colors.sass
|
|
10
|
+
stylesheets/graphpaper/modules/_grid.sass
|
|
11
|
+
stylesheets/graphpaper/modules/_reset.sass
|
|
12
|
+
stylesheets/graphpaper/modules/_typography.sass
|
|
13
|
+
templates/project/common/_footer.sass
|
|
14
|
+
templates/project/common/_header.sass
|
|
15
|
+
templates/project/common/_typography.sass
|
|
16
|
+
templates/project/config/_base.sass
|
|
17
|
+
templates/project/config/_settings.sass
|
|
18
|
+
templates/project/ie.sass
|
|
19
|
+
templates/project/manifest.rb
|
|
20
|
+
templates/project/print.sass
|
|
21
|
+
templates/project/screen.sass
|
|
22
|
+
Manifest
|
data/README
ADDED
data/Rakefile
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
require 'rubygems'
|
|
2
|
+
require 'rake'
|
|
3
|
+
require 'echoe'
|
|
4
|
+
|
|
5
|
+
Echoe.new('graphpaper', '0.0.1') do |p|
|
|
6
|
+
p.description = "A lightweight fixed-grid Compass framework for Ruby curmudgeons."
|
|
7
|
+
p.url = "http://github.com/alexcabrera/compas-graphpaper/"
|
|
8
|
+
p.author = "Alex Cabrera"
|
|
9
|
+
p.email = "alex@policus.com"
|
|
10
|
+
p.ignore_pattern = ["tmp/*", "script/*"]
|
|
11
|
+
p.development_dependencies = []
|
|
12
|
+
end
|
data/graphpaper.gemspec
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
|
|
3
|
+
Gem::Specification.new do |s|
|
|
4
|
+
s.name = %q{graphpaper}
|
|
5
|
+
s.version = "0.0.1"
|
|
6
|
+
|
|
7
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
|
|
8
|
+
s.authors = ["Alex Cabrera"]
|
|
9
|
+
s.date = %q{2010-04-27}
|
|
10
|
+
s.description = %q{A lightweight fixed-grid Compass framework for Ruby curmudgeons.}
|
|
11
|
+
s.email = %q{alex@policus.com}
|
|
12
|
+
s.extra_rdoc_files = ["README", "lib/graphpaper.rb"]
|
|
13
|
+
s.files = ["INSTALL", "README", "Rakefile", "lib/graphpaper.rb", "stylesheets/_graphpaper.sass", "stylesheets/graphpaper/_ie.sass", "stylesheets/graphpaper/_print.sass", "stylesheets/graphpaper/_screen.sass", "stylesheets/graphpaper/modules/_colors.sass", "stylesheets/graphpaper/modules/_grid.sass", "stylesheets/graphpaper/modules/_reset.sass", "stylesheets/graphpaper/modules/_typography.sass", "templates/project/common/_footer.sass", "templates/project/common/_header.sass", "templates/project/common/_typography.sass", "templates/project/config/_base.sass", "templates/project/config/_settings.sass", "templates/project/ie.sass", "templates/project/manifest.rb", "templates/project/print.sass", "templates/project/screen.sass", "Manifest", "graphpaper.gemspec"]
|
|
14
|
+
s.homepage = %q{http://github.com/alexcabrera/compas-graphpaper/}
|
|
15
|
+
s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Graphpaper", "--main", "README"]
|
|
16
|
+
s.require_paths = ["lib"]
|
|
17
|
+
s.rubyforge_project = %q{graphpaper}
|
|
18
|
+
s.rubygems_version = %q{1.3.6}
|
|
19
|
+
s.summary = %q{A lightweight fixed-grid Compass framework for Ruby curmudgeons.}
|
|
20
|
+
|
|
21
|
+
if s.respond_to? :specification_version then
|
|
22
|
+
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
|
23
|
+
s.specification_version = 3
|
|
24
|
+
|
|
25
|
+
if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
|
|
26
|
+
else
|
|
27
|
+
end
|
|
28
|
+
else
|
|
29
|
+
end
|
|
30
|
+
end
|
data/lib/graphpaper.rb
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
File without changes
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
// Ever wanted to use Crayola crayon names in your CSS instead
|
|
2
|
+
// of ugly hex values? Of course you do.
|
|
3
|
+
|
|
4
|
+
// Values taken from this article on ColourLovers:
|
|
5
|
+
// http://www.colourlovers.com/blog/2008/04/22/all-120-crayon-names-color-codes-and-fun-facts/
|
|
6
|
+
|
|
7
|
+
// All constants are set as optional assingment in case you
|
|
8
|
+
// want to overwrite the name in your Sass file, but why would you
|
|
9
|
+
// want to go and do that?
|
|
10
|
+
|
|
11
|
+
$mahogany: #cd4a4a !default
|
|
12
|
+
|
|
13
|
+
$fuzzy_wuzzy_brown: #cc6666 !default
|
|
14
|
+
|
|
15
|
+
$chestnut: #bc5d58 !default
|
|
16
|
+
|
|
17
|
+
$red_orange: #ff5349 !default
|
|
18
|
+
|
|
19
|
+
$sunset_orange: #fd5e53 !default
|
|
20
|
+
|
|
21
|
+
$bittersweet: #fd7c6e !default
|
|
22
|
+
|
|
23
|
+
$melon: #fdbcb4 !default
|
|
24
|
+
|
|
25
|
+
$outrageous_orange: #ff6e4a !default
|
|
26
|
+
|
|
27
|
+
$vivid_tangerine: #ffa089 !default
|
|
28
|
+
|
|
29
|
+
$burnt_sienna: #ea7e5d !default
|
|
30
|
+
|
|
31
|
+
$brown: #b4674d !default
|
|
32
|
+
|
|
33
|
+
$sepia: #a5694f !default
|
|
34
|
+
|
|
35
|
+
$orange: #ff7538 !default
|
|
36
|
+
|
|
37
|
+
$burnt_orange: #ff7f49 !default
|
|
38
|
+
|
|
39
|
+
$copper: #dd9475 !default
|
|
40
|
+
|
|
41
|
+
$mango_tango: #ff8243 !default
|
|
42
|
+
|
|
43
|
+
$atomic_tangerine: #ffa474 !default
|
|
44
|
+
|
|
45
|
+
$beaver: #9f8170 !default
|
|
46
|
+
|
|
47
|
+
$antique_brass: #cd9575 !default
|
|
48
|
+
|
|
49
|
+
$desert_sand: #efcdb8 !default
|
|
50
|
+
|
|
51
|
+
$raw_sienna: #d68a59 !default
|
|
52
|
+
|
|
53
|
+
$tumbleweed: #deaa88 !default
|
|
54
|
+
|
|
55
|
+
$tan: #faa76c !default
|
|
56
|
+
|
|
57
|
+
$peach: #ffcfab !default
|
|
58
|
+
|
|
59
|
+
$macaroni_and_cheese: #ffbd88 !default
|
|
60
|
+
|
|
61
|
+
$apricot: #fdd9b5 !default
|
|
62
|
+
|
|
63
|
+
$neon_carrot: #ffa343 !default
|
|
64
|
+
|
|
65
|
+
$almond: #efdbc5 !default
|
|
66
|
+
|
|
67
|
+
$yellow_orange: #ffb653 !default
|
|
68
|
+
|
|
69
|
+
$gold: #e7c697 !default
|
|
70
|
+
|
|
71
|
+
$shadow: #8a795d !default
|
|
72
|
+
|
|
73
|
+
$banana_mania: #fae7b5 !default
|
|
74
|
+
|
|
75
|
+
$sunglow: #ffcf48 !default
|
|
76
|
+
|
|
77
|
+
$goldenrod: #fcd975 !default
|
|
78
|
+
|
|
79
|
+
$dandelion: #fddb6d !default
|
|
80
|
+
|
|
81
|
+
$yellow: #fce883 !default
|
|
82
|
+
|
|
83
|
+
$green_yellow: #f0e891 !default
|
|
84
|
+
|
|
85
|
+
$spring_green: #eceabe !default
|
|
86
|
+
|
|
87
|
+
$olive_green: #bab86c !default
|
|
88
|
+
|
|
89
|
+
$laser_lemon: #fdfc74 !default
|
|
90
|
+
|
|
91
|
+
$unmellow_yellow: #fdfc74 !default
|
|
92
|
+
|
|
93
|
+
$canary: #ffff99 !default
|
|
94
|
+
|
|
95
|
+
$yellow_green: #c5e384 !default
|
|
96
|
+
|
|
97
|
+
$inch_worm: #b2ec5d !default
|
|
98
|
+
|
|
99
|
+
$asparagus: #87a96b !default
|
|
100
|
+
|
|
101
|
+
$granny_smith_apple: #a8e4a0 !default
|
|
102
|
+
|
|
103
|
+
$electric_lime: #1df914 !default
|
|
104
|
+
|
|
105
|
+
$screamin_green: #76ff7a !default
|
|
106
|
+
|
|
107
|
+
$fern: #71bc78 !default
|
|
108
|
+
|
|
109
|
+
$forest_green: #6dae81 !default
|
|
110
|
+
|
|
111
|
+
$sea_green: #9fe2bf !default
|
|
112
|
+
|
|
113
|
+
$green: #1cac78 !default
|
|
114
|
+
|
|
115
|
+
$mountain_meadow: #30ba8f !default
|
|
116
|
+
|
|
117
|
+
$shamrock: #45cea2 !default
|
|
118
|
+
|
|
119
|
+
$jungle_green: #3bb08f !default
|
|
120
|
+
|
|
121
|
+
$caribbean_green: #1cd3a2 !default
|
|
122
|
+
|
|
123
|
+
$tropical_rain_forest: #17806d !default
|
|
124
|
+
|
|
125
|
+
$pine_green: #158078 !default
|
|
126
|
+
|
|
127
|
+
$robin_egg_blue: #1fcecb !default
|
|
128
|
+
|
|
129
|
+
$aquamarine: #78dbe2 !default
|
|
130
|
+
|
|
131
|
+
$turquoise_blue: #77dde7 !default
|
|
132
|
+
|
|
133
|
+
$sky_blue: #80daeb !default
|
|
134
|
+
|
|
135
|
+
$outer_space: #414a4c !default
|
|
136
|
+
|
|
137
|
+
$blue_green: #199ebd !default
|
|
138
|
+
|
|
139
|
+
$pacific_blue: #1ca9c9 !default
|
|
140
|
+
|
|
141
|
+
$cerulean: #1dacd6 !default
|
|
142
|
+
|
|
143
|
+
$cornflower: #9aceeb !default
|
|
144
|
+
|
|
145
|
+
$midnight_blue: #1a4876 !default
|
|
146
|
+
|
|
147
|
+
$navy_blue: #1974d2 !default
|
|
148
|
+
|
|
149
|
+
$denim: #2b6cc4 !default
|
|
150
|
+
|
|
151
|
+
$blue: #1f75fe !default
|
|
152
|
+
|
|
153
|
+
$periwinkle: #c5d0e6 !default
|
|
154
|
+
|
|
155
|
+
$cadet_blue: #b0b7c6 !default
|
|
156
|
+
|
|
157
|
+
$indigo: #5d76cb !default
|
|
158
|
+
|
|
159
|
+
$wild_blue_yonder: #a2add0 !default
|
|
160
|
+
|
|
161
|
+
$manatee: #979aaa !default
|
|
162
|
+
|
|
163
|
+
$blue_bell: #adadd6 !default
|
|
164
|
+
|
|
165
|
+
$blue_violet: #7366bd !default
|
|
166
|
+
|
|
167
|
+
$purple_heart: #7442c8 !default
|
|
168
|
+
|
|
169
|
+
$royal_purple: #7851a9 !default
|
|
170
|
+
|
|
171
|
+
$purple_mountains_majesty: #9d81ba !default
|
|
172
|
+
|
|
173
|
+
$violet_purple: #926eae !default
|
|
174
|
+
|
|
175
|
+
$wisteria: #cda4de !default
|
|
176
|
+
|
|
177
|
+
$vivid_violet: #8f509d !default
|
|
178
|
+
|
|
179
|
+
$fuchsia: #c364c5 !default
|
|
180
|
+
|
|
181
|
+
$shocking_pink: #fb7efd !default
|
|
182
|
+
|
|
183
|
+
$pink_flamingo: #fc74fd !default
|
|
184
|
+
|
|
185
|
+
$plum: #8e4585 !default
|
|
186
|
+
|
|
187
|
+
$hot_magenta: #ff1dce !default
|
|
188
|
+
|
|
189
|
+
$purple_pizzazz: #ff1dce !default
|
|
190
|
+
|
|
191
|
+
$razzle_dazzle_rose: #ff48d0 !default
|
|
192
|
+
|
|
193
|
+
$orchid: #e6a8d7 !default
|
|
194
|
+
|
|
195
|
+
$red_violet: #c0448f !default
|
|
196
|
+
|
|
197
|
+
$eggplant: #6e5160 !default
|
|
198
|
+
|
|
199
|
+
$cerise: #dd4492 !default
|
|
200
|
+
|
|
201
|
+
$wild_strawberry: #ff43a4 !default
|
|
202
|
+
|
|
203
|
+
$magenta: #f664af !default
|
|
204
|
+
|
|
205
|
+
$lavender: #fcb4d5 !default
|
|
206
|
+
|
|
207
|
+
$cotton_candy: #ffbcd9 !default
|
|
208
|
+
|
|
209
|
+
$violet_red: #f75394 !default
|
|
210
|
+
|
|
211
|
+
$carnation_pink: #ffaacc !default
|
|
212
|
+
|
|
213
|
+
$razzmatazz: #e3256b !default
|
|
214
|
+
|
|
215
|
+
$piggy_pink: #fdd7e4 !default
|
|
216
|
+
|
|
217
|
+
$jazzberry_jam: #ca3767 !default
|
|
218
|
+
|
|
219
|
+
$blush: #de5d83 !default
|
|
220
|
+
|
|
221
|
+
$tickle_me_pink: #fc89ac !default
|
|
222
|
+
|
|
223
|
+
$pink_sherbet: #f780a1 !default
|
|
224
|
+
|
|
225
|
+
$maroon: #c8385a !default
|
|
226
|
+
|
|
227
|
+
$red: #ee204d !default
|
|
228
|
+
|
|
229
|
+
$radical_red: #ff496c !default
|
|
230
|
+
|
|
231
|
+
$mauvelous: #ef98aa !default
|
|
232
|
+
|
|
233
|
+
$wild_watermelon: #fc6c85 !default
|
|
234
|
+
|
|
235
|
+
$scarlet: #fc2847 !default
|
|
236
|
+
|
|
237
|
+
$salmon: #ff9baa !default
|
|
238
|
+
|
|
239
|
+
$brick_red: #cb4154 !default
|
|
240
|
+
|
|
241
|
+
$white: #ededed !default
|
|
242
|
+
|
|
243
|
+
$timberwolf: #dbd7d2 !default
|
|
244
|
+
|
|
245
|
+
$silver: #cdc5c2 !default
|
|
246
|
+
|
|
247
|
+
$gray: #95918c !default
|
|
248
|
+
|
|
249
|
+
$black: #232323 !default
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
2
|
+
//
|
|
3
|
+
// Graphpaper's Grid System
|
|
4
|
+
// ========================
|
|
5
|
+
//
|
|
6
|
+
// Based on Chris Eppstein's Sassification of the Blueprint CSS framework,
|
|
7
|
+
// Graphpaper's grid library aims at creating a simple, lightweight way to
|
|
8
|
+
// build a fixed-width grid-based layout with the least amount of
|
|
9
|
+
// public-facing mixins.
|
|
10
|
+
//
|
|
11
|
+
// This library is, admittedly, not as well tested as Blueprint; but should
|
|
12
|
+
// work just fine under modern browsers. For browsers that don't implement
|
|
13
|
+
// the :last-child pseudo-selector (:cough: IE :cough:), mix +last
|
|
14
|
+
// into the last element in a container in your IE stylesheet.
|
|
15
|
+
//
|
|
16
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
17
|
+
|
|
18
|
+
// Imports required libraries
|
|
19
|
+
|
|
20
|
+
@import compass/utilities/general/float.sass
|
|
21
|
+
@import compass/utilities/general/clearfix.sass
|
|
22
|
+
@import graphpaper/modules/colors.sass
|
|
23
|
+
|
|
24
|
+
// Default grid constants. It's pretty much the same as Blueprint but with one
|
|
25
|
+
// important exception. Graphpaper can add padding to the left of the grid
|
|
26
|
+
// container to add a little breathing room.
|
|
27
|
+
|
|
28
|
+
$graphpaper_grid_columns: 24 !default
|
|
29
|
+
|
|
30
|
+
$graphpaper_grid_width: 30px !default
|
|
31
|
+
|
|
32
|
+
$graphpaper_grid_margin: 10px !default
|
|
33
|
+
|
|
34
|
+
$graphpaper_grid_padding: 10px !default
|
|
35
|
+
|
|
36
|
+
$graphpaper_grid_outer_width: $graphpaper_grid_width + $graphpaper_grid_margin
|
|
37
|
+
|
|
38
|
+
$graphpaper_container_size: $graphpaper_grid_outer_width * $graphpaper_grid_columns - $graphpaper_grid_margin
|
|
39
|
+
|
|
40
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
41
|
+
//
|
|
42
|
+
// MIXIN: grid-container(center[true], add_padding_if_not_centered[true])
|
|
43
|
+
// USAGE: --- PUBLIC ---
|
|
44
|
+
// This mixin should be used on the element containing the contents of your
|
|
45
|
+
// page. By default, the grid is set to be aligned to the center of the
|
|
46
|
+
// browser window. By setting the first argument to "false", the grid
|
|
47
|
+
// will be aligned to the left side of the page. Additionally, this will
|
|
48
|
+
// trigger padding to be automatically added to the left side of the
|
|
49
|
+
// grid container. You can turn this off, by setting the second argument
|
|
50
|
+
// to "false" [ex. +grid-container(false, false)]
|
|
51
|
+
|
|
52
|
+
=grid-container($center: true, $add_padding: true)
|
|
53
|
+
@if $center
|
|
54
|
+
margin: 0px auto
|
|
55
|
+
@else
|
|
56
|
+
@if $add_padding
|
|
57
|
+
padding-left: $graphpaper_grid_padding
|
|
58
|
+
width: $graphpaper_container_size
|
|
59
|
+
+clearfix
|
|
60
|
+
|
|
61
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
62
|
+
//
|
|
63
|
+
// MIXIN: container
|
|
64
|
+
// USAGE: --- PUBLIC ---
|
|
65
|
+
// This mixin is intended for page elements that contain any number of grid
|
|
66
|
+
// columns. It provides the float clear for these internal columns.
|
|
67
|
+
|
|
68
|
+
=container
|
|
69
|
+
display: block
|
|
70
|
+
width: 100%
|
|
71
|
+
+clearfix
|
|
72
|
+
|
|
73
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
74
|
+
//
|
|
75
|
+
// MIXIN: last
|
|
76
|
+
// USAGE: --- PUBLIC ---
|
|
77
|
+
// The last mixin should be used in your IE stylesheet to remove the gutter
|
|
78
|
+
// from the last column in a container. Stylesheets targeting modern browsers
|
|
79
|
+
// such as Safari, Firefox, or Chrome do not need to add mixin because the
|
|
80
|
+
// column mixin utilizes the :last-child psuedo selector to automatically
|
|
81
|
+
// remove the gutter. Isn't that nice?
|
|
82
|
+
|
|
83
|
+
=last
|
|
84
|
+
margin-right: 0
|
|
85
|
+
|
|
86
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
87
|
+
//
|
|
88
|
+
// MIXIN: column-span(number_of_columns, add_right_gutter[false])
|
|
89
|
+
// USAGE: --- PRIVATE --
|
|
90
|
+
// You should never need to use this mixin in your own stylesheets. Graphpaper
|
|
91
|
+
// uses the column-span to set the width of a column
|
|
92
|
+
|
|
93
|
+
=column-span($n)
|
|
94
|
+
width: $graphpaper_grid_width * $n + $graphpaper_grid_margin * ($n - 1)
|
|
95
|
+
|
|
96
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
97
|
+
//
|
|
98
|
+
// MIXIN: column(number_of_columns, add_right_gutter[false])
|
|
99
|
+
// USAGE: --- PUBLIC ---
|
|
100
|
+
// Use +column for any element that you would like to become part of the grid structure of your document.
|
|
101
|
+
// These work almost exactly like Blueprint columns with a few exceptions:
|
|
102
|
+
//
|
|
103
|
+
// 1. By default, the column mixin will make the scoped element span one grid column. You can change this
|
|
104
|
+
// by setting the first argument to an integer equal to the number of columns you wish the element
|
|
105
|
+
// to span.
|
|
106
|
+
// 2. You do not need to add "true" as the second argument to denote the last column in a container. This
|
|
107
|
+
// mixin uses the :last-child selector to automatically remove the gutter for the last column. This,
|
|
108
|
+
// however, does not work in Internet Explorer. To compensate for this, you should add the +last mixin
|
|
109
|
+
// to the last element in your conditional IE stylesheet. Should Microsoft ever get its head out of its
|
|
110
|
+
// ass and decide to implement :last-child, I won't need to go back and change this code.
|
|
111
|
+
// 3. Sometimes, you might want to add some right-side padding to a column (maybe to make it look like a
|
|
112
|
+
// double gutter). You can do this by setting the second argument to "true".
|
|
113
|
+
//
|
|
114
|
+
// This is a pretty important mixin, so some examples shoule be in order.
|
|
115
|
+
//
|
|
116
|
+
// Example 1: Spanning an element over 5 columns
|
|
117
|
+
// +column(5)
|
|
118
|
+
//
|
|
119
|
+
// Example 2: Spanning an element 2 columns, and adding padding to the right equal to the gutter width
|
|
120
|
+
// +column(5, true)
|
|
121
|
+
|
|
122
|
+
=column($n: 1)
|
|
123
|
+
+float(left)
|
|
124
|
+
+column-span($n)
|
|
125
|
+
margin-right: $graphpaper_grid_margin
|
|
126
|
+
&:last-child
|
|
127
|
+
+last
|
|
128
|
+
|
|
129
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
130
|
+
//
|
|
131
|
+
// MIXIN: prepend(number_of_columns)
|
|
132
|
+
// USAGE: --- PUBLIC --
|
|
133
|
+
// Add padding to the left of a column equal to the number of columns in the mixin argument. The mixin
|
|
134
|
+
// defaults to prepending the element with a single column.
|
|
135
|
+
|
|
136
|
+
=prepend($n: 1)
|
|
137
|
+
padding-left: $graphpaper_grid_outer_width * $n
|
|
138
|
+
|
|
139
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
140
|
+
//
|
|
141
|
+
// MIXIN: append(number_of_columns)
|
|
142
|
+
// USAGE: --- PUBLIC ---
|
|
143
|
+
// Add padding to the right of a column equal to the number of columns in the mixin's argument. The mixin
|
|
144
|
+
// defaults to appending the element with a single column.
|
|
145
|
+
|
|
146
|
+
=append($n: 1)
|
|
147
|
+
padding-right: $graphpaper_grid_outer_width * $n
|
|
148
|
+
|
|
149
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
150
|
+
//
|
|
151
|
+
// MIXIN: push(number_of_columns)
|
|
152
|
+
// USAGE: --- PUBLIC ---
|
|
153
|
+
// Moves an element to the right equal to the number of columns specified in the mixin's argument. The mixin
|
|
154
|
+
// defaults to pushing the element a single column.
|
|
155
|
+
|
|
156
|
+
=push($n: 1)
|
|
157
|
+
+float(left)
|
|
158
|
+
margin-left: $graphpaper_grid_outer_width * $n
|
|
159
|
+
|
|
160
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
161
|
+
//
|
|
162
|
+
// MIXIN: pull(number_of_columns)
|
|
163
|
+
// USAGE: --- PUBLIC ---
|
|
164
|
+
// Pulls an element to the left equal to the number of columns specified in the mixin's argument. The mixin
|
|
165
|
+
// defaults to pulling the element a single column.
|
|
166
|
+
|
|
167
|
+
=pull($n: 1)
|
|
168
|
+
+float(left)
|
|
169
|
+
margin-left: $graphpaper_grid_outer_width * $n * -1
|
|
170
|
+
|
|
171
|
+
// ----------------------------------------------------------------------------------------------------------------
|
|
172
|
+
//
|
|
173
|
+
// MIXIN: border(hex_value_of_border_color)
|
|
174
|
+
// USAGE: --- PUBLIC ---
|
|
175
|
+
// Adds a border to the right of the scoped element. The color of the border defaults to gray as defined
|
|
176
|
+
// in Graphpaper's color file.
|
|
177
|
+
|
|
178
|
+
=border($border_color: $gray)
|
|
179
|
+
padding-right: $graphpaper_column_gutter / 2 - 1
|
|
180
|
+
margin-right: $graphpaper_column_gutter / 2
|
|
181
|
+
border-right: 1px solid #{$border_color}
|
|
182
|
+
|
|
183
|
+
// --- THIS IS A TEST MIXIN ---
|
|
184
|
+
// It would be good to have a mixing that helps keep verical rhythm in line
|
|
185
|
+
// with the gutters in our grid. It should also be able to scale by multiples
|
|
186
|
+
// of *n* to ensure the creation of proportional margins between containers
|
|
187
|
+
|
|
188
|
+
=row-margin($n: 1)
|
|
189
|
+
margin-bottom: $graphpaper_grid_margin * $n
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// Set type to a baseline using the values in this article from A List Apart
|
|
2
|
+
// http://www.alistapart.com/articles/settingtypeontheweb
|
|
3
|
+
|
|
4
|
+
!default_font_size ||= 12px
|
|
5
|
+
!line_height_multiplier ||= 1.5
|
|
6
|
+
!line_height = !default_font_size * !line_height_multiplier
|
|
7
|
+
|
|
8
|
+
body
|
|
9
|
+
:font-family "Helvetica"
|
|
10
|
+
:font-size #{!default_font_size}
|
|
11
|
+
:line-height #{!line_height}
|
|
12
|
+
|
|
13
|
+
p
|
|
14
|
+
:margin-bottom #{!line_height}
|
|
15
|
+
|
|
16
|
+
h1, h2, h3, h4, h5
|
|
17
|
+
:font-weight bold
|
|
18
|
+
|
|
19
|
+
h1
|
|
20
|
+
:font-size = !default_font_size * 2
|
|
21
|
+
:line-height = !line_height * 2
|
|
22
|
+
:margin-bottom #{!line_height}
|
|
23
|
+
|
|
24
|
+
h2
|
|
25
|
+
:font-size #{!line_height}
|
|
26
|
+
:line-height #{!line_height}
|
|
27
|
+
:margin-bottom #{!line_height}
|
|
28
|
+
|
|
29
|
+
h3, h4, h5
|
|
30
|
+
:font-size #{!default_font_size}
|
|
31
|
+
:line-height #{!line_height}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
// --------------------------------------------------------------------
|
|
2
|
+
// Graphpaper Base File
|
|
3
|
+
// ========================
|
|
4
|
+
//
|
|
5
|
+
// Use this define the styles for common elements throughout your site
|
|
6
|
+
// and import any other supporting Sass files.
|
|
7
|
+
//
|
|
8
|
+
// --------------------------------------------------------------------
|
|
9
|
+
|
|
10
|
+
// Step 1. Initialize Your Grid
|
|
11
|
+
//
|
|
12
|
+
// Relevant Mixin
|
|
13
|
+
//
|
|
14
|
+
// +grid-container(center = true, add_padding_if_not_centered = true)
|
|
15
|
+
//
|
|
16
|
+
// In order to initialize the Graphpaper grid module, you need to mix
|
|
17
|
+
// +grid-container into the element that contains the content of your
|
|
18
|
+
// page.
|
|
19
|
+
//
|
|
20
|
+
// Example (uncomment and modify for your own use)
|
|
21
|
+
//
|
|
22
|
+
// #pageContainer
|
|
23
|
+
// +grid-container
|
|
24
|
+
//
|
|
25
|
+
// If you wish to align your grid container to the left of the page
|
|
26
|
+
// and add padding based on the values in _config.sass,
|
|
27
|
+
// +grid-container has two vailable arguments.
|
|
28
|
+
//
|
|
29
|
+
// The first argument sets positioning of the grid. Graphpaper's
|
|
30
|
+
// default behavior is to center the element on the page. If you wish
|
|
31
|
+
// to align the element to the left of the page, set the first
|
|
32
|
+
// argument to false.
|
|
33
|
+
//
|
|
34
|
+
// #pageContainer
|
|
35
|
+
// +grid-container(false)
|
|
36
|
+
//
|
|
37
|
+
// Aligning the container to the left will automatically add a
|
|
38
|
+
// :padding-left property to the element equal to the value of
|
|
39
|
+
// !graphpaper_grid_padding in _config.sass
|
|
40
|
+
//
|
|
41
|
+
// To disable the padding, add a second "false" argument to grid-container
|
|
42
|
+
//
|
|
43
|
+
// #pageContainer
|
|
44
|
+
// +grid-container(false, false)
|
|
45
|
+
//
|
|
46
|
+
|
|
47
|
+
// Step 2. Style Common Site Elements
|
|
48
|
+
//
|
|
49
|
+
// Below, style common elements that appear across your site. Examples
|
|
50
|
+
// may include page headers, global navigation, or site footers.
|
|
51
|
+
|
|
52
|
+
// @import common/typography.sass
|
|
53
|
+
// @import common/header.sass
|
|
54
|
+
// @import common/footer.sass
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
// Step 3. Layout the Rest of Your Site
|
|
58
|
+
//
|
|
59
|
+
// Graphpaper's recommendation is to set the id element of each page on
|
|
60
|
+
// your site to the same name as the sass file that will style it. Scope
|
|
61
|
+
// all elements under body#id_name for an easy way keep your project
|
|
62
|
+
// maintainable. Generally, this id name will be the section of the site
|
|
63
|
+
// the content falls under. Examples include "home", "archives", and
|
|
64
|
+
// "contact".
|
|
65
|
+
//
|
|
66
|
+
// If this recommendation works for you, import those files below. Order
|
|
67
|
+
// will not matter since scoping under the body tag should eleminiate any
|
|
68
|
+
// issues that may arise from commonly named elements across different
|
|
69
|
+
// sections of your site.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// --------------------------------------------------------------------
|
|
2
|
+
// Graphpaper Configuration
|
|
3
|
+
// ========================
|
|
4
|
+
//
|
|
5
|
+
// These are values for the default Graphpaper grid. They will produce
|
|
6
|
+
// the standard 950px Blueprint layout.
|
|
7
|
+
//
|
|
8
|
+
// The !graphpaper_grid_padding value is not used unless you opt to
|
|
9
|
+
// left align your site by mixing +grid-container(false) in which
|
|
10
|
+
// case, it will apply the value to the :padding-left property of
|
|
11
|
+
// the element containing the grid.
|
|
12
|
+
//
|
|
13
|
+
// --------------------------------------------------------------------
|
|
14
|
+
|
|
15
|
+
!graphpaper_grid_columns = 24
|
|
16
|
+
!graphpaper_grid_width = 30px
|
|
17
|
+
!graphpaper_grid_margin = 10px
|
|
18
|
+
!graphpaper_grid_padding = 10px
|
|
19
|
+
|
|
20
|
+
!default_font_size = 12px
|
|
21
|
+
!line_height_multiplier = 1.5
|
|
22
|
+
|
|
23
|
+
// If this is your first time in this file, your next step will probably
|
|
24
|
+
// be in partials/_base.sass. There Graphpaper will walk you through
|
|
25
|
+
// applying the grid on your site and recommend some best practicies that
|
|
26
|
+
// will make it easier to work with Graphpaper.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import graphpaper/ie.sass
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
stylesheet 'config/_settings.sass'
|
|
2
|
+
stylesheet 'config/_base.sass'
|
|
3
|
+
stylesheet 'common/_footer.sass'
|
|
4
|
+
stylesheet 'common/_header.sass'
|
|
5
|
+
stylesheet 'common/_typography.sass'
|
|
6
|
+
stylesheet 'screen.sass', :media => 'screen, projection'
|
|
7
|
+
stylesheet 'print.sass', :media => 'print'
|
|
8
|
+
stylesheet 'ie.sass', :media => 'screen, projection', :condition => "lt IE 8"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import graphpaper/print.sass
|
metadata
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: graphpaper
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
prerelease: false
|
|
5
|
+
segments:
|
|
6
|
+
- 0
|
|
7
|
+
- 0
|
|
8
|
+
- 1
|
|
9
|
+
version: 0.0.1
|
|
10
|
+
platform: ruby
|
|
11
|
+
authors:
|
|
12
|
+
- Alex Cabrera
|
|
13
|
+
autorequire:
|
|
14
|
+
bindir: bin
|
|
15
|
+
cert_chain: []
|
|
16
|
+
|
|
17
|
+
date: 2010-04-27 00:00:00 -04:00
|
|
18
|
+
default_executable:
|
|
19
|
+
dependencies: []
|
|
20
|
+
|
|
21
|
+
description: A lightweight fixed-grid Compass framework for Ruby curmudgeons.
|
|
22
|
+
email: alex@policus.com
|
|
23
|
+
executables: []
|
|
24
|
+
|
|
25
|
+
extensions: []
|
|
26
|
+
|
|
27
|
+
extra_rdoc_files:
|
|
28
|
+
- README
|
|
29
|
+
- lib/graphpaper.rb
|
|
30
|
+
files:
|
|
31
|
+
- INSTALL
|
|
32
|
+
- README
|
|
33
|
+
- Rakefile
|
|
34
|
+
- lib/graphpaper.rb
|
|
35
|
+
- stylesheets/_graphpaper.sass
|
|
36
|
+
- stylesheets/graphpaper/_ie.sass
|
|
37
|
+
- stylesheets/graphpaper/_print.sass
|
|
38
|
+
- stylesheets/graphpaper/_screen.sass
|
|
39
|
+
- stylesheets/graphpaper/modules/_colors.sass
|
|
40
|
+
- stylesheets/graphpaper/modules/_grid.sass
|
|
41
|
+
- stylesheets/graphpaper/modules/_reset.sass
|
|
42
|
+
- stylesheets/graphpaper/modules/_typography.sass
|
|
43
|
+
- templates/project/common/_footer.sass
|
|
44
|
+
- templates/project/common/_header.sass
|
|
45
|
+
- templates/project/common/_typography.sass
|
|
46
|
+
- templates/project/config/_base.sass
|
|
47
|
+
- templates/project/config/_settings.sass
|
|
48
|
+
- templates/project/ie.sass
|
|
49
|
+
- templates/project/manifest.rb
|
|
50
|
+
- templates/project/print.sass
|
|
51
|
+
- templates/project/screen.sass
|
|
52
|
+
- Manifest
|
|
53
|
+
- graphpaper.gemspec
|
|
54
|
+
has_rdoc: true
|
|
55
|
+
homepage: http://github.com/alexcabrera/compas-graphpaper/
|
|
56
|
+
licenses: []
|
|
57
|
+
|
|
58
|
+
post_install_message:
|
|
59
|
+
rdoc_options:
|
|
60
|
+
- --line-numbers
|
|
61
|
+
- --inline-source
|
|
62
|
+
- --title
|
|
63
|
+
- Graphpaper
|
|
64
|
+
- --main
|
|
65
|
+
- README
|
|
66
|
+
require_paths:
|
|
67
|
+
- lib
|
|
68
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
69
|
+
requirements:
|
|
70
|
+
- - ">="
|
|
71
|
+
- !ruby/object:Gem::Version
|
|
72
|
+
segments:
|
|
73
|
+
- 0
|
|
74
|
+
version: "0"
|
|
75
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
76
|
+
requirements:
|
|
77
|
+
- - ">="
|
|
78
|
+
- !ruby/object:Gem::Version
|
|
79
|
+
segments:
|
|
80
|
+
- 1
|
|
81
|
+
- 2
|
|
82
|
+
version: "1.2"
|
|
83
|
+
requirements: []
|
|
84
|
+
|
|
85
|
+
rubyforge_project: graphpaper
|
|
86
|
+
rubygems_version: 1.3.6
|
|
87
|
+
signing_key:
|
|
88
|
+
specification_version: 3
|
|
89
|
+
summary: A lightweight fixed-grid Compass framework for Ruby curmudgeons.
|
|
90
|
+
test_files: []
|
|
91
|
+
|