alexcabrera-graphpaper 0.2.4 → 0.2.5
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +23 -0
- data/VERSION.yml +1 -1
- data/graphpaper.gemspec +9 -8
- data/stylesheets/graphpaper/_screen.sass +1 -0
- data/stylesheets/graphpaper/modules/_grid.sass +0 -1
- data/stylesheets/graphpaper/modules/_typography.sass +27 -0
- data/templates/project/screen.sass +2 -1
- data/templates/project/shared/_footer.sass +0 -0
- data/templates/project/shared/_header.sass +0 -0
- data/templates/project/shared/_typography.sass +0 -0
- metadata +9 -8
- data/stylesheets/graphpaper/modules/_lists.sass +0 -10
- data/stylesheets/graphpaper/modules/_sitemap.sass +0 -127
- data/templates/project/sitemap.sass +0 -34
data/README.markdown
CHANGED
@@ -1,3 +1,24 @@
|
|
1
|
+
Philosophy
|
2
|
+
==========
|
3
|
+
|
4
|
+
Graphpaper is a lightweight plugin to [Compass][compass_homepage] that
|
5
|
+
provides tools for rapidly prototyping fixed-width grid-based HTML layouts.
|
6
|
+
Unlike larger, more mature CSS frameworks and Compass extensions, Graphpaper
|
7
|
+
makes no design assumptions, but instead provides a highly organized structure
|
8
|
+
and opinionated defaults to assist an iterative design process.
|
9
|
+
|
10
|
+
Recommended Workflow
|
11
|
+
====================
|
12
|
+
|
13
|
+
Graphpaper is used internally at [Policus][policus_url] to prototype all
|
14
|
+
HTML-based interfaces. Ideas usually begin as pencil sketches and proceed
|
15
|
+
immediately to an HTML prototyping phase. Once the basic grid for each page
|
16
|
+
has been defined, a full-page screen capture is created using [Paparazzi][],
|
17
|
+
and is then handed off to the graphic design team and acts as a guide during
|
18
|
+
the visual design stage. The result is a highly iterative approach that allows
|
19
|
+
disparate teams to focus on their core strengths and promote low turnaround
|
20
|
+
times for implementation of visual changes.
|
21
|
+
|
1
22
|
Installing
|
2
23
|
==========
|
3
24
|
|
@@ -18,3 +39,5 @@ Related Links
|
|
18
39
|
[project_url]: http://github.com/alexcabrera/graphpaper
|
19
40
|
[wiki]: http://wiki.github.com/alexcabrera/graphpaper
|
20
41
|
[compass_homepage]: http://compass-style.org/
|
42
|
+
[policus_url]: http://policus.com
|
43
|
+
[paparazzi]: http://derailer.org/paparazzi/
|
data/VERSION.yml
CHANGED
data/graphpaper.gemspec
CHANGED
@@ -2,11 +2,11 @@
|
|
2
2
|
|
3
3
|
Gem::Specification.new do |s|
|
4
4
|
s.name = %q{graphpaper}
|
5
|
-
s.version = "0.2.
|
5
|
+
s.version = "0.2.5"
|
6
6
|
|
7
7
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
8
8
|
s.authors = ["Alex Cabrera"]
|
9
|
-
s.date = %q{2009-
|
9
|
+
s.date = %q{2009-08-31}
|
10
10
|
s.description = %q{A great starting point for projects that makes no design assumptions.}
|
11
11
|
s.email = %q{alex@policus.com}
|
12
12
|
s.extra_rdoc_files = [
|
@@ -24,16 +24,17 @@ Gem::Specification.new do |s|
|
|
24
24
|
"stylesheets/graphpaper/_screen.sass",
|
25
25
|
"stylesheets/graphpaper/modules/_colors.sass",
|
26
26
|
"stylesheets/graphpaper/modules/_grid.sass",
|
27
|
-
"stylesheets/graphpaper/modules/_lists.sass",
|
28
27
|
"stylesheets/graphpaper/modules/_reset.sass",
|
29
|
-
"stylesheets/graphpaper/modules/
|
30
|
-
"templates/project/ie.sass",
|
28
|
+
"stylesheets/graphpaper/modules/_typography.sass",
|
31
29
|
"templates/project/manifest.rb",
|
32
|
-
"templates/project/
|
33
|
-
"templates/project/partials/_config.sass",
|
30
|
+
"templates/project/ie.sass",
|
34
31
|
"templates/project/print.sass",
|
35
32
|
"templates/project/screen.sass",
|
36
|
-
"templates/project/
|
33
|
+
"templates/project/partials/_base.sass",
|
34
|
+
"templates/project/partials/_config.sass",
|
35
|
+
"templates/project/shared/_header.sass",
|
36
|
+
"templates/project/shared/_footer.sass",
|
37
|
+
"templates/project/shared/_typography.sass",
|
37
38
|
]
|
38
39
|
s.homepage = %q{http://github.com/alexcabrera/graphpaper}
|
39
40
|
s.rdoc_options = ["--charset=UTF-8"]
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// Stole the following from OOCSS, seemed like a pretty good model to follow
|
2
|
+
// http://github.com/stubbornella/oocss/
|
3
|
+
|
4
|
+
body
|
5
|
+
:font-family "Helvetica", "Arial", sans-serif
|
6
|
+
|
7
|
+
h1
|
8
|
+
:font-size 196%
|
9
|
+
|
10
|
+
h2
|
11
|
+
:font-size 167%
|
12
|
+
|
13
|
+
h3
|
14
|
+
:font-size 146.5%
|
15
|
+
|
16
|
+
h4
|
17
|
+
:font-size 123.1%
|
18
|
+
|
19
|
+
h5
|
20
|
+
:font-size 108%
|
21
|
+
|
22
|
+
h6
|
23
|
+
:font-size 108%
|
24
|
+
|
25
|
+
a
|
26
|
+
:color #1E9AE0
|
27
|
+
:text-decoration none
|
File without changes
|
File without changes
|
File without changes
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: alexcabrera-graphpaper
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.2.
|
4
|
+
version: 0.2.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Alex Cabrera
|
@@ -9,7 +9,7 @@ autorequire:
|
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
11
|
|
12
|
-
date: 2009-
|
12
|
+
date: 2009-08-31 00:00:00 -07:00
|
13
13
|
default_executable:
|
14
14
|
dependencies: []
|
15
15
|
|
@@ -33,16 +33,17 @@ files:
|
|
33
33
|
- stylesheets/graphpaper/_screen.sass
|
34
34
|
- stylesheets/graphpaper/modules/_colors.sass
|
35
35
|
- stylesheets/graphpaper/modules/_grid.sass
|
36
|
-
- stylesheets/graphpaper/modules/_lists.sass
|
37
36
|
- stylesheets/graphpaper/modules/_reset.sass
|
38
|
-
- stylesheets/graphpaper/modules/
|
39
|
-
- templates/project/ie.sass
|
37
|
+
- stylesheets/graphpaper/modules/_typography.sass
|
40
38
|
- templates/project/manifest.rb
|
41
|
-
- templates/project/
|
42
|
-
- templates/project/partials/_config.sass
|
39
|
+
- templates/project/ie.sass
|
43
40
|
- templates/project/print.sass
|
44
41
|
- templates/project/screen.sass
|
45
|
-
- templates/project/
|
42
|
+
- templates/project/partials/_base.sass
|
43
|
+
- templates/project/partials/_config.sass
|
44
|
+
- templates/project/shared/_header.sass
|
45
|
+
- templates/project/shared/_footer.sass
|
46
|
+
- templates/project/shared/_typography.sass
|
46
47
|
has_rdoc: false
|
47
48
|
homepage: http://github.com/alexcabrera/graphpaper
|
48
49
|
post_install_message:
|
@@ -1,127 +0,0 @@
|
|
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
|
@@ -1,34 +0,0 @@
|
|
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
|