alexcabrera-graphpaper 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.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
|
+
|