singularitygs 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/singularitygs.rb +10 -0
- data/stylesheets/singularity.sass +33 -0
- data/stylesheets/singularity/_column.sass +25 -0
- data/stylesheets/singularity/_compound.sass +30 -0
- data/stylesheets/singularity/_grid-test.sass +52 -0
- data/stylesheets/singularity/_grid.sass +3 -0
- data/stylesheets/singularity/_gutter.sass +4 -0
- data/stylesheets/singularity/_helpers.sass +25 -0
- data/stylesheets/singularity/_mixins.sass +57 -0
- metadata +108 -0
@@ -0,0 +1,33 @@
|
|
1
|
+
/*! SINGULARITY -- http://singularity.gs/ */
|
2
|
+
@import "modular-scale"
|
3
|
+
|
4
|
+
|
5
|
+
// Can be a number or a list of non-uniform column widths
|
6
|
+
$columns: 12 !default
|
7
|
+
|
8
|
+
// Must be % or 0
|
9
|
+
$gutter: 2% !default
|
10
|
+
|
11
|
+
// Grid padding can be any type of unit
|
12
|
+
$padding: 0 !default
|
13
|
+
|
14
|
+
// Helpers return think like list sums and column counts
|
15
|
+
@import singularity/helpers
|
16
|
+
|
17
|
+
// Compound grid calculation function
|
18
|
+
@import singularity/compound
|
19
|
+
|
20
|
+
// Column math is isolated
|
21
|
+
@import singularity/column
|
22
|
+
|
23
|
+
// Gutter math is isolated
|
24
|
+
@import singularity/gutter
|
25
|
+
|
26
|
+
// Grid math combines column and gutter math
|
27
|
+
@import singularity/grid
|
28
|
+
|
29
|
+
// Mixins to write
|
30
|
+
@import singularity/mixins
|
31
|
+
|
32
|
+
// Mixins to write
|
33
|
+
@import singularity/grid-test
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// calculate the width of individual columns
|
2
|
+
@function list-column-width($location, $columns)
|
3
|
+
// send a warning if this is used when $columns is not a list
|
4
|
+
@if type-of($columns) != list
|
5
|
+
@warn "The column-list-sum function requires the variable $columns to be a list."
|
6
|
+
@else
|
7
|
+
// divide the column from its context
|
8
|
+
@return nth(nth($columns, $location), 1) / list-sum($columns)
|
9
|
+
|
10
|
+
|
11
|
+
// Calculate the width spanning multiple columns
|
12
|
+
@function column-span($span, $location: 1, $columns: $columns)
|
13
|
+
|
14
|
+
// Equal width columns
|
15
|
+
@if type-of($columns) == number
|
16
|
+
@return $span * (100% / $columns)
|
17
|
+
|
18
|
+
// Variable width columns
|
19
|
+
@if type-of($columns) == list
|
20
|
+
// zero out initial sum
|
21
|
+
$sum: 0
|
22
|
+
// from start point to end point
|
23
|
+
@for $i from $location to ($location + $span)
|
24
|
+
$sum: $sum + list-column-width($i, $columns)
|
25
|
+
@return percentage($sum)
|
@@ -0,0 +1,30 @@
|
|
1
|
+
@function compound($c1: 1, $c2: 1, $c3: 1, $c4: 1, $c5: 1, $c6: 1)
|
2
|
+
$common-multiple: ($c1 * $c2 * $c3 * $c4 * $c5 * $c6)
|
3
|
+
$compound-grid: ()
|
4
|
+
$compound-counter: 1
|
5
|
+
@for $i from 1 through $common-multiple
|
6
|
+
$add-col: false
|
7
|
+
@if $c1 !=1
|
8
|
+
@if $i / $c1 == round($i / $c1)
|
9
|
+
$add-col: true
|
10
|
+
@if $c2 !=1
|
11
|
+
@if $i / $c2 == round($i / $c2)
|
12
|
+
$add-col: true
|
13
|
+
@if $c3 !=1
|
14
|
+
@if $i / $c3 == round($i / $c3)
|
15
|
+
$add-col: true
|
16
|
+
@if $c4 !=1
|
17
|
+
@if $i / $c4 == round($i / $c4)
|
18
|
+
$add-col: true
|
19
|
+
@if $c5 !=1
|
20
|
+
@if $i / $c5 == round($i / $c5)
|
21
|
+
$add-col: true
|
22
|
+
@if $c6 !=1
|
23
|
+
@if $i / $c6 == round($i / $c6)
|
24
|
+
$add-col: true
|
25
|
+
@if $add-col
|
26
|
+
$compound-grid: join($compound-grid, $compound-counter, comma)
|
27
|
+
$compound-counter: 1
|
28
|
+
@else
|
29
|
+
$compound-counter: $compound-counter + 1
|
30
|
+
@return $compound-grid
|
@@ -0,0 +1,52 @@
|
|
1
|
+
=test-grid($columns: $columns, $gutter: $gutter, $padding: $padding, $prefix: a, $opacity: .5)
|
2
|
+
.test-grid
|
3
|
+
position: relative
|
4
|
+
height: 100%
|
5
|
+
width: 100%
|
6
|
+
min-height: 200px
|
7
|
+
margin-bottom: -100%
|
8
|
+
$grid-counter: 1
|
9
|
+
@for $i from 1 through column-count($columns)
|
10
|
+
.test.#{$prefix}#{$i}
|
11
|
+
height: 100%
|
12
|
+
+grid-span(1, $i, $columns: $columns, $gutter: $gutter, $padding: $padding)
|
13
|
+
background-color: rgba(#6bb, $opacity / 2)
|
14
|
+
.inner
|
15
|
+
height: 100%
|
16
|
+
background-color: rgba(#6bb, $opacity / 2)
|
17
|
+
|
18
|
+
// Need this markup to test
|
19
|
+
//<div class="test-grid">
|
20
|
+
//<div class="test a1"><div class="inner"></div></div>
|
21
|
+
//<div class="test a2"><div class="inner"></div></div>
|
22
|
+
//<div class="test a3"><div class="inner"></div></div>
|
23
|
+
//<div class="test a4"><div class="inner"></div></div>
|
24
|
+
//<div class="test a5"><div class="inner"></div></div>
|
25
|
+
//<div class="test a6"><div class="inner"></div></div>
|
26
|
+
//<div class="test a7"><div class="inner"></div></div>
|
27
|
+
//<div class="test a8"><div class="inner"></div></div>
|
28
|
+
//<div class="test a9"><div class="inner"></div></div>
|
29
|
+
//<div class="test a10"><div class="inner"></div></div>
|
30
|
+
//<div class="test a11"><div class="inner"></div></div>
|
31
|
+
//<div class="test a12"><div class="inner"></div></div>
|
32
|
+
//<div class="test a13"><div class="inner"></div></div>
|
33
|
+
//<div class="test a14"><div class="inner"></div></div>
|
34
|
+
//<div class="test a15"><div class="inner"></div></div>
|
35
|
+
//<div class="test a16"><div class="inner"></div></div>
|
36
|
+
//<div class="test a17"><div class="inner"></div></div>
|
37
|
+
//<div class="test a18"><div class="inner"></div></div>
|
38
|
+
//<div class="test a19"><div class="inner"></div></div>
|
39
|
+
//<div class="test a20"><div class="inner"></div></div>
|
40
|
+
//<div class="test a21"><div class="inner"></div></div>
|
41
|
+
//<div class="test a22"><div class="inner"></div></div>
|
42
|
+
//<div class="test a23"><div class="inner"></div></div>
|
43
|
+
//<div class="test a24"><div class="inner"></div></div>
|
44
|
+
//<div class="test a25"><div class="inner"></div></div>
|
45
|
+
//<div class="test a26"><div class="inner"></div></div>
|
46
|
+
//<div class="test a27"><div class="inner"></div></div>
|
47
|
+
//<div class="test a28"><div class="inner"></div></div>
|
48
|
+
//<div class="test a29"><div class="inner"></div></div>
|
49
|
+
//<div class="test a30"><div class="inner"></div></div>
|
50
|
+
//<div class="test a31"><div class="inner"></div></div>
|
51
|
+
//<div class="test a32"><div class="inner"></div></div>
|
52
|
+
//</div>
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// Calculate the total sum of a list (context)
|
2
|
+
@function list-sum($list)
|
3
|
+
// zero out the initial sum
|
4
|
+
$sum: 0
|
5
|
+
// loop through each value in the list adding it to $list-sum
|
6
|
+
@for $i from 1 through length($list)
|
7
|
+
$sum: $sum + nth(nth($list, $i), 1)
|
8
|
+
@return nth($sum, 1)
|
9
|
+
|
10
|
+
|
11
|
+
// Find column count
|
12
|
+
@function column-count($columns)
|
13
|
+
@if type-of($columns) == number
|
14
|
+
@return $columns
|
15
|
+
@if type-of($columns) == list
|
16
|
+
@return length($columns)
|
17
|
+
|
18
|
+
|
19
|
+
// Context of gutters
|
20
|
+
@function gutter-context($gutter, $context)
|
21
|
+
@return $gutter * (100% / $context)
|
22
|
+
|
23
|
+
// box sizing in one place
|
24
|
+
%border-box
|
25
|
+
+box-sizing(border-box)
|
@@ -0,0 +1,57 @@
|
|
1
|
+
// Grid location is automatically counted unless overridden
|
2
|
+
$grid-counter: 1
|
3
|
+
|
4
|
+
=grid-span($span, $location: $grid-counter, $columns: $columns, $gutter: $gutter, $padding: $padding)
|
5
|
+
float: left
|
6
|
+
width: grid-span($span, $location, $columns, $gutter)
|
7
|
+
$box-sizing: false
|
8
|
+
|
9
|
+
// add special left padding
|
10
|
+
@if type-of($columns) == list
|
11
|
+
@if type-of(nth($columns, $location)) == list
|
12
|
+
padding-left: nth(nth($columns, $location), 2)
|
13
|
+
$box-sizing: true
|
14
|
+
@else if $padding != 0
|
15
|
+
padding-left: $padding
|
16
|
+
$box-sizing: true
|
17
|
+
// add special right padding
|
18
|
+
@if type-of(nth($columns, ($location + $span - 1))) == list
|
19
|
+
padding-right: nth(nth($columns, ($location + $span - 1)), 2)
|
20
|
+
$box-sizing: true
|
21
|
+
@else if $padding != 0
|
22
|
+
padding-right: $padding
|
23
|
+
$box-sizing: true
|
24
|
+
|
25
|
+
@else if $padding != 0
|
26
|
+
padding: 0 $padding
|
27
|
+
$box-sizing: true
|
28
|
+
|
29
|
+
@if $box-sizing
|
30
|
+
@extend %border-box
|
31
|
+
|
32
|
+
// bump up the counter
|
33
|
+
$grid-counter: $location + $span
|
34
|
+
@if $grid-counter > column-count($columns)
|
35
|
+
$grid-counter: 1
|
36
|
+
@else
|
37
|
+
margin-right: $gutter
|
38
|
+
@if $padding != 0
|
39
|
+
+grid-padding($padding)
|
40
|
+
|
41
|
+
|
42
|
+
// This writes classes, IDs, or silent objects for you to extend or use in your HTML. They can be written to different breakpoints to extend or call into your HTML as needed.
|
43
|
+
=grid-objects($prefix: a, $columns: $columns, $gutter: $gutter, $padding: $padding, $selector: "%")
|
44
|
+
// counter keeps track of the starting position
|
45
|
+
$count: 0
|
46
|
+
@for $i from 1 through column-count($columns)
|
47
|
+
@for $n from 1 through column-count($columns) - $count
|
48
|
+
#{$selector}#{$prefix}#{$n}-#{$count + 1}
|
49
|
+
+grid-span($n, $count + 1, $columns, $gutter, $padding)
|
50
|
+
$count: $count + 1
|
51
|
+
|
52
|
+
|
53
|
+
|
54
|
+
// Add padding to an object on the grid.
|
55
|
+
=grid-padding($padding)
|
56
|
+
@if $padding != 0
|
57
|
+
padding: 0 $padding
|
metadata
ADDED
@@ -0,0 +1,108 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: singularitygs
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 29
|
5
|
+
prerelease: false
|
6
|
+
segments:
|
7
|
+
- 0
|
8
|
+
- 0
|
9
|
+
- 1
|
10
|
+
version: 0.0.1
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- Scott Kellum
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2012-06-23 00:00:00 -04:00
|
19
|
+
default_executable:
|
20
|
+
dependencies:
|
21
|
+
- !ruby/object:Gem::Dependency
|
22
|
+
name: compass
|
23
|
+
prerelease: false
|
24
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ">="
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
hash: 45
|
30
|
+
segments:
|
31
|
+
- 0
|
32
|
+
- 12
|
33
|
+
- 1
|
34
|
+
version: 0.12.1
|
35
|
+
type: :runtime
|
36
|
+
version_requirements: *id001
|
37
|
+
- !ruby/object:Gem::Dependency
|
38
|
+
name: modular-scale
|
39
|
+
prerelease: false
|
40
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ">="
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
hash: 23
|
46
|
+
segments:
|
47
|
+
- 0
|
48
|
+
- 0
|
49
|
+
- 4
|
50
|
+
version: 0.0.4
|
51
|
+
type: :runtime
|
52
|
+
version_requirements: *id002
|
53
|
+
description: Advanced responsive grid system for Sass and Compass
|
54
|
+
email:
|
55
|
+
- scott@scottkellum.com
|
56
|
+
executables: []
|
57
|
+
|
58
|
+
extensions: []
|
59
|
+
|
60
|
+
extra_rdoc_files: []
|
61
|
+
|
62
|
+
files:
|
63
|
+
- lib/singularitygs.rb
|
64
|
+
- stylesheets/singularity/_column.sass
|
65
|
+
- stylesheets/singularity/_compound.sass
|
66
|
+
- stylesheets/singularity/_grid-test.sass
|
67
|
+
- stylesheets/singularity/_grid.sass
|
68
|
+
- stylesheets/singularity/_gutter.sass
|
69
|
+
- stylesheets/singularity/_helpers.sass
|
70
|
+
- stylesheets/singularity/_mixins.sass
|
71
|
+
- stylesheets/singularity.sass
|
72
|
+
has_rdoc: true
|
73
|
+
homepage: http://singularity.gs
|
74
|
+
licenses: []
|
75
|
+
|
76
|
+
post_install_message:
|
77
|
+
rdoc_options: []
|
78
|
+
|
79
|
+
require_paths:
|
80
|
+
- lib
|
81
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
82
|
+
none: false
|
83
|
+
requirements:
|
84
|
+
- - ">="
|
85
|
+
- !ruby/object:Gem::Version
|
86
|
+
hash: 3
|
87
|
+
segments:
|
88
|
+
- 0
|
89
|
+
version: "0"
|
90
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
91
|
+
none: false
|
92
|
+
requirements:
|
93
|
+
- - ">="
|
94
|
+
- !ruby/object:Gem::Version
|
95
|
+
hash: 11
|
96
|
+
segments:
|
97
|
+
- 1
|
98
|
+
- 2
|
99
|
+
version: "1.2"
|
100
|
+
requirements: []
|
101
|
+
|
102
|
+
rubyforge_project: singularitygs
|
103
|
+
rubygems_version: 1.3.7
|
104
|
+
signing_key:
|
105
|
+
specification_version: 3
|
106
|
+
summary: Singularity is a fluid grid system that can generate uniform columns as well as asymmetric and compound grids with tools to write grids as functions, mixins, or class based objects.
|
107
|
+
test_files: []
|
108
|
+
|