alexcabrera-graphpaper 0.2.5 → 0.2.6
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 +42 -13
- data/VERSION.yml +1 -1
- data/graphpaper.gemspec +28 -24
- data/templates/project/manifest.rb +0 -1
- data/templates/project/partials/_base.sass +4 -0
- metadata +7 -7
data/README.markdown
CHANGED
@@ -3,21 +3,48 @@ Philosophy
|
|
3
3
|
|
4
4
|
Graphpaper is a lightweight plugin to [Compass][compass_homepage] that
|
5
5
|
provides tools for rapidly prototyping fixed-width grid-based HTML layouts.
|
6
|
-
Unlike larger, more mature CSS frameworks and Compass extensions,
|
7
|
-
makes no design assumptions,
|
8
|
-
and opinionated defaults to assist an iterative
|
6
|
+
Unlike larger, more mature CSS frameworks and Compass extensions, While
|
7
|
+
Graphpaper makes no design assumptions, it does provides a highly organized
|
8
|
+
file structure and opinionated defaults to assist in an iterative development
|
9
|
+
environment.
|
9
10
|
|
10
|
-
|
11
|
-
|
11
|
+
Sample Workflow
|
12
|
+
===============
|
12
13
|
|
13
14
|
Graphpaper is used internally at [Policus][policus_url] to prototype all
|
14
|
-
HTML-based interfaces.
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
15
|
+
HTML-based interfaces. Our workflow usually goes as follows:
|
16
|
+
|
17
|
+
1. The basic layout of a page is developed through iterative
|
18
|
+
[pencil sketches][sketch_image].
|
19
|
+
|
20
|
+
2. Using Graphpaper, we immediately jump into coding HTML prototypes to test
|
21
|
+
assumptions made on paper and get a feel for how the interface will work
|
22
|
+
in a browser.
|
23
|
+
|
24
|
+
3. Once we're happy with the overall architecture of the page, [Paparazzi][]
|
25
|
+
is used to create a screen capture of the entire page.
|
26
|
+
|
27
|
+
4. The graphic design team takes the screen capture and uses it guide when
|
28
|
+
developing the visual identity of the site.
|
29
|
+
|
30
|
+
5. Visual design changes are then quickly implemented using standard SASS and
|
31
|
+
Compass functionality to enable immediate feedback from developers,
|
32
|
+
designers, and clients.
|
33
|
+
|
34
|
+
Getting Started
|
35
|
+
===============
|
36
|
+
|
37
|
+
Check partials/_base.sass for instructions to initialize a grid for your page.
|
38
|
+
Graphpaper makes heavy use of the last-child pseudo-element to clear the
|
39
|
+
floats required for a grid. The +last mixin is available for use in your IE
|
40
|
+
stylesheet to compensate for the browser's implementation deficiencies.
|
41
|
+
|
42
|
+
To create your grid columns, mix +container into any element that will be
|
43
|
+
grouping columns and then use +column(n) to have an element span n-number of
|
44
|
+
columns.
|
45
|
+
|
46
|
+
The size of your columns and gutters can be defined in partials/_config.sass.
|
47
|
+
Graphpaper defaults to the standard [Blueprint][] 960px grid.
|
21
48
|
|
22
49
|
Installing
|
23
50
|
==========
|
@@ -40,4 +67,6 @@ Related Links
|
|
40
67
|
[wiki]: http://wiki.github.com/alexcabrera/graphpaper
|
41
68
|
[compass_homepage]: http://compass-style.org/
|
42
69
|
[policus_url]: http://policus.com
|
43
|
-
[paparazzi]: http://derailer.org/paparazzi/
|
70
|
+
[paparazzi]: http://derailer.org/paparazzi/
|
71
|
+
[sketch_image]: http://img.skitch.com/20090831-ceyrgghuta6niy9q727ke627b2.jpg
|
72
|
+
[blueprint]: http://www.blueprintcss.org/
|
data/VERSION.yml
CHANGED
data/graphpaper.gemspec
CHANGED
@@ -1,8 +1,11 @@
|
|
1
|
+
# Generated by jeweler
|
2
|
+
# DO NOT EDIT THIS FILE
|
3
|
+
# Instead, edit Jeweler::Tasks in Rakefile, and run `rake gemspec`
|
1
4
|
# -*- encoding: utf-8 -*-
|
2
5
|
|
3
6
|
Gem::Specification.new do |s|
|
4
7
|
s.name = %q{graphpaper}
|
5
|
-
s.version = "0.2.
|
8
|
+
s.version = "0.2.6"
|
6
9
|
|
7
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
8
11
|
s.authors = ["Alex Cabrera"]
|
@@ -14,37 +17,38 @@ Gem::Specification.new do |s|
|
|
14
17
|
]
|
15
18
|
s.files = [
|
16
19
|
"README.markdown",
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
20
|
+
"Rakefile",
|
21
|
+
"VERSION.yml",
|
22
|
+
"graphpaper.gemspec",
|
23
|
+
"lib/graphpaper.rb",
|
24
|
+
"stylesheets/_graphpaper.sass",
|
25
|
+
"stylesheets/graphpaper/_ie.sass",
|
26
|
+
"stylesheets/graphpaper/_print.sass",
|
27
|
+
"stylesheets/graphpaper/_screen.sass",
|
28
|
+
"stylesheets/graphpaper/modules/_colors.sass",
|
29
|
+
"stylesheets/graphpaper/modules/_grid.sass",
|
30
|
+
"stylesheets/graphpaper/modules/_reset.sass",
|
31
|
+
"stylesheets/graphpaper/modules/_typography.sass",
|
32
|
+
"templates/project/ie.sass",
|
33
|
+
"templates/project/manifest.rb",
|
34
|
+
"templates/project/partials/_base.sass",
|
35
|
+
"templates/project/partials/_config.sass",
|
36
|
+
"templates/project/print.sass",
|
37
|
+
"templates/project/screen.sass",
|
38
|
+
"templates/project/shared/_footer.sass",
|
39
|
+
"templates/project/shared/_header.sass",
|
40
|
+
"templates/project/shared/_typography.sass"
|
38
41
|
]
|
42
|
+
s.has_rdoc = true
|
39
43
|
s.homepage = %q{http://github.com/alexcabrera/graphpaper}
|
40
44
|
s.rdoc_options = ["--charset=UTF-8"]
|
41
45
|
s.require_paths = ["lib"]
|
42
|
-
s.rubygems_version = %q{1.3.
|
46
|
+
s.rubygems_version = %q{1.3.1}
|
43
47
|
s.summary = %q{A Sass library for use with the Compass stylesheet authoring framework.}
|
44
48
|
|
45
49
|
if s.respond_to? :specification_version then
|
46
50
|
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
47
|
-
s.specification_version =
|
51
|
+
s.specification_version = 2
|
48
52
|
|
49
53
|
if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
|
50
54
|
else
|
@@ -1,6 +1,5 @@
|
|
1
1
|
stylesheet 'partials/_base.sass'
|
2
2
|
stylesheet 'partials/_config.sass'
|
3
3
|
stylesheet 'screen.sass', :media => 'screen, projection'
|
4
|
-
stylesheet 'sitemap.sass', :media => 'screen, projection'
|
5
4
|
stylesheet 'print.sass', :media => 'print'
|
6
5
|
stylesheet 'ie.sass', :media => 'screen, projection', :condition => "lt IE 8"
|
@@ -48,6 +48,10 @@
|
|
48
48
|
//
|
49
49
|
// Below, style common elements that appear across your site. Examples
|
50
50
|
// may include page headers, global navigation, or site footers.
|
51
|
+
|
52
|
+
// @import shared/typography.sass
|
53
|
+
// @import shared/header.sass
|
54
|
+
// @import shared/footer.sass
|
51
55
|
|
52
56
|
|
53
57
|
// Step 3. Layout the Rest of Your Site
|
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.6
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Alex Cabrera
|
@@ -35,16 +35,16 @@ files:
|
|
35
35
|
- stylesheets/graphpaper/modules/_grid.sass
|
36
36
|
- stylesheets/graphpaper/modules/_reset.sass
|
37
37
|
- stylesheets/graphpaper/modules/_typography.sass
|
38
|
-
- templates/project/manifest.rb
|
39
38
|
- templates/project/ie.sass
|
40
|
-
- templates/project/
|
41
|
-
- templates/project/screen.sass
|
39
|
+
- templates/project/manifest.rb
|
42
40
|
- templates/project/partials/_base.sass
|
43
41
|
- templates/project/partials/_config.sass
|
44
|
-
- templates/project/
|
42
|
+
- templates/project/print.sass
|
43
|
+
- templates/project/screen.sass
|
45
44
|
- templates/project/shared/_footer.sass
|
45
|
+
- templates/project/shared/_header.sass
|
46
46
|
- templates/project/shared/_typography.sass
|
47
|
-
has_rdoc:
|
47
|
+
has_rdoc: true
|
48
48
|
homepage: http://github.com/alexcabrera/graphpaper
|
49
49
|
post_install_message:
|
50
50
|
rdoc_options:
|
@@ -68,7 +68,7 @@ requirements: []
|
|
68
68
|
rubyforge_project:
|
69
69
|
rubygems_version: 1.2.0
|
70
70
|
signing_key:
|
71
|
-
specification_version:
|
71
|
+
specification_version: 2
|
72
72
|
summary: A Sass library for use with the Compass stylesheet authoring framework.
|
73
73
|
test_files: []
|
74
74
|
|