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 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.4
1
+ 1.0.5
@@ -1,2 +1,2 @@
1
- require File.join(File.dirname(__FILE__), 'grid-coordinates', 'compass_extension')
2
- require File.join(File.dirname(__FILE__), 'grid-coordinates', 'sass_extensions')
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
- stylesheet 'styles.sass', :media => "screen, projection"
2
- stylesheet 'partials/_base.sass'
3
- stylesheet 'partials/_grid.sass'
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
- version: 1.0.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: 2009-10-28 00:00:00 -05:00
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
- type: :runtime
18
- version_requirement:
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
- version: 0.8.16
24
- version:
25
- description: 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.
26
- email: adam@gethandcrafted.com
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
- - README.textile
40
+ extra_rdoc_files: []
41
+
33
42
  files:
34
- - README.textile
35
- - Rakefile
43
+ - README.mdown
36
44
  - VERSION
37
45
  - lib/grid-coordinates.rb
38
- - lib/grid-coordinates/compass_extension.rb
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/partials/_base.sass
43
- - templates/project/partials/_grid.sass
44
- - templates/project/styles.sass
48
+ - templates/project/screen.sass
45
49
  has_rdoc: true
46
- homepage: http://github.com/handcrafted/grid-coordinates
50
+ homepage: http://adamstacoviak.com/
47
51
  licenses: []
48
52
 
49
53
  post_install_message:
50
- rdoc_options:
51
- - --charset=UTF-8
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.4
75
+ rubygems_version: 1.3.6
70
76
  signing_key:
71
77
  specification_version: 3
72
- summary: Grid Coordinates is a Compass extension based on Tyler Tate's 1kb CSS Grid project.
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,3 +0,0 @@
1
- @import blueprint/reset.sass
2
- @import compass/utilities.sass
3
- @import grid.sass
@@ -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