alexcabrera-graphpaper 0.2.3
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +20 -0
- data/Rakefile +22 -0
- data/VERSION.yml +4 -0
- data/graphpaper.gemspec +54 -0
- data/lib/graphpaper.rb +2 -0
- data/stylesheets/_graphpaper.sass +3 -0
- data/stylesheets/graphpaper/_ie.sass +0 -0
- data/stylesheets/graphpaper/_print.sass +0 -0
- data/stylesheets/graphpaper/_screen.sass +4 -0
- data/stylesheets/graphpaper/modules/_colors.sass +130 -0
- data/stylesheets/graphpaper/modules/_grid.sass +186 -0
- data/stylesheets/graphpaper/modules/_lists.sass +10 -0
- data/stylesheets/graphpaper/modules/_reset.sass +3 -0
- data/stylesheets/graphpaper/modules/_sitemap.sass +127 -0
- data/templates/project/ie.sass +1 -0
- data/templates/project/manifest.rb +4 -0
- data/templates/project/partials/_base.sass +65 -0
- data/templates/project/partials/_config.sass +23 -0
- data/templates/project/print.sass +1 -0
- data/templates/project/screen.sass +2 -0
- data/templates/project/sitemap.sass +34 -0
- metadata +73 -0
data/README.markdown
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Installing
|
2
|
+
==========
|
3
|
+
|
4
|
+
$> sudo gem install alexcabrera-graphpaper --source http://gems.github.com/
|
5
|
+
|
6
|
+
Creating a New Project Based on GraphPaper
|
7
|
+
==========================================
|
8
|
+
|
9
|
+
$> compass -r graphpaper -f graphpaper my_graphpaper_project
|
10
|
+
|
11
|
+
Related Links
|
12
|
+
=============
|
13
|
+
|
14
|
+
* The GraphPaper project is hosted on [GitHub][project_url].
|
15
|
+
* The [GraphPaper Wiki][wiki].
|
16
|
+
* The [Compass Stylesheet Authoring Framework][compass_homepage].
|
17
|
+
|
18
|
+
[project_url]: http://github.com/alexcabrera/graphpaper
|
19
|
+
[wiki]: http://wiki.github.com/alexcabrera/graphpaper
|
20
|
+
[compass_homepage]: http://compass-style.org/
|
data/Rakefile
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
begin
|
2
|
+
require 'jeweler'
|
3
|
+
Jeweler::Tasks.new do |gemspec|
|
4
|
+
gemspec.name = "graphpaper"
|
5
|
+
gemspec.summary = "A Sass library for use with the Compass stylesheet authoring framework."
|
6
|
+
gemspec.description = "A great starting point for projects that makes no design assumptions."
|
7
|
+
gemspec.email = "alex@policus.com"
|
8
|
+
gemspec.homepage = "http://github.com/alexcabrera/graphpaper"
|
9
|
+
gemspec.authors = ["Alex Cabrera"]
|
10
|
+
gemspec.files = []
|
11
|
+
gemspec.files << "graphpaper.gemspec"
|
12
|
+
gemspec.files << "README.markdown"
|
13
|
+
gemspec.files << "Rakefile"
|
14
|
+
gemspec.files << "VERSION.yml"
|
15
|
+
gemspec.files += Dir.glob("lib/**/*")
|
16
|
+
gemspec.files += Dir.glob("stylesheets/**/*")
|
17
|
+
gemspec.files += Dir.glob("templates/**/*")
|
18
|
+
gemspec.files -= Dir.glob("pkg/**/*")
|
19
|
+
end
|
20
|
+
rescue LoadError
|
21
|
+
puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
|
22
|
+
end
|
data/VERSION.yml
ADDED
data/graphpaper.gemspec
ADDED
@@ -0,0 +1,54 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
|
3
|
+
Gem::Specification.new do |s|
|
4
|
+
s.name = %q{graphpaper}
|
5
|
+
s.version = "0.2.3"
|
6
|
+
|
7
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
8
|
+
s.authors = ["Alex Cabrera"]
|
9
|
+
s.date = %q{2009-07-11}
|
10
|
+
|
11
|
+
s.description = %q{A great starting point for projects that makes no design assumptions.}
|
12
|
+
s.email = %q{alex@policus.com}
|
13
|
+
s.extra_rdoc_files = [
|
14
|
+
"README.markdown"
|
15
|
+
]
|
16
|
+
s.files = [
|
17
|
+
"README.markdown",
|
18
|
+
"Rakefile",
|
19
|
+
"VERSION.yml",
|
20
|
+
"graphpaper.gemspec",
|
21
|
+
"lib/graphpaper.rb",
|
22
|
+
"stylesheets/_graphpaper.sass",
|
23
|
+
"stylesheets/graphpaper/_ie.sass",
|
24
|
+
"stylesheets/graphpaper/_print.sass",
|
25
|
+
"stylesheets/graphpaper/_screen.sass",
|
26
|
+
"stylesheets/graphpaper/modules/_colors.sass",
|
27
|
+
"stylesheets/graphpaper/modules/_grid.sass",
|
28
|
+
"stylesheets/graphpaper/modules/_lists.sass",
|
29
|
+
"stylesheets/graphpaper/modules/_reset.sass",
|
30
|
+
"stylesheets/graphpaper/modules/_sitemap.sass",
|
31
|
+
"templates/project/ie.sass",
|
32
|
+
"templates/project/manifest.rb",
|
33
|
+
"templates/project/partials/_base.sass",
|
34
|
+
"templates/project/partials/_config.sass",
|
35
|
+
"templates/project/print.sass",
|
36
|
+
"templates/project/screen.sass",
|
37
|
+
"templates/project/sitemap.sass"
|
38
|
+
]
|
39
|
+
s.homepage = %q{http://github.com/alexcabrera/graphpaper}
|
40
|
+
s.rdoc_options = ["--charset=UTF-8"]
|
41
|
+
s.require_paths = ["lib"]
|
42
|
+
s.rubygems_version = %q{1.3.3}
|
43
|
+
s.summary = %q{A Sass library for use with the Compass stylesheet authoring framework.}
|
44
|
+
|
45
|
+
if s.respond_to? :specification_version then
|
46
|
+
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
47
|
+
s.specification_version = 3
|
48
|
+
|
49
|
+
if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
|
50
|
+
else
|
51
|
+
end
|
52
|
+
else
|
53
|
+
end
|
54
|
+
end
|
data/lib/graphpaper.rb
ADDED
File without changes
|
File without changes
|
@@ -0,0 +1,130 @@
|
|
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
|
12
|
+
!fuzzy_wuzzy_brown ||= #cc6666
|
13
|
+
!chestnut ||= #bc5d58
|
14
|
+
!red_orange ||= #ff5349
|
15
|
+
!sunset_orange ||= #fd5e53
|
16
|
+
!bittersweet ||= #fd7c6e
|
17
|
+
!melon ||= #fdbcb4
|
18
|
+
!outrageous_orange ||= #ff6e4a
|
19
|
+
!vivid_tangerine ||= #ffa089
|
20
|
+
!burnt_sienna ||= #ea7e5d
|
21
|
+
!brown ||= #b4674d
|
22
|
+
!sepia ||= #a5694f
|
23
|
+
!orange ||= #ff7538
|
24
|
+
!burnt_orange ||= #ff7f49
|
25
|
+
!copper ||= #dd9475
|
26
|
+
!mango_tango ||= #ff8243
|
27
|
+
!atomic_tangerine ||= #ffa474
|
28
|
+
!beaver ||= #9f8170
|
29
|
+
!antique_brass ||= #cd9575
|
30
|
+
!desert_sand ||= #efcdb8
|
31
|
+
!raw_sienna ||= #d68a59
|
32
|
+
!tumbleweed ||= #deaa88
|
33
|
+
!tan ||= #faa76c
|
34
|
+
!peach ||= #ffcfab
|
35
|
+
!macaroni_and_cheese ||= #ffbd88
|
36
|
+
!apricot ||= #fdd9b5
|
37
|
+
!neon_carrot ||= #ffa343
|
38
|
+
!almond ||= #efdbc5
|
39
|
+
!yellow_orange ||= #ffb653
|
40
|
+
!gold ||= #e7c697
|
41
|
+
!shadow ||= #8a795d
|
42
|
+
!banana_mania ||= #fae7b5
|
43
|
+
!sunglow ||= #ffcf48
|
44
|
+
!goldenrod ||= #fcd975
|
45
|
+
!dandelion ||= #fddb6d
|
46
|
+
!yellow ||= #fce883
|
47
|
+
!green_yellow ||= #f0e891
|
48
|
+
!spring_green ||= #eceabe
|
49
|
+
!olive_green ||= #bab86c
|
50
|
+
!laser_lemon ||= #fdfc74
|
51
|
+
!unmellow_yellow ||= #fdfc74
|
52
|
+
!canary ||= #ffff99
|
53
|
+
!yellow_green ||= #c5e384
|
54
|
+
!inch_worm ||= #b2ec5d
|
55
|
+
!asparagus ||= #87a96b
|
56
|
+
!granny_smith_apple ||= #a8e4a0
|
57
|
+
!electric_lime ||= #1df914
|
58
|
+
!screamin_green ||= #76ff7a
|
59
|
+
!fern ||= #71bc78
|
60
|
+
!forest_green ||= #6dae81
|
61
|
+
!sea_green ||= #9fe2bf
|
62
|
+
!green ||= #1cac78
|
63
|
+
!mountain_meadow ||= #30ba8f
|
64
|
+
!shamrock ||= #45cea2
|
65
|
+
!jungle_green ||= #3bb08f
|
66
|
+
!caribbean_green ||= #1cd3a2
|
67
|
+
!tropical_rain_forest ||= #17806d
|
68
|
+
!pine_green ||= #158078
|
69
|
+
!robin_egg_blue ||= #1fcecb
|
70
|
+
!aquamarine ||= #78dbe2
|
71
|
+
!turquoise_blue ||= #77dde7
|
72
|
+
!sky_blue ||= #80daeb
|
73
|
+
!outer_space ||= #414a4c
|
74
|
+
!blue_green ||= #199ebd
|
75
|
+
!pacific_blue ||= #1ca9c9
|
76
|
+
!cerulean ||= #1dacd6
|
77
|
+
!cornflower ||= #9aceeb
|
78
|
+
!midnight_blue ||= #1a4876
|
79
|
+
!navy_blue ||= #1974d2
|
80
|
+
!denim ||= #2b6cc4
|
81
|
+
!blue ||= #1f75fe
|
82
|
+
!periwinkle ||= #c5d0e6
|
83
|
+
!cadet_blue ||= #b0b7c6
|
84
|
+
!indigo ||= #5d76cb
|
85
|
+
!wild_blue_yonder ||= #a2add0
|
86
|
+
!manatee ||= #979aaa
|
87
|
+
!blue_bell ||= #adadd6
|
88
|
+
!blue_violet ||= #7366bd
|
89
|
+
!purple_heart ||= #7442c8
|
90
|
+
!royal_purple ||= #7851a9
|
91
|
+
!purple_mountains_majesty ||= #9d81ba
|
92
|
+
!violet_purple ||= #926eae
|
93
|
+
!wisteria ||= #cda4de
|
94
|
+
!vivid_violet ||= #8f509d
|
95
|
+
!fuchsia ||= #c364c5
|
96
|
+
!shocking_pink ||= #fb7efd
|
97
|
+
!pink_flamingo ||= #fc74fd
|
98
|
+
!plum ||= #8e4585
|
99
|
+
!hot_magenta ||= #ff1dce
|
100
|
+
!purple_pizzazz ||= #ff1dce
|
101
|
+
!razzle_dazzle_rose ||= #ff48d0
|
102
|
+
!orchid ||= #e6a8d7
|
103
|
+
!red_violet ||= #c0448f
|
104
|
+
!eggplant ||= #6e5160
|
105
|
+
!cerise ||= #dd4492
|
106
|
+
!wild_strawberry ||= #ff43a4
|
107
|
+
!magenta ||= #f664af
|
108
|
+
!lavender ||= #fcb4d5
|
109
|
+
!cotton_candy ||= #ffbcd9
|
110
|
+
!violet_red ||= #f75394
|
111
|
+
!carnation_pink ||= #ffaacc
|
112
|
+
!razzmatazz ||= #e3256b
|
113
|
+
!piggy_pink ||= #fdd7e4
|
114
|
+
!jazzberry_jam ||= #ca3767
|
115
|
+
!blush ||= #de5d83
|
116
|
+
!tickle_me_pink ||= #fc89ac
|
117
|
+
!pink_sherbet ||= #f780a1
|
118
|
+
!maroon ||= #c8385a
|
119
|
+
!red ||= #ee204d
|
120
|
+
!radical_red ||= #ff496c
|
121
|
+
!mauvelous ||= #ef98aa
|
122
|
+
!wild_watermelon ||= #fc6c85
|
123
|
+
!scarlet ||= #fc2847
|
124
|
+
!salmon ||= #ff9baa
|
125
|
+
!brick_red ||= #cb4154
|
126
|
+
!white ||= #ededed
|
127
|
+
!timberwolf ||= #dbd7d2
|
128
|
+
!silver ||= #cdc5c2
|
129
|
+
!gray ||= #95918c
|
130
|
+
!black ||= #232323
|
@@ -0,0 +1,186 @@
|
|
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. I'd be able to further simplify
|
13
|
+
// this library if the Internet Explorer team could just find it in their
|
14
|
+
// hearts to implement the goddamn :last-child selector; but alas, Microsoft
|
15
|
+
// deems it neccessary to further tarnish themselves with developers until
|
16
|
+
// there's nobody left to develop for their shitty platform.
|
17
|
+
//
|
18
|
+
// - Alex Cabrera, 08-JUL-2009
|
19
|
+
//
|
20
|
+
// ----------------------------------------------------------------------------------------------------------------
|
21
|
+
|
22
|
+
// Imports required libraries
|
23
|
+
|
24
|
+
@import compass/utilities/general/float.sass
|
25
|
+
@import graphpaper/modules/colors.sass
|
26
|
+
|
27
|
+
// Default grid constants. It's pretty much the same as Blueprint but with one
|
28
|
+
// important exception. Graphpaper can add padding to the left of the grid
|
29
|
+
// container to add a little breathing room.
|
30
|
+
|
31
|
+
!graphpaper_grid_columns ||= 24
|
32
|
+
!graphpaper_grid_width ||= 30px
|
33
|
+
!graphpaper_grid_margin ||= 10px
|
34
|
+
!graphpaper_grid_padding ||= 10px
|
35
|
+
|
36
|
+
!graphpaper_grid_outer_width = !graphpaper_grid_width + !graphpaper_grid_margin
|
37
|
+
!graphpaper_container_size = !graphpaper_grid_outer_width * !graphpaper_grid_columns - !graphpaper_grid_margin
|
38
|
+
|
39
|
+
// ----------------------------------------------------------------------------------------------------------------
|
40
|
+
//
|
41
|
+
// MIXIN: grid-container(center[true], add_padding_if_not_centered[true])
|
42
|
+
// USAGE: --- PUBLIC ---
|
43
|
+
// This mixin should be used on the element containing the contents of your
|
44
|
+
// page. By default, the grid is set to be aligned to the center of the
|
45
|
+
// browser window. By setting the first argument to "false", the grid
|
46
|
+
// will be aligned to the left side of the page. Additionally, this will
|
47
|
+
// trigger padding to be automatically added to the left side of the
|
48
|
+
// grid container. You can turn this off, by setting the second argument
|
49
|
+
// to "false" [ex. +grid-container(false, false)]
|
50
|
+
|
51
|
+
=grid-container(!center = true, !add_padding = true)
|
52
|
+
|
53
|
+
@if !center
|
54
|
+
:margin 0px auto
|
55
|
+
@else
|
56
|
+
|
57
|
+
@if !add_padding
|
58
|
+
:padding-left = !graphpaper_grid_padding
|
59
|
+
|
60
|
+
:width = !graphpaper_container_size
|
61
|
+
+clearfix
|
62
|
+
|
63
|
+
|
64
|
+
// ----------------------------------------------------------------------------------------------------------------
|
65
|
+
//
|
66
|
+
// MIXIN: container
|
67
|
+
// USAGE: --- PUBLIC ---
|
68
|
+
// This mixin is intended for page elements that contain any number of grid
|
69
|
+
// columns. It provides the float clear for these internal columns.
|
70
|
+
|
71
|
+
=container
|
72
|
+
:display block
|
73
|
+
:margin-bottom 10px
|
74
|
+
:width = 100%
|
75
|
+
+clearfix
|
76
|
+
|
77
|
+
// ----------------------------------------------------------------------------------------------------------------
|
78
|
+
//
|
79
|
+
// MIXIN: last
|
80
|
+
// USAGE: --- PUBLIC ---
|
81
|
+
// The last mixin should be used in your IE stylesheet to remove the gutter
|
82
|
+
// from the last column in a container. Stylesheets targeting modern browsers
|
83
|
+
// such as Safari, Firefox, or Chrome do not need to add mixin because the
|
84
|
+
// column mixin utilizes the :last-child psuedo selector to automatically
|
85
|
+
// remove the gutter. Isn't that nice?
|
86
|
+
|
87
|
+
=last
|
88
|
+
:margin-right 0
|
89
|
+
|
90
|
+
// ----------------------------------------------------------------------------------------------------------------
|
91
|
+
//
|
92
|
+
// MIXIN: column-span(number_of_columns, add_right_gutter[false])
|
93
|
+
// USAGE: --- PRIVATE --
|
94
|
+
// You should never need to use this mixin in your own stylesheets. Graphpaper
|
95
|
+
// uses the column-span to set the width of a column
|
96
|
+
|
97
|
+
=column-span(!n)
|
98
|
+
:width = !graphpaper_grid_width * !n + (!graphpaper_grid_margin * (!n - 1))
|
99
|
+
|
100
|
+
// ----------------------------------------------------------------------------------------------------------------
|
101
|
+
//
|
102
|
+
// MIXIN: column(number_of_columns, add_right_gutter[false])
|
103
|
+
// USAGE: --- PUBLIC ---
|
104
|
+
// Use +column for any element that you would like to become part of the grid structure of your document.
|
105
|
+
// These work almost exactly like Blueprint columns with a few exceptions:
|
106
|
+
//
|
107
|
+
// 1. By default, the column mixin will make the scoped element span one grid column. You can change this
|
108
|
+
// by setting the first argument to an integer equal to the number of columns you wish the element
|
109
|
+
// to span.
|
110
|
+
// 2. You do not need to add "true" as the second argument to denote the last column in a container. This
|
111
|
+
// mixin uses the :last-child selector to automatically remove the gutter for the last column. This,
|
112
|
+
// however, does not work in Internet Explorer. To compensate for this, you should add the +last mixin
|
113
|
+
// to the last element in your conditional IE stylesheet. Should Microsoft ever get its head out of its
|
114
|
+
// ass and decide to implement :last-child, I won't need to go back and change this code.
|
115
|
+
// 3. Sometimes, you might want to add some right-side padding to a column (maybe to make it look like a
|
116
|
+
// double gutter). You can do this by setting the second argument to "true".
|
117
|
+
//
|
118
|
+
// This is a pretty important mixin, so some examples shoule be in order.
|
119
|
+
//
|
120
|
+
// Example 1: Spanning an element over 5 columns
|
121
|
+
// +column(5)
|
122
|
+
//
|
123
|
+
// Example 2: Spanning an element 2 columns, and adding padding to the right equal to the gutter width
|
124
|
+
// +column(5, true)
|
125
|
+
|
126
|
+
=column(!n = 1)
|
127
|
+
+float("left")
|
128
|
+
+column-span(!n)
|
129
|
+
:margin-right = !graphpaper_grid_margin
|
130
|
+
|
131
|
+
&:last-child
|
132
|
+
+last
|
133
|
+
|
134
|
+
// ----------------------------------------------------------------------------------------------------------------
|
135
|
+
//
|
136
|
+
// MIXIN: prepend(number_of_columns)
|
137
|
+
// USAGE: --- PUBLIC --
|
138
|
+
// Add padding to the left of a column equal to the number of columns in the mixin argument. The mixin
|
139
|
+
// defaults to prepending the element with a single column.
|
140
|
+
|
141
|
+
=prepend(!n = 1)
|
142
|
+
:padding-left = !graphpaper_grid_outer_width * !n
|
143
|
+
|
144
|
+
// ----------------------------------------------------------------------------------------------------------------
|
145
|
+
//
|
146
|
+
// MIXIN: append(number_of_columns)
|
147
|
+
// USAGE: --- PUBLIC ---
|
148
|
+
// Add padding to the right of a column equal to the number of columns in the mixin's argument. The mixin
|
149
|
+
// defaults to appending the element with a single column.
|
150
|
+
|
151
|
+
=append(!n = 1)
|
152
|
+
:padding-right = !graphpaper_grid_outer_width * !n
|
153
|
+
|
154
|
+
// ----------------------------------------------------------------------------------------------------------------
|
155
|
+
//
|
156
|
+
// MIXIN: push(number_of_columns)
|
157
|
+
// USAGE: --- PUBLIC ---
|
158
|
+
// Moves an element to the right equal to the number of columns specified in the mixin's argument. The mixin
|
159
|
+
// defaults to pushing the element a single column.
|
160
|
+
|
161
|
+
=push(!n = 1)
|
162
|
+
+float("left")
|
163
|
+
:margin-left = !graphpaper_grid_outer_width * !n
|
164
|
+
|
165
|
+
// ----------------------------------------------------------------------------------------------------------------
|
166
|
+
//
|
167
|
+
// MIXIN: pull(number_of_columns)
|
168
|
+
// USAGE: --- PUBLIC ---
|
169
|
+
// Pulls an element to the left equal to the number of columns specified in the mixin's argument. The mixin
|
170
|
+
// defaults to pulling the element a single column.
|
171
|
+
|
172
|
+
=pull(!n = 1)
|
173
|
+
+float("left")
|
174
|
+
:margin-left = (!graphpaper_grid_outer_width * !n) * -1
|
175
|
+
|
176
|
+
// ----------------------------------------------------------------------------------------------------------------
|
177
|
+
//
|
178
|
+
// MIXIN: border(hex_value_of_border_color)
|
179
|
+
// USAGE: --- PUBLIC ---
|
180
|
+
// Adds a border to the right of the scoped element. The color of the border defaults to gray as defined
|
181
|
+
// in Graphpaper's color file.
|
182
|
+
|
183
|
+
=border(!border_color = !gray)
|
184
|
+
:padding-right = !graphpaper_column_gutter / 2 - 1
|
185
|
+
:margin-right = !graphpaper_column_gutter / 2
|
186
|
+
:border-right 1px solid #{!border_color}
|
@@ -0,0 +1,127 @@
|
|
1
|
+
// ----------------------------------------------------------------------------------------------------------------
|
2
|
+
//
|
3
|
+
// Easy Site Maps
|
4
|
+
// ========================
|
5
|
+
//
|
6
|
+
// This is an adaptation of SlickMap CSS (http://astuteo.com/slickmap/) by Astuteo.
|
7
|
+
// It's not as pretty as the sitemaps produced by that library (this one doen't
|
8
|
+
// include any images), but it gets the job done. It creates clickable sitemaps
|
9
|
+
// from unordered lists. Use it to help develop the architecture for your site
|
10
|
+
// during your prototyping process.
|
11
|
+
//
|
12
|
+
// To use it, simply mix +build-sitemap into the top level ul element.
|
13
|
+
//
|
14
|
+
// ----------------------------------------------------------------------------------------------------------------
|
15
|
+
|
16
|
+
@import graphpaper/modules/reset.sass
|
17
|
+
@import graphpaper/modules/colors.sass
|
18
|
+
@import graphpaper/modules/grid.sass
|
19
|
+
|
20
|
+
|
21
|
+
=build-sitemap
|
22
|
+
|
23
|
+
:font-family "Helvetica", "Arial", sans-serif
|
24
|
+
|
25
|
+
#info
|
26
|
+
:margin-top 40px
|
27
|
+
:margin-left 40px
|
28
|
+
|
29
|
+
|
30
|
+
h1
|
31
|
+
:font-size 36px
|
32
|
+
:font-weight bold
|
33
|
+
:line-height 36px
|
34
|
+
:margin-bottom 18px
|
35
|
+
|
36
|
+
h2
|
37
|
+
:font-size 14px
|
38
|
+
:font-weight bold
|
39
|
+
:line-height 18px
|
40
|
+
|
41
|
+
ul#sitemap
|
42
|
+
:color #{!black}
|
43
|
+
:padding 40px
|
44
|
+
:font-size 12px
|
45
|
+
:line-height 1
|
46
|
+
:list-style none
|
47
|
+
|
48
|
+
a
|
49
|
+
|
50
|
+
&:link, &:visited
|
51
|
+
|
52
|
+
&:before
|
53
|
+
:content " "attr(href)" "
|
54
|
+
:display block
|
55
|
+
:text-transform uppercase
|
56
|
+
:font-size 10px
|
57
|
+
:margin-bottom 5px
|
58
|
+
:word-wrap break-word
|
59
|
+
|
60
|
+
li
|
61
|
+
:float left
|
62
|
+
:width 200px
|
63
|
+
:padding 30px 0
|
64
|
+
:margin-top -30px
|
65
|
+
|
66
|
+
a
|
67
|
+
:margin 0 20px 0 0
|
68
|
+
:padding 10px 0
|
69
|
+
:display block
|
70
|
+
:font-size 14px
|
71
|
+
:font-weight bold
|
72
|
+
:text-align center
|
73
|
+
:color #{!black}
|
74
|
+
:background #C3EAFB
|
75
|
+
:border 2px solid #B5D9EA
|
76
|
+
|
77
|
+
&:hover
|
78
|
+
:background-color #E2F4FD
|
79
|
+
:border-color #97BDCF
|
80
|
+
|
81
|
+
// Second Level
|
82
|
+
|
83
|
+
li
|
84
|
+
:width 100%
|
85
|
+
:clear left
|
86
|
+
:margin-top 0
|
87
|
+
:padding 10px 0 0 0
|
88
|
+
|
89
|
+
&:first-child
|
90
|
+
:padding-top 30px
|
91
|
+
|
92
|
+
a
|
93
|
+
:background-color #CEE3AC
|
94
|
+
:border-color #B8DA83
|
95
|
+
|
96
|
+
&:link, &:visited
|
97
|
+
|
98
|
+
&:before
|
99
|
+
:color #8FAF5C
|
100
|
+
|
101
|
+
// Third Level
|
102
|
+
|
103
|
+
ul
|
104
|
+
:margin 0
|
105
|
+
:width 100%
|
106
|
+
:float right
|
107
|
+
|
108
|
+
li
|
109
|
+
:padding 5px 0
|
110
|
+
|
111
|
+
&:first-child
|
112
|
+
:padding 15px 0 5px 0
|
113
|
+
|
114
|
+
a
|
115
|
+
:background-color #FFF7AA
|
116
|
+
:border-color #E3CA4B
|
117
|
+
:font-size 12px
|
118
|
+
:padding 5px 0
|
119
|
+
:margin-right 10%
|
120
|
+
:width 70%
|
121
|
+
:float right
|
122
|
+
|
123
|
+
&:link, &:visited
|
124
|
+
|
125
|
+
&:before
|
126
|
+
:color #CCAE14
|
127
|
+
:font-size 9px
|
@@ -0,0 +1 @@
|
|
1
|
+
@import graphpaper/ie.sass
|
@@ -0,0 +1,65 @@
|
|
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 partials/_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 partials/_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
|
+
|
53
|
+
// Step 3. Layout the Rest of Your Site
|
54
|
+
//
|
55
|
+
// Graphpaper's recommendation is to set the id element of each page on
|
56
|
+
// your site to the same name as the sass file that will style it. Scope
|
57
|
+
// all elements under body#id_name for an easy way keep your project
|
58
|
+
// maintainable. Generally, this id name will be the section of the site
|
59
|
+
// the content falls under. Examples include "home", "archives", and
|
60
|
+
// "contact".
|
61
|
+
//
|
62
|
+
// If this recommendation works for you, import those files below. Order
|
63
|
+
// will not matter since scoping under the body tag should eleminiate any
|
64
|
+
// issues that may arise from commonly named elements across different
|
65
|
+
// sections of your site.
|
@@ -0,0 +1,23 @@
|
|
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
|
+
// If this is your first time in this file, your next step will probably
|
21
|
+
// be in partials/_base.sass. There Graphpaper will walk you through
|
22
|
+
// applying the grid on your site and recommend some best practicies that
|
23
|
+
// will make it easier to work with Graphpaper.
|
@@ -0,0 +1 @@
|
|
1
|
+
@import graphpaper/print.sass
|
@@ -0,0 +1,34 @@
|
|
1
|
+
@import graphpaper/modules/sitemap.sass
|
2
|
+
|
3
|
+
// Use the template below to quickly build a sitemap.
|
4
|
+
//
|
5
|
+
// <!DOCTYPE html>
|
6
|
+
// <html>
|
7
|
+
// <head>
|
8
|
+
// <title>Sample Sitemap</title>
|
9
|
+
// <link rel="stylesheet" type="text/css" href="stylesheets/sitemap.css" media="screen, projection">
|
10
|
+
// </head>
|
11
|
+
// <body id="sitemap">
|
12
|
+
// <ul>
|
13
|
+
// <li><a href="#">Section 1</a></li>
|
14
|
+
// <li>
|
15
|
+
// <a href="#">Section 2</a>
|
16
|
+
// <ul>
|
17
|
+
// <li><a href="#">Sub-Section 1</a></li>
|
18
|
+
// <li>
|
19
|
+
// <a href="#">Sub-Section 2</a>
|
20
|
+
// <ul>
|
21
|
+
// <li><a href="#">Sub-Sub-Section 1</a></li>
|
22
|
+
// <li><a href="#">Sub-Sub-Section 2</a></li>
|
23
|
+
// </ul>
|
24
|
+
// </li>
|
25
|
+
// <li><a href="#">Sub-Section 3</a></li>
|
26
|
+
// </ul>
|
27
|
+
// </li>
|
28
|
+
// <li><a href="#">Sub-Section 4</a></li>
|
29
|
+
// </ul>
|
30
|
+
// </body>
|
31
|
+
// </html>
|
32
|
+
|
33
|
+
body
|
34
|
+
+build-sitemap
|
metadata
ADDED
@@ -0,0 +1,73 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: alexcabrera-graphpaper
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.2.3
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Alex Cabrera
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
|
12
|
+
date: 2009-07-11 00:00:00 -07:00
|
13
|
+
default_executable:
|
14
|
+
dependencies: []
|
15
|
+
|
16
|
+
description: A great starting point for projects that makes no design assumptions.
|
17
|
+
email: alex@policus.com
|
18
|
+
executables: []
|
19
|
+
|
20
|
+
extensions: []
|
21
|
+
|
22
|
+
extra_rdoc_files:
|
23
|
+
- README.markdown
|
24
|
+
files:
|
25
|
+
- README.markdown
|
26
|
+
- Rakefile
|
27
|
+
- VERSION.yml
|
28
|
+
- graphpaper.gemspec
|
29
|
+
- lib/graphpaper.rb
|
30
|
+
- stylesheets/_graphpaper.sass
|
31
|
+
- stylesheets/graphpaper/_ie.sass
|
32
|
+
- stylesheets/graphpaper/_print.sass
|
33
|
+
- stylesheets/graphpaper/_screen.sass
|
34
|
+
- stylesheets/graphpaper/modules/_colors.sass
|
35
|
+
- stylesheets/graphpaper/modules/_grid.sass
|
36
|
+
- stylesheets/graphpaper/modules/_lists.sass
|
37
|
+
- stylesheets/graphpaper/modules/_reset.sass
|
38
|
+
- stylesheets/graphpaper/modules/_sitemap.sass
|
39
|
+
- templates/project/ie.sass
|
40
|
+
- templates/project/manifest.rb
|
41
|
+
- templates/project/partials/_base.sass
|
42
|
+
- templates/project/partials/_config.sass
|
43
|
+
- templates/project/print.sass
|
44
|
+
- templates/project/screen.sass
|
45
|
+
- templates/project/sitemap.sass
|
46
|
+
has_rdoc: false
|
47
|
+
homepage: http://github.com/alexcabrera/graphpaper
|
48
|
+
post_install_message:
|
49
|
+
rdoc_options:
|
50
|
+
- --charset=UTF-8
|
51
|
+
require_paths:
|
52
|
+
- lib
|
53
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
54
|
+
requirements:
|
55
|
+
- - ">="
|
56
|
+
- !ruby/object:Gem::Version
|
57
|
+
version: "0"
|
58
|
+
version:
|
59
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
60
|
+
requirements:
|
61
|
+
- - ">="
|
62
|
+
- !ruby/object:Gem::Version
|
63
|
+
version: "0"
|
64
|
+
version:
|
65
|
+
requirements: []
|
66
|
+
|
67
|
+
rubyforge_project:
|
68
|
+
rubygems_version: 1.2.0
|
69
|
+
signing_key:
|
70
|
+
specification_version: 3
|
71
|
+
summary: A Sass library for use with the Compass stylesheet authoring framework.
|
72
|
+
test_files: []
|
73
|
+
|