grid-coordinates 1.0.4 → 1.0.5
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mdown +50 -0
- data/VERSION +1 -1
- data/lib/grid-coordinates.rb +2 -2
- data/stylesheets/_grid-coordinates.scss +67 -0
- data/templates/project/manifest.rb +3 -3
- data/templates/project/screen.sass +23 -0
- metadata +32 -26
- data/README.textile +0 -66
- data/Rakefile +0 -28
- data/lib/grid-coordinates/compass_extension.rb +0 -7
- data/lib/grid-coordinates/sass_extensions.rb +0 -1
- data/sass/grid-coordinates/grid.sass +0 -59
- data/templates/project/partials/_base.sass +0 -3
- data/templates/project/partials/_grid.sass +0 -25
- data/templates/project/styles.sass +0 -1
data/README.mdown
ADDED
@@ -0,0 +1,50 @@
|
|
1
|
+
# Grid Coordinates - Sass CSS Grid Framework Generator (Compass Extension)
|
2
|
+
|
3
|
+
Grid Coordinates is a [Sass](http://sass-lang.com/) mixin inspired by Tyler Tate's [1kb CSS Grid](http://1kbgrid.com/) project.
|
4
|
+
|
5
|
+
Grid Coordinates is pretty simple, yet very complex. It sets up the styles for your CSS grid framework and supports nested grids as well. It's also able to generate the CSS styles for a grid of any dimension - you control the coordinates and it generates the styles.
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
You will need to install this to your specified Compass extensions directory. See the Compass documentation on extensions for more details: [http://compass-style.org/docs/tutorials/extensions/](http://compass-style.org/docs/tutorials/extensions/)
|
10
|
+
|
11
|
+
## Usage
|
12
|
+
|
13
|
+
The default grid dimensions are set to create a 960px wide grid with 12 columns at 60px each with a 20px gutter.
|
14
|
+
|
15
|
+
See `templates/project/screen.sass` for an example.
|
16
|
+
|
17
|
+
Start your project by adding grid-coordinates to your `extensions` directory in your sass folder.
|
18
|
+
|
19
|
+
### Configure as needed and import
|
20
|
+
|
21
|
+
// Configure grid coordinates
|
22
|
+
$grid-columns: 12
|
23
|
+
$grid-pixels: 60px
|
24
|
+
$grid-gutter-width: 20px
|
25
|
+
|
26
|
+
@import extensions/grid-coordinates
|
27
|
+
|
28
|
+
### Available mixins
|
29
|
+
|
30
|
+
`grid-container`
|
31
|
+
|
32
|
+
`nested-grid-container`
|
33
|
+
|
34
|
+
`grid($grid-columns)`
|
35
|
+
|
36
|
+
`grid-prefix($grid-columns)`
|
37
|
+
|
38
|
+
`grid-suffix($grid-columns)`
|
39
|
+
|
40
|
+
`grid-full`
|
41
|
+
|
42
|
+
## License
|
43
|
+
|
44
|
+
Copyright (c) 2009 Adam Stacoviak
|
45
|
+
|
46
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
47
|
+
|
48
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
49
|
+
|
50
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
1.0.
|
1
|
+
1.0.5
|
data/lib/grid-coordinates.rb
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
# path from the library file to where you're keeping your compass stuff.
|
2
|
+
Compass::Frameworks.register("css-lightbox", :path => "#{File.dirname(__FILE__)}/..")
|
@@ -0,0 +1,67 @@
|
|
1
|
+
// --------------------------------------------------------------------------------
|
2
|
+
// Grid Coordinates was inspired by Tyler Tate's 1kb CSS Grid project (1kbgrid.com)
|
3
|
+
// --------------------------------------------------------------------------------
|
4
|
+
// The default grid is 960px wide, 12 columns at 60px each with a 20px gutter.
|
5
|
+
//
|
6
|
+
// Set the 3 variables below to define your grid coordinates.
|
7
|
+
// Use 1kbgrid.com as a guide to the various grid coordinates possible.
|
8
|
+
|
9
|
+
@import "compass/utilities";
|
10
|
+
|
11
|
+
// How many grid columns would you like?
|
12
|
+
$grid-columns: 12 !default;
|
13
|
+
|
14
|
+
// How many pixels wide would you like each column to be?
|
15
|
+
$grid-pixels: 60px !default;
|
16
|
+
|
17
|
+
// How many pixels wide would you like the gutter to be?
|
18
|
+
$grid-gutter-width: 20px !default;
|
19
|
+
|
20
|
+
// Set grid width
|
21
|
+
$grid-width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width;
|
22
|
+
|
23
|
+
@mixin grid($grid-columns) {
|
24
|
+
@include column;
|
25
|
+
@include grid-width($grid-columns); }
|
26
|
+
|
27
|
+
// Used internatlly to the extension only
|
28
|
+
@mixin column {
|
29
|
+
@include float-left;
|
30
|
+
margin: 0 $grid-gutter-width / 2;
|
31
|
+
overflow: hidden; }
|
32
|
+
|
33
|
+
// Used internatlly to the extension only
|
34
|
+
@mixin grid-width($grid-columns) {
|
35
|
+
@if $grid-columns == 1 {
|
36
|
+
width: $grid-pixels; }
|
37
|
+
@else {
|
38
|
+
width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width - $grid-gutter-width; } }
|
39
|
+
|
40
|
+
// Mixins used to create, define and manipulate the grid
|
41
|
+
@mixin grid-container {
|
42
|
+
margin: 0 auto;
|
43
|
+
overflow: hidden;
|
44
|
+
width: $grid-width; }
|
45
|
+
|
46
|
+
@mixin nested-grid-container {
|
47
|
+
display: inline-block;
|
48
|
+
margin: {
|
49
|
+
left: -$grid-gutter-width / 2;
|
50
|
+
right: -$grid-gutter-width / 2; };
|
51
|
+
overflow: hidden;
|
52
|
+
width: auto; }
|
53
|
+
|
54
|
+
@mixin grid-prefix($grid-columns) {
|
55
|
+
@if $grid-columns == 1 {
|
56
|
+
padding-left: $grid-pixels + $grid-gutter-width; }
|
57
|
+
@else {
|
58
|
+
padding-left: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width; } }
|
59
|
+
|
60
|
+
@mixin grid-suffix($grid-columns) {
|
61
|
+
@if $grid-columns == 1 {
|
62
|
+
padding-right: $grid-pixels + $grid-gutter-width; }
|
63
|
+
@else {
|
64
|
+
padding-right: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width; } }
|
65
|
+
|
66
|
+
@mixin grid-full {
|
67
|
+
@include grid($grid-columns); }
|
@@ -1,3 +1,3 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
description "Grid Coordinates"
|
2
|
+
|
3
|
+
discover :all
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// Configure grid coordinates
|
2
|
+
$grid-columns: 12
|
3
|
+
$grid-pixels: 60px
|
4
|
+
$grid-gutter-width: 20px
|
5
|
+
|
6
|
+
@import path/to/grid-coordinates
|
7
|
+
|
8
|
+
#header, #page, #footer
|
9
|
+
@include grid-container
|
10
|
+
|
11
|
+
#header
|
12
|
+
@include grid(4)
|
13
|
+
|
14
|
+
#nav
|
15
|
+
@include grid(8)
|
16
|
+
|
17
|
+
#page-body
|
18
|
+
@include grid(8)
|
19
|
+
&.wide
|
20
|
+
@include grid(12)
|
21
|
+
|
22
|
+
#page-sidebar
|
23
|
+
@include grid(4)
|
metadata
CHANGED
@@ -1,7 +1,12 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: grid-coordinates
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
|
4
|
+
prerelease: false
|
5
|
+
segments:
|
6
|
+
- 1
|
7
|
+
- 0
|
8
|
+
- 5
|
9
|
+
version: 1.0.5
|
5
10
|
platform: ruby
|
6
11
|
authors:
|
7
12
|
- Adam Stacoviak
|
@@ -9,66 +14,67 @@ autorequire:
|
|
9
14
|
bindir: bin
|
10
15
|
cert_chain: []
|
11
16
|
|
12
|
-
date:
|
17
|
+
date: 2010-08-30 00:00:00 -05:00
|
13
18
|
default_executable:
|
14
19
|
dependencies:
|
15
20
|
- !ruby/object:Gem::Dependency
|
16
21
|
name: compass
|
17
|
-
|
18
|
-
|
19
|
-
version_requirements: !ruby/object:Gem::Requirement
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
20
24
|
requirements:
|
21
25
|
- - ">="
|
22
26
|
- !ruby/object:Gem::Version
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
+
segments:
|
28
|
+
- 0
|
29
|
+
- 10
|
30
|
+
- 4
|
31
|
+
version: 0.10.4
|
32
|
+
type: :runtime
|
33
|
+
version_requirements: *id001
|
34
|
+
description: A Sass CSS Grid Framework Generator (Compass Extension) inspired by the 1kb CSS Grid project
|
35
|
+
email: adam@adamstacoviak.com
|
27
36
|
executables: []
|
28
37
|
|
29
38
|
extensions: []
|
30
39
|
|
31
|
-
extra_rdoc_files:
|
32
|
-
|
40
|
+
extra_rdoc_files: []
|
41
|
+
|
33
42
|
files:
|
34
|
-
- README.
|
35
|
-
- Rakefile
|
43
|
+
- README.mdown
|
36
44
|
- VERSION
|
37
45
|
- lib/grid-coordinates.rb
|
38
|
-
-
|
39
|
-
- lib/grid-coordinates/sass_extensions.rb
|
40
|
-
- sass/grid-coordinates/grid.sass
|
46
|
+
- stylesheets/_grid-coordinates.scss
|
41
47
|
- templates/project/manifest.rb
|
42
|
-
- templates/project/
|
43
|
-
- templates/project/partials/_grid.sass
|
44
|
-
- templates/project/styles.sass
|
48
|
+
- templates/project/screen.sass
|
45
49
|
has_rdoc: true
|
46
|
-
homepage: http://
|
50
|
+
homepage: http://adamstacoviak.com/
|
47
51
|
licenses: []
|
48
52
|
|
49
53
|
post_install_message:
|
50
|
-
rdoc_options:
|
51
|
-
|
54
|
+
rdoc_options: []
|
55
|
+
|
52
56
|
require_paths:
|
53
57
|
- lib
|
54
58
|
required_ruby_version: !ruby/object:Gem::Requirement
|
55
59
|
requirements:
|
56
60
|
- - ">="
|
57
61
|
- !ruby/object:Gem::Version
|
62
|
+
segments:
|
63
|
+
- 0
|
58
64
|
version: "0"
|
59
|
-
version:
|
60
65
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
61
66
|
requirements:
|
62
67
|
- - ">="
|
63
68
|
- !ruby/object:Gem::Version
|
69
|
+
segments:
|
70
|
+
- 0
|
64
71
|
version: "0"
|
65
|
-
version:
|
66
72
|
requirements: []
|
67
73
|
|
68
74
|
rubyforge_project:
|
69
|
-
rubygems_version: 1.3.
|
75
|
+
rubygems_version: 1.3.6
|
70
76
|
signing_key:
|
71
77
|
specification_version: 3
|
72
|
-
summary:
|
78
|
+
summary: A Sass CSS Grid Framework Generator
|
73
79
|
test_files: []
|
74
80
|
|
data/README.textile
DELETED
@@ -1,66 +0,0 @@
|
|
1
|
-
h1. Grid Coordinates - Compass Extension
|
2
|
-
|
3
|
-
Grid Coordinates is a Compass extension. It's simple. It's just a grid that supports nested grids and is also able to generate the CSS for a multitude of grid coordinates.
|
4
|
-
|
5
|
-
The default grid setup is 960px wide, 12 columns at 60px each with a 20px gutter. Feel free to mix it up with something like -- 960 / 16 / 40 / 20, or 800 / 10 / 60 / 20.
|
6
|
-
|
7
|
-
Just update the 4 variables to change the coordinates of your grid. Use 1kbgrid.com as a guide to the grid's coordinate options.
|
8
|
-
|
9
|
-
Grid Coordinates is a "Compass":http://compass-style.org/ extension based on Tyler Tate's 1kb CSS Grid project.
|
10
|
-
|
11
|
-
h2. Installation
|
12
|
-
|
13
|
-
First let's make sure we have both GitHub and Gemcutter set as sources for Gems. You can check your current sources by entering @gem sources@ in your command prompt.
|
14
|
-
|
15
|
-
bc. sudo gem sources -a http://gems.github.com/
|
16
|
-
sudo gem sources -a http://gemcutter.org/
|
17
|
-
|
18
|
-
Next, let's install Grid Coordinates and Compass
|
19
|
-
|
20
|
-
bc. sudo gem install grid-coordinates
|
21
|
-
|
22
|
-
Compass should get installed with Grid Coordinates because it's set as a dependency. If for some reason it didn't, you will need to manually install it.
|
23
|
-
|
24
|
-
bc. gem install chriseppstein-compass
|
25
|
-
|
26
|
-
h2. Create a Grid Coordinates-based Compass Project
|
27
|
-
|
28
|
-
bc. rails myapp
|
29
|
-
cd myapp
|
30
|
-
compass --rails -r grid-coordinates -f grid-coordinates .
|
31
|
-
|
32
|
-
You'll be asked the default Compass setup questions such as where to place your Sass and Compiled CSS.
|
33
|
-
|
34
|
-
Once that is finished, you'll want to take a peek at @partials/_grid.sass@.
|
35
|
-
|
36
|
-
By default @compass/utilities.sass@ and @blueprint/reset.sass@ are being imported into your new @partials/_base.sass@ file.
|
37
|
-
|
38
|
-
Your setup may differ. And that's ok.
|
39
|
-
|
40
|
-
h2. Customizing your Grid System
|
41
|
-
|
42
|
-
[[Customize your grid]]
|
43
|
-
|
44
|
-
h2. Making Semantic Grids
|
45
|
-
|
46
|
-
[[Building a semantic grid]]
|
47
|
-
|
48
|
-
h2. Note on patches and pull requests
|
49
|
-
|
50
|
-
* Fork the project!
|
51
|
-
* Have fun...add new features, hack, hack, bug fix, etc.
|
52
|
-
* Comment your code using the existing comment syntax in the plugin
|
53
|
-
* Commit, DO NOT mess with rakefile, version, or history.
|
54
|
-
(if you want to have your own version, that is fine but
|
55
|
-
bump version in a commit by itself I can ignore when I pull)
|
56
|
-
* Send me a pull request. Bonus points for topic branches.
|
57
|
-
|
58
|
-
h2. License
|
59
|
-
|
60
|
-
Copyright (c) 2009 Adam Stacoviak
|
61
|
-
|
62
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
63
|
-
|
64
|
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
65
|
-
|
66
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/Rakefile
DELETED
@@ -1,28 +0,0 @@
|
|
1
|
-
require 'rubygems'
|
2
|
-
require 'rake'
|
3
|
-
require 'sass'
|
4
|
-
require 'lib/grid-coordinates/sass_extensions'
|
5
|
-
|
6
|
-
begin
|
7
|
-
require 'jeweler'
|
8
|
-
Jeweler::Tasks.new do |gem|
|
9
|
-
gem.name = "grid-coordinates"
|
10
|
-
gem.summary = %Q{Grid Coordinates is a Compass extension based on Tyler Tate's 1kb CSS Grid project.}
|
11
|
-
gem.description = %Q{Grid Coordinates is a Compass extension. It's simple. It's just a grid that supports nested grids and is also able to generate the CSS for a multitude of grid coordinates.}
|
12
|
-
gem.email = "adam@gethandcrafted.com"
|
13
|
-
gem.homepage = "http://github.com/handcrafted/grid-coordinates"
|
14
|
-
gem.authors = ["Adam Stacoviak"]
|
15
|
-
gem.has_rdoc = false
|
16
|
-
gem.add_dependency('compass', '>= 0.8.16')
|
17
|
-
gem.files = []
|
18
|
-
gem.files << "README.textile"
|
19
|
-
gem.files << "VERSION"
|
20
|
-
gem.files << "Rakefile"
|
21
|
-
gem.files += Dir.glob("lib/**/*")
|
22
|
-
gem.files += Dir.glob("sass/**/*")
|
23
|
-
gem.files += Dir.glob("spec/**/*")
|
24
|
-
gem.files += Dir.glob("templates/**/*.*")
|
25
|
-
end
|
26
|
-
rescue LoadError
|
27
|
-
puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
|
28
|
-
end
|
@@ -1,7 +0,0 @@
|
|
1
|
-
if defined?(Compass)
|
2
|
-
options = Hash.new
|
3
|
-
options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'sass'))
|
4
|
-
options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'templates'))
|
5
|
-
|
6
|
-
Compass::Frameworks.register('grid-coordinates', options)
|
7
|
-
end
|
@@ -1 +0,0 @@
|
|
1
|
-
require 'sass'
|
@@ -1,59 +0,0 @@
|
|
1
|
-
// --------------------------------------------------------------------------------
|
2
|
-
// Grid Coordinates was inspired by Tyler Tate's 1kb CSS Grid project (1kbgrid.com)
|
3
|
-
// --------------------------------------------------------------------------------
|
4
|
-
// The default grid is 960px wide, 12 columns at 60px each with a 20px gutter.
|
5
|
-
//
|
6
|
-
// Set the 3 variables below to define your grid coordinates.
|
7
|
-
// Use 1kbgrid.com as a guide to the various grid coordinates possible.
|
8
|
-
|
9
|
-
@import compass/utilities
|
10
|
-
|
11
|
-
// How many grid columns would you like?
|
12
|
-
!grid_columns ||= 12
|
13
|
-
// How many pixels wide would you like each column to be?
|
14
|
-
!grid_pixels ||= 60px
|
15
|
-
// How many pixels wide would you like the gutter to be?
|
16
|
-
!grid_gutter_width ||= 20px
|
17
|
-
|
18
|
-
// Set grid width
|
19
|
-
!grid_width = (!grid_columns * !grid_pixels) + (!grid_columns * !grid_gutter_width)
|
20
|
-
|
21
|
-
=grid(!grid_columns)
|
22
|
-
+column
|
23
|
-
@if !grid_columns == 1
|
24
|
-
width = !grid_pixels
|
25
|
-
@else
|
26
|
-
width = (!grid_columns * !grid_pixels) + (!grid_columns * !grid_gutter_width - !grid_gutter_width)
|
27
|
-
|
28
|
-
=column
|
29
|
-
+float-left
|
30
|
-
margin = 0 !grid_gutter_width / 2
|
31
|
-
overflow: hidden
|
32
|
-
|
33
|
-
=grid-container
|
34
|
-
margin: 0 auto
|
35
|
-
overflow: hidden
|
36
|
-
width = !grid_width
|
37
|
-
|
38
|
-
=nested-grid-container
|
39
|
-
display: inline-block
|
40
|
-
margin:
|
41
|
-
left = -!grid_gutter_width / 2
|
42
|
-
right = -!grid_gutter_width / 2
|
43
|
-
overflow: hidden
|
44
|
-
width: auto
|
45
|
-
|
46
|
-
=grid-prefix(!grid_columns)
|
47
|
-
@if !grid_columns == 1
|
48
|
-
padding-left = !grid_pixels + !grid_gutter_width
|
49
|
-
@else
|
50
|
-
padding-left = (!grid_columns * !grid_pixels) + (!grid_columns * !grid_gutter_width)
|
51
|
-
|
52
|
-
=grid-suffix(!grid_columns)
|
53
|
-
@if !grid_columns == 1
|
54
|
-
padding-right = !grid_pixels + !grid_gutter_width
|
55
|
-
@else
|
56
|
-
padding-right = (!grid_columns * !grid_pixels) + (!grid_columns * !grid_gutter_width)
|
57
|
-
|
58
|
-
=grid-full
|
59
|
-
+grid(!grid_columns)
|
@@ -1,25 +0,0 @@
|
|
1
|
-
// The following locks in our grid coordinates
|
2
|
-
|
3
|
-
!grid_columns ||= 12
|
4
|
-
!grid_pixels ||= 60px
|
5
|
-
!grid_gutter_width ||= 20px
|
6
|
-
|
7
|
-
@import grid-coordinates/grid
|
8
|
-
|
9
|
-
// Like most Compass users, I build my layouts with semantic markup and selectors
|
10
|
-
//
|
11
|
-
// #branding, #page, #footer
|
12
|
-
// +grid-container
|
13
|
-
//
|
14
|
-
// #branding
|
15
|
-
// +grid(4)
|
16
|
-
// #nav_main
|
17
|
-
// +grid(8)
|
18
|
-
//
|
19
|
-
// #page_body
|
20
|
-
// +grid(8)
|
21
|
-
// &.wide
|
22
|
-
// +grid(12)
|
23
|
-
//
|
24
|
-
// #page_sidebar
|
25
|
-
// +grid(4)
|
@@ -1 +0,0 @@
|
|
1
|
-
@import partials/base.sass
|