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