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 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
@@ -1,4 +1,4 @@
1
1
  ---
2
2
  :minor: 2
3
- :patch: 4
3
+ :patch: 5
4
4
  :major: 0
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.4"
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-07-12}
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/_sitemap.sass",
30
- "templates/project/ie.sass",
28
+ "stylesheets/graphpaper/modules/_typography.sass",
31
29
  "templates/project/manifest.rb",
32
- "templates/project/partials/_base.sass",
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/sitemap.sass"
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"]
@@ -2,3 +2,4 @@
2
2
  @import graphpaper/modules/colors.sass
3
3
  @import graphpaper/modules/grid.sass
4
4
  @import graphpaper/modules/lists.sass
5
+ @import graphpaper/modules/typography.sass
@@ -70,7 +70,6 @@
70
70
 
71
71
  =container
72
72
  :display block
73
- :margin-bottom 10px
74
73
  :width = 100%
75
74
  +clearfix
76
75
 
@@ -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
@@ -1,2 +1,3 @@
1
- @import partials/base.sass
2
1
  @import graphpaper/screen.sass
2
+ @import partials/config.sass
3
+ @imoprt partials/base.sass
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
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-07-12 00:00:00 -07:00
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/_sitemap.sass
39
- - templates/project/ie.sass
37
+ - stylesheets/graphpaper/modules/_typography.sass
40
38
  - templates/project/manifest.rb
41
- - templates/project/partials/_base.sass
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/sitemap.sass
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,10 +0,0 @@
1
- =horizontal-list(!item_width = 2)
2
- li
3
- +column(!item_width)
4
-
5
- &:last-child
6
- +last
7
-
8
- a
9
- :display block
10
- :width 100%
@@ -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