alexcabrera-graphpaper 0.2.5 → 0.2.6
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|