sass-960gs 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +97 -0
- data/sass-960gs.gemspec +25 -0
- data/stylesheets/960/_fixed_grid.scss +94 -0
- data/stylesheets/960/_fluid_grid.scss +95 -0
- data/stylesheets/960/_grid.scss +2 -0
- data/stylesheets/960/_text.scss +47 -0
- data/stylesheets/960/_variables.scss +15 -0
- metadata +58 -0
data/README.md
ADDED
@@ -0,0 +1,97 @@
|
|
1
|
+
960 Grid System - Standalone
|
2
|
+
================================
|
3
|
+
|
4
|
+
960.gs is created by Nathan Smith. See the official site for more info: <http://960.gs/>
|
5
|
+
|
6
|
+
> This plugin is consistent with latest version of 960.gs as of 3/19/2012
|
7
|
+
|
8
|
+
Install
|
9
|
+
=======
|
10
|
+
|
11
|
+
gem install sass-960
|
12
|
+
|
13
|
+
Adding the 960 plugin to an existing project
|
14
|
+
============================================
|
15
|
+
|
16
|
+
Then make sure you have imported the grid library into your core .sass or .scss file with:
|
17
|
+
|
18
|
+
@import '960/grid';
|
19
|
+
|
20
|
+
Customizing your Grid System
|
21
|
+
============================
|
22
|
+
|
23
|
+
This plugin uses the following configuration variables:
|
24
|
+
|
25
|
+
* Global:
|
26
|
+
* `$ninesixty-columns` (default: 12) count of grid columns
|
27
|
+
* `$ninesixty-class-separator` (default: `_`) separator for generated classes
|
28
|
+
* Fixed grid:
|
29
|
+
* `$ninesixty-gutter-width` (default: 20px) default gutter width
|
30
|
+
* `$ninesixty-grid-width` (default: 960px) default width of the grid container
|
31
|
+
* Fluid grid
|
32
|
+
* `$ninesixty-fluid-gutter-margin` (default: 2%) default gutter width for fluid grid
|
33
|
+
* `$ninesixty-fluid-grid-width` (default: 92%) default width of the fluid grid container
|
34
|
+
* `$ninesixty-fluid-grid-margin` width of container margin
|
35
|
+
* `$ninesixty-fluid-grid-min-width` (default: 960px) default minimum width of container
|
36
|
+
|
37
|
+
All of the mixins included with this plugin use these configuration variables
|
38
|
+
as defaults if the corresponding argument is omitted from a mixin call.
|
39
|
+
|
40
|
+
Class-Based Grid System
|
41
|
+
=======================
|
42
|
+
|
43
|
+
To create a grid system that works like the original 960 Grid System framework
|
44
|
+
use the `@include grid-system-complete` mixin to generate the corresponding classes. You
|
45
|
+
can also customize the number of columns as demonstrated:
|
46
|
+
|
47
|
+
Example:
|
48
|
+
|
49
|
+
@include grid-system-complete(24);
|
50
|
+
|
51
|
+
If you want to scope the grid inside a specific set of selectors or control your container class' name you can use the `+grid-system` mixin instead.
|
52
|
+
|
53
|
+
Example:
|
54
|
+
|
55
|
+
#wrap {
|
56
|
+
.my_container {
|
57
|
+
@include grid-system(16); } }
|
58
|
+
|
59
|
+
This will render all of the grid system nested below your selector, replacing the normal function of the container class (would be .container_16 in this example).
|
60
|
+
|
61
|
+
Making Semantic Grids
|
62
|
+
=====================
|
63
|
+
|
64
|
+
To create a grid system using only CSS, use the following semantic grid mixins:
|
65
|
+
|
66
|
+
* Use the `@include grid-container` mixin to declare your container element.
|
67
|
+
* Use the `@include grid(N, columns, gutter-width)` mixin to declare a grid element.
|
68
|
+
* Use the `@include alpha` and `@include omega` mixins to declare the first and last grid elements for a row.
|
69
|
+
* Use the `@include grid-prefix(N, columns)` and `@include grid-suffix(N, columns)` mixins to add empty grid columns before or after a grid element.
|
70
|
+
* Use the `@include grid-push(N, columns)` and `@include grid-pull(N, columns)` mixins to move a grid element from its default position.
|
71
|
+
|
72
|
+
`N` is the number of grid columns to span as in `grid_N` or `push_N` with the original 960 Grid System framework.
|
73
|
+
|
74
|
+
Example:
|
75
|
+
|
76
|
+
$ninesixty-columns: 16
|
77
|
+
|
78
|
+
#wrap {
|
79
|
+
@include grid-container
|
80
|
+
#header {
|
81
|
+
@include grid(16); }
|
82
|
+
#middle {
|
83
|
+
@include grid(16);
|
84
|
+
#left-nav {
|
85
|
+
@include grid(5);
|
86
|
+
@include alpha; }
|
87
|
+
#main-content {
|
88
|
+
@include grid-prefix(1);
|
89
|
+
@include grid(10);
|
90
|
+
@include omega; } } }
|
91
|
+
|
92
|
+
Authors/Contributors
|
93
|
+
====================
|
94
|
+
|
95
|
+
[Chris Eppstein](http://chriseppstein.github.com/) is the creator of Compass, a core contributor to Sass and the father of this plugin.
|
96
|
+
|
97
|
+
[Nathan Smith](http://sonspring.com/) is the author of [960.gs](http://960.gs/), the grid system this plugin is based on. He's also kind enough to let us pester him with questions from time to time.
|
data/sass-960gs.gemspec
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
|
3
|
+
Gem::Specification.new do |s|
|
4
|
+
s.name = %q{sass-960gs}
|
5
|
+
s.version = "0.0.1"
|
6
|
+
|
7
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
8
|
+
s.authors = ["Chris Eppstein", "Matt Sanders", "Łukasz Niemier"]
|
9
|
+
s.date = %q{2012-03-19}
|
10
|
+
s.description = %q{The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. http://960.gs/}
|
11
|
+
s.email = %w{chris@eppsteins.net matt@modal.org lukasz@niemier.pl}
|
12
|
+
s.has_rdoc = false
|
13
|
+
s.files = %w{
|
14
|
+
README.md
|
15
|
+
sass-960gs.gemspec
|
16
|
+
stylesheets/960/_grid.scss
|
17
|
+
stylesheets/960/_fixed_grid.scss
|
18
|
+
stylesheets/960/_fluid_grid.scss
|
19
|
+
stylesheets/960/_text.scss
|
20
|
+
stylesheets/960/_variables.scss
|
21
|
+
}
|
22
|
+
s.homepage = %q{https://github.com/Hauleth/sass-960gs}
|
23
|
+
s.rubygems_version = %q{1.3.6}
|
24
|
+
s.summary = %q{Standalone SCSS port of 960.gs.}
|
25
|
+
end
|
@@ -0,0 +1,94 @@
|
|
1
|
+
@import 'variables';
|
2
|
+
|
3
|
+
@mixin grid-container {
|
4
|
+
margin-left: auto;
|
5
|
+
margin-right: auto;
|
6
|
+
width: $ninesixty-grid-width; }
|
7
|
+
|
8
|
+
@mixin grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
|
9
|
+
width: $ninesixty-grid-width / $cols * $n - $gutter-width; }
|
10
|
+
|
11
|
+
@mixin grid-unit-base($gutter-width: $ninesixty-gutter-width) {
|
12
|
+
display: inline;
|
13
|
+
float: left;
|
14
|
+
margin: {
|
15
|
+
left: $gutter-width / 2;
|
16
|
+
right: $gutter-width / 2; }; }
|
17
|
+
|
18
|
+
@mixin grid($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
|
19
|
+
@include grid-unit-base($gutter-width);
|
20
|
+
@include grid-width($n, $cols, $gutter-width); }
|
21
|
+
|
22
|
+
@mixin alpha {
|
23
|
+
margin-left: 0; }
|
24
|
+
|
25
|
+
@mixin omega {
|
26
|
+
margin-right: 0; }
|
27
|
+
|
28
|
+
@mixin grids($cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
|
29
|
+
#{enumerate(".grid", 1, $cols, $ninesixty-class-separator)} {
|
30
|
+
@include grid-unit-base($gutter-width); }
|
31
|
+
@for $n from 1 through $cols {
|
32
|
+
.grid#{$ninesixty-class-separator}#{$n} {
|
33
|
+
@include grid-width($n, $cols, $gutter-width); } } }
|
34
|
+
|
35
|
+
@mixin grid-prefix($n, $cols: $ninesixty-columns) {
|
36
|
+
padding-left: $ninesixty-grid-width / $cols * $n; }
|
37
|
+
|
38
|
+
@mixin grid-prefixes($cols: $ninesixty-columns) {
|
39
|
+
@for $n from 1 through $cols - 1 {
|
40
|
+
.prefix#{$ninesixty-class-separator}#{$n} {
|
41
|
+
@include grid-prefix($n, $cols); } } }
|
42
|
+
|
43
|
+
@mixin grid-suffix($n, $cols: $ninesixty-columns) {
|
44
|
+
padding-right: $ninesixty-grid-width / $cols * $n; }
|
45
|
+
|
46
|
+
@mixin grid-suffixes($cols: $ninesixty-columns) {
|
47
|
+
@for $n from 1 through $cols - 1 {
|
48
|
+
.suffix#{$ninesixty-class-separator}#{$n} {
|
49
|
+
@include grid-suffix($n, $cols); } } }
|
50
|
+
|
51
|
+
@mixin grid-children {
|
52
|
+
.alpha {
|
53
|
+
@include alpha; }
|
54
|
+
.omega {
|
55
|
+
@include omega; } }
|
56
|
+
|
57
|
+
@mixin grid-move-base {
|
58
|
+
position: relative; }
|
59
|
+
|
60
|
+
@mixin grid-move-push($n, $cols) {
|
61
|
+
left: $ninesixty-grid-width / $cols * $n; }
|
62
|
+
|
63
|
+
@mixin grid-move-pull($n, $cols) {
|
64
|
+
left: -($ninesixty-grid-width / $cols) * $n; }
|
65
|
+
|
66
|
+
@mixin grid-push($n, $cols: $ninesixty-columns) {
|
67
|
+
@include grid-move-base;
|
68
|
+
@include grid-move-push($n, $cols); }
|
69
|
+
|
70
|
+
@mixin grid-pull($n, $cols: $ninesixty-columns) {
|
71
|
+
@include grid-move-base;
|
72
|
+
@include grid-move-pull($n, $cols); }
|
73
|
+
|
74
|
+
@mixin grid-movements($cols: $ninesixty-columns) {
|
75
|
+
#{enumerate(".push", 1, $cols - 1, $ninesixty-class-separator)},
|
76
|
+
#{enumerate(".pull", 1, $cols - 1, $ninesixty-class-separator)} {
|
77
|
+
@include grid-move-base; }
|
78
|
+
@for $n from 1 through $cols - 1 {
|
79
|
+
.push#{$ninesixty-class-separator}#{$n} {
|
80
|
+
@include grid-move-push($n, $cols); }
|
81
|
+
.pull#{$ninesixty-class-separator}#{$n} {
|
82
|
+
@include grid-move-pull($n, $cols); } } }
|
83
|
+
|
84
|
+
@mixin grid-system($cols: $ninesixty-columns) {
|
85
|
+
@include grid-container;
|
86
|
+
@include grids($cols);
|
87
|
+
@include grid-prefixes($cols);
|
88
|
+
@include grid-suffixes($cols);
|
89
|
+
@include grid-children;
|
90
|
+
@include grid-movements($cols); }
|
91
|
+
|
92
|
+
@mixin grid-system-complete($cols: $ninesixty-columns) {
|
93
|
+
.container#{$ninesixty-class-separator}#{$cols} {
|
94
|
+
@include grid-system($cols); } }
|
@@ -0,0 +1,95 @@
|
|
1
|
+
@import 'variables';
|
2
|
+
|
3
|
+
@mixin fluid-grid-container {
|
4
|
+
margin-left: $ninesixty-fluid-grid-margin;
|
5
|
+
margin-right: $ninesixty-fluid-grid-margin;
|
6
|
+
width: $ninesixty-fluid-grid-width;
|
7
|
+
min-width: $ninesixty-fluid-grid-min-width; }
|
8
|
+
|
9
|
+
@mixin fluid-grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-fluid-gutter-width) {
|
10
|
+
width: 100% / $cols * $n - $gutter-width; }
|
11
|
+
|
12
|
+
@mixin fluid-grid-unit-base($gutter-width: $ninesixty-fluid-gutter-width) {
|
13
|
+
display: inline;
|
14
|
+
float: left;
|
15
|
+
margin: {
|
16
|
+
left: $gutter-width / 2;
|
17
|
+
right: $gutter-width / 2; }; }
|
18
|
+
|
19
|
+
@mixin fluid-grid($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-fluid-gutter-width) {
|
20
|
+
@include fluid-grid-unit-base($gutter-width);
|
21
|
+
@include fluid-grid-width($n, $cols, $gutter-width); }
|
22
|
+
|
23
|
+
@mixin alpha {
|
24
|
+
margin-left: 0; }
|
25
|
+
|
26
|
+
@mixin omega {
|
27
|
+
margin-right: 0; }
|
28
|
+
|
29
|
+
@mixin fluid-grids($cols: $ninesixty-columns, $gutter-width: $ninesixty-fluid-gutter-width) {
|
30
|
+
#{enumerate(".fluid_grid", 1, $cols, $ninesixty-class-separator)} {
|
31
|
+
@include fluid-grid-unit-base($gutter-width); }
|
32
|
+
@for $n from 1 through $cols {
|
33
|
+
.fluid-grid#{$ninesixty-class-separator}#{$n} {
|
34
|
+
@include fluid-grid-width($n, $cols, $gutter-width); } } }
|
35
|
+
|
36
|
+
@mixin fluid-grid-prefix($n, $cols: $ninesixty-columns) {
|
37
|
+
padding-left: $ninesixty-fluid-grid-width / $cols * $n; }
|
38
|
+
|
39
|
+
@mixin fluid-grid-prefixes($cols: $ninesixty-columns) {
|
40
|
+
@for $n from 1 through $cols - 1 {
|
41
|
+
.prefix#{$ninesixty-class-separator}#{$n} {
|
42
|
+
@include fluid-grid-prefix($n, $cols); } } }
|
43
|
+
|
44
|
+
@mixin fluid-grid-suffix($n, $cols: $ninesixty-columns) {
|
45
|
+
padding-right: $ninesixty-fluid-grid-width / $cols * $n; }
|
46
|
+
|
47
|
+
@mixin fluid-grid-suffixes($cols: $ninesixty-columns) {
|
48
|
+
@for $n from 1 through $cols - 1 {
|
49
|
+
.suffix#{$ninesixty-class-separator}#{$n} {
|
50
|
+
@include fluid-grid-suffix($n, $cols); } } }
|
51
|
+
|
52
|
+
@mixin fluid-grid-children {
|
53
|
+
.alpha {
|
54
|
+
@include alpha; }
|
55
|
+
.omega {
|
56
|
+
@include omega; } }
|
57
|
+
|
58
|
+
@mixin fluid-grid-move-base {
|
59
|
+
position: relative; }
|
60
|
+
|
61
|
+
@mixin fluid-grid-move-push($n, $cols) {
|
62
|
+
left: $ninesixty-fluid-grid-width / $cols * $n; }
|
63
|
+
|
64
|
+
@mixin fluid-grid-move-pull($n, $cols) {
|
65
|
+
left: -($ninesixty-fluid-grid-width / $cols) * $n; }
|
66
|
+
|
67
|
+
@mixin fluid-grid-push($n, $cols: $ninesixty-columns) {
|
68
|
+
@include fluid-grid-move-base;
|
69
|
+
@include fluid-grid-move-push($n, $cols); }
|
70
|
+
|
71
|
+
@mixin fluid-grid-pull($n, $cols: $ninesixty-columns) {
|
72
|
+
@include fluid-grid-move-base;
|
73
|
+
@include fluid-grid-move-pull($n, $cols); }
|
74
|
+
|
75
|
+
@mixin fluid-grid-movements($cols: $ninesixty-columns) {
|
76
|
+
#{enumerate(".push", 1, $cols - 1, $ninesixty-class-separator)},
|
77
|
+
#{enumerate(".pull", 1, $cols - 1, $ninesixty-class-separator)} {
|
78
|
+
@include fluid-grid-move-base; }
|
79
|
+
@for $n from 1 through $cols - 1 {
|
80
|
+
.push#{$ninesixty-class-separator}#{$n} {
|
81
|
+
@include fluid-grid-move-push($n, $cols); }
|
82
|
+
.pull#{$ninesixty-class-separator}#{$n} {
|
83
|
+
@include fluid-grid-move-pull($n, $cols); } } }
|
84
|
+
|
85
|
+
@mixin fluid-grid-system($cols: $ninesixty-columns) {
|
86
|
+
@include fluid-grid-container;
|
87
|
+
@include fluid-grids($cols);
|
88
|
+
@include fluid-grid-prefixes($cols);
|
89
|
+
@include fluid-grid-suffixes($cols);
|
90
|
+
@include fluid-grid-children;
|
91
|
+
@include fluid-grid-movements($cols); }
|
92
|
+
|
93
|
+
@mixin fluid-grid-system-complete($cols: $ninesixty-columns) {
|
94
|
+
.fluid_container#{$ninesixty-class-separator}#{$cols} {
|
95
|
+
@include fluid-grid-system($cols); } }
|
@@ -0,0 +1,47 @@
|
|
1
|
+
@include 'variables';
|
2
|
+
|
3
|
+
@mixin text($font-family: $ninesixty-font-family, $font-size: $ninesixty-font-size) {
|
4
|
+
body {
|
5
|
+
font: $font-size $font-family; }
|
6
|
+
a:focus {
|
7
|
+
outline: 1px dotted invert; }
|
8
|
+
hr {
|
9
|
+
border-color: #cccccc;
|
10
|
+
border-style: solid;
|
11
|
+
border-width: 1px 0 0;
|
12
|
+
clear: both;
|
13
|
+
height: 0; }
|
14
|
+
h1 {
|
15
|
+
font-size: 1.667px; }
|
16
|
+
h2 {
|
17
|
+
font-size: 1.533px; }
|
18
|
+
h3 {
|
19
|
+
font-size: 1.4em; }
|
20
|
+
h4 {
|
21
|
+
font-size: 1.267em; }
|
22
|
+
h5 {
|
23
|
+
font-size: 1.133em; }
|
24
|
+
h6 {
|
25
|
+
font-size: 1em; }
|
26
|
+
ol {
|
27
|
+
list-style: decimal; }
|
28
|
+
ul {
|
29
|
+
list-style: square; }
|
30
|
+
li {
|
31
|
+
margin-left: 30px; }
|
32
|
+
p,
|
33
|
+
dl,
|
34
|
+
hr,
|
35
|
+
h1,
|
36
|
+
h2,
|
37
|
+
h3,
|
38
|
+
h4,
|
39
|
+
h5,
|
40
|
+
h6,
|
41
|
+
ol,
|
42
|
+
ul,
|
43
|
+
pre,
|
44
|
+
table,
|
45
|
+
address,
|
46
|
+
fieldset {
|
47
|
+
margin-bottom: 20px; } }
|
@@ -0,0 +1,15 @@
|
|
1
|
+
// Global use variables
|
2
|
+
$ninesixty-class-separator: "_" !default;
|
3
|
+
$ninesixty-columns: 12 !default;
|
4
|
+
$ninesixty-font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif !default;
|
5
|
+
$ninesixty-font-size: 10pt/1.5 !default;
|
6
|
+
|
7
|
+
// Fixed grid variables
|
8
|
+
$ninesixty-grid-width: 960px !default;
|
9
|
+
$ninesixty-gutter-width: 20px !default;
|
10
|
+
|
11
|
+
// Fluid grid variables
|
12
|
+
$ninesixty-fluid-grid-margin: (100% - $ninesixty-fluid-grid-width)/2 !default;
|
13
|
+
$ninesixty-fluid-grid-min-width: 960px !default;
|
14
|
+
$ninesixty-fluid-grid-width: 92% !default;
|
15
|
+
$ninesixty-fluid-gutter-margin: 2% !default;
|
metadata
ADDED
@@ -0,0 +1,58 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: sass-960gs
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Chris Eppstein
|
9
|
+
- Matt Sanders
|
10
|
+
- Łukasz Niemier
|
11
|
+
autorequire:
|
12
|
+
bindir: bin
|
13
|
+
cert_chain: []
|
14
|
+
date: 2012-03-19 00:00:00.000000000Z
|
15
|
+
dependencies: []
|
16
|
+
description: The 960 Grid System is an effort to streamline web development workflow
|
17
|
+
by providing commonly used dimensions, based on a width of 960 pixels. http://960.gs/
|
18
|
+
email:
|
19
|
+
- chris@eppsteins.net
|
20
|
+
- matt@modal.org
|
21
|
+
- lukasz@niemier.pl
|
22
|
+
executables: []
|
23
|
+
extensions: []
|
24
|
+
extra_rdoc_files: []
|
25
|
+
files:
|
26
|
+
- README.md
|
27
|
+
- sass-960gs.gemspec
|
28
|
+
- stylesheets/960/_grid.scss
|
29
|
+
- stylesheets/960/_fixed_grid.scss
|
30
|
+
- stylesheets/960/_fluid_grid.scss
|
31
|
+
- stylesheets/960/_text.scss
|
32
|
+
- stylesheets/960/_variables.scss
|
33
|
+
homepage: https://github.com/Hauleth/sass-960gs
|
34
|
+
licenses: []
|
35
|
+
post_install_message:
|
36
|
+
rdoc_options: []
|
37
|
+
require_paths:
|
38
|
+
- lib
|
39
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
40
|
+
none: false
|
41
|
+
requirements:
|
42
|
+
- - ! '>='
|
43
|
+
- !ruby/object:Gem::Version
|
44
|
+
version: '0'
|
45
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
46
|
+
none: false
|
47
|
+
requirements:
|
48
|
+
- - ! '>='
|
49
|
+
- !ruby/object:Gem::Version
|
50
|
+
version: 1.3.5
|
51
|
+
requirements: []
|
52
|
+
rubyforge_project:
|
53
|
+
rubygems_version: 1.8.18
|
54
|
+
signing_key:
|
55
|
+
specification_version: 3
|
56
|
+
summary: Standalone SCSS port of 960.gs.
|
57
|
+
test_files: []
|
58
|
+
has_rdoc: false
|