gridstrap 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +63 -0
- data/lib/gridstrap.rb +9 -0
- data/stylesheets/_gridstrap.scss +6 -0
- data/stylesheets/inc/_build.scss +51 -0
- data/stylesheets/inc/_mixins.scss +180 -0
- data/stylesheets/inc/_vars.scss +11 -0
- data/stylesheets/inc/build/_down.scss +36 -0
- data/stylesheets/inc/build/_exact.scss +39 -0
- data/stylesheets/inc/build/_none.scss +5 -0
- data/stylesheets/inc/build/_up.scss +32 -0
- metadata +70 -0
data/README.md
ADDED
@@ -0,0 +1,63 @@
|
|
1
|
+
Compass Gridstrap
|
2
|
+
=================
|
3
|
+
|
4
|
+
Gridstrap is a Bootstrap inspired grid system, for both responsive and
|
5
|
+
non-responsive designs.
|
6
|
+
|
7
|
+
|
8
|
+
Installation
|
9
|
+
============
|
10
|
+
|
11
|
+
From the command line:
|
12
|
+
|
13
|
+
(sudo) gem install gridstrap
|
14
|
+
|
15
|
+
Add to a project:
|
16
|
+
|
17
|
+
// rails: compass.config, other: config.rb
|
18
|
+
require "gridstrap"
|
19
|
+
|
20
|
+
// command line
|
21
|
+
compass install gridstrap
|
22
|
+
|
23
|
+
Or create a new project:
|
24
|
+
|
25
|
+
compass -r gridstrap -f gridstrap project_directory
|
26
|
+
|
27
|
+
|
28
|
+
Setup/Usage
|
29
|
+
===========
|
30
|
+
|
31
|
+
The grid is setup via the `gridstrap` mixin:
|
32
|
+
|
33
|
+
@include gridstrap();
|
34
|
+
|
35
|
+
You can use the responsive version by specifying a responsive mode:
|
36
|
+
|
37
|
+
@include gridstrap(up);
|
38
|
+
|
39
|
+
This implements the mobile-first version of the grid. The different
|
40
|
+
modes are listed below:
|
41
|
+
|
42
|
+
* `"up"`: Mobile first, with the "plain" columns being overridden going up
|
43
|
+
through tablet, desktop and widescreen.
|
44
|
+
* `"down"`: Desktop first, with the "plain" columns being overridden going
|
45
|
+
up for widescreen, and down for tablet/mobile.
|
46
|
+
* `"exact"`: Isolated, the column rules don"t bubble up, and are localized
|
47
|
+
to their respective breakpoints.
|
48
|
+
* `"none"`: No responsive, just a simple grid. You will have to specify the
|
49
|
+
size for the .container when using this.
|
50
|
+
|
51
|
+
Gridstrap comes with a few additional classes:
|
52
|
+
|
53
|
+
* `.span-`: A centered column of a particular column size.
|
54
|
+
* `.of-`: A centered column of 1/Xth the container width.
|
55
|
+
* `.offset-`: Offset the column by X columns via margin.
|
56
|
+
* `.push/pull-`: Move the column over by X columns via left/right.
|
57
|
+
|
58
|
+
You can toggle these options by setting the $gridstrap-use-? booleans, or
|
59
|
+
with the `gridstrap-use` mixin:
|
60
|
+
|
61
|
+
@include gridstrap-use(span, offset);
|
62
|
+
|
63
|
+
Pass a list containing the addons you want to use: span/of/offset/move.
|
data/lib/gridstrap.rb
ADDED
@@ -0,0 +1,51 @@
|
|
1
|
+
// Load the mixins for each mode
|
2
|
+
@import "build/none";
|
3
|
+
@import "build/up";
|
4
|
+
@import "build/down";
|
5
|
+
@import "build/exact";
|
6
|
+
|
7
|
+
// The Main Mixin, sets up and builds the grid system
|
8
|
+
//
|
9
|
+
// The $responsive mode can be "up", "down", "exact" or "off"
|
10
|
+
// "none": No breakpoints added for columns; plain columns
|
11
|
+
// are the only columns available.
|
12
|
+
// "up": The plain columns are the baseline, with sm/md/lg
|
13
|
+
// overwriting as the min-width increases
|
14
|
+
// "down": The plain columns are the medium screen ones,
|
15
|
+
// with xs/sm/lg overwriting at min/max-width points
|
16
|
+
// "exact": No plain columns, and each set applies strictly
|
17
|
+
// to their breakpoin, with no bleed over.
|
18
|
+
//
|
19
|
+
// Non-zero values for $cols and $gutter will change and
|
20
|
+
// overwrite $gridstrap-cols and $gridstrap-gutter(-half)
|
21
|
+
//
|
22
|
+
// @param string $responsive The responsive mode to use
|
23
|
+
// @param mixed $cols The number of columns
|
24
|
+
// @param mixed $gutter The width of the gutter
|
25
|
+
|
26
|
+
@mixin gridstrap($responsive: "none", $cols: 0, $gutter: 0){
|
27
|
+
@if $cols != 0 {
|
28
|
+
$gridstrap-cols: $cols;
|
29
|
+
}
|
30
|
+
@if $gutter != 0 {
|
31
|
+
$gridstrap-gutter: $gutter;
|
32
|
+
$gridstrap-gutter-half: $gutter / 2;
|
33
|
+
}
|
34
|
+
|
35
|
+
// Base Grid Setup
|
36
|
+
@include gridstrap-base();
|
37
|
+
|
38
|
+
// Use appropriate buid mixin
|
39
|
+
@if $responsive == "none" {
|
40
|
+
@include gridstrap-build-simple();
|
41
|
+
}
|
42
|
+
@else if $responsive == "up" {
|
43
|
+
@include gridstrap-build-up();
|
44
|
+
}
|
45
|
+
@else if $responsive == "down" {
|
46
|
+
@include gridstrap-build-down();
|
47
|
+
}
|
48
|
+
@else if $responsive == "exact" {
|
49
|
+
@include gridstrap-build-exact();
|
50
|
+
}
|
51
|
+
}
|
@@ -0,0 +1,180 @@
|
|
1
|
+
// Variable setup mixin.
|
2
|
+
//
|
3
|
+
// Pass a list of column modifiers you intend to use.
|
4
|
+
//
|
5
|
+
// "span": centered column of X size
|
6
|
+
// "of": centered column of 1/X the container width
|
7
|
+
// "offset": offset column by X columns (with margin)
|
8
|
+
// "move": move column by X columns (via left/right)
|
9
|
+
//
|
10
|
+
// @param string $uses... The list of modifiers to use.
|
11
|
+
|
12
|
+
@mixin gridstrap-use($uses...){
|
13
|
+
// Default all to false
|
14
|
+
$gridstrap-use-span: false;
|
15
|
+
$gridstrap-use-of: false;
|
16
|
+
$gridstrap-use-offset: false;
|
17
|
+
$gridstrap-use-push: false;
|
18
|
+
$gridstrap-use-pull: false;
|
19
|
+
|
20
|
+
// If first $use isn"t "all"...
|
21
|
+
@if nth($uses, 1) != "all" {
|
22
|
+
// Loop through and set matched options to true
|
23
|
+
@each $use in $uses {
|
24
|
+
@if $use == "span" {
|
25
|
+
$gridstrap-use-span: true;
|
26
|
+
} @else if $use == "of" {
|
27
|
+
$gridstrap-use-of: true;
|
28
|
+
} @else if $use == "offset" {
|
29
|
+
$gridstrap-use-offset: true;
|
30
|
+
} @else if $use == "move" {
|
31
|
+
$gridstrap-use-push: true;
|
32
|
+
$gridstrap-use-pull: true;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
} @else {
|
36
|
+
// Make all true
|
37
|
+
$gridstrap-use-span: true;
|
38
|
+
$gridstrap-use-of: true;
|
39
|
+
$gridstrap-use-offset: true;
|
40
|
+
$gridstrap-use-push: true;
|
41
|
+
$gridstrap-use-pull: true;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
// Internal Use.
|
46
|
+
// Sets up placeholders and contianer/row styling.
|
47
|
+
|
48
|
+
@mixin gridstrap-base(){
|
49
|
+
%gridstrap-gutter-padding{
|
50
|
+
padding-right: $gridstrap-gutter-half;
|
51
|
+
padding-left: $gridstrap-gutter-half;
|
52
|
+
}
|
53
|
+
|
54
|
+
%gridstrap-col{
|
55
|
+
@extend %gridstrap-gutter-padding;
|
56
|
+
float: left;
|
57
|
+
position: relative;
|
58
|
+
min-height: 1px;
|
59
|
+
}
|
60
|
+
|
61
|
+
%gridstrap-span{
|
62
|
+
@extend %gridstrap-gutter-padding;
|
63
|
+
margin-left: auto;
|
64
|
+
margin-right: auto;
|
65
|
+
}
|
66
|
+
|
67
|
+
%gridstrap-clearfix{
|
68
|
+
@include pie-clearfix();
|
69
|
+
}
|
70
|
+
|
71
|
+
.container,
|
72
|
+
.container-fluid{
|
73
|
+
@extend %gridstrap-clearfix, %gridstrap-gutter-padding;
|
74
|
+
position: relative;
|
75
|
+
margin-left: auto;
|
76
|
+
margin-right: auto;
|
77
|
+
}
|
78
|
+
|
79
|
+
.row{
|
80
|
+
@extend %gridstrap-clearfix;
|
81
|
+
margin-left: $gridstrap-gutter-half;
|
82
|
+
margin-right: $gridstrap-gutter-half;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
// Setup the base styling for columns/spans
|
87
|
+
//
|
88
|
+
// Applies $midfix to class names if present.
|
89
|
+
// e.g. "sm" > .col-sm-X
|
90
|
+
//
|
91
|
+
// @param string $midfix Optional The midfix to use on the classes
|
92
|
+
|
93
|
+
@mixin gridstrap-setup-columns($midfix:""){
|
94
|
+
@if $midfix != "" {
|
95
|
+
$midfix: $midfix + "-";
|
96
|
+
}
|
97
|
+
|
98
|
+
@for $i from 1 through $gridstrap-cols {
|
99
|
+
.col-#{$midfix}#{$i}{
|
100
|
+
@extend %gridstrap-col;
|
101
|
+
}
|
102
|
+
|
103
|
+
@if $gridstrap-use-span {
|
104
|
+
.span-#{$midfix}#{$i}{
|
105
|
+
@extend %gridstrap-span;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
// Sets the actual sizing for the columns/spans/ofs,
|
112
|
+
// and modifiers
|
113
|
+
//
|
114
|
+
// Applies $midfix to class names if present.
|
115
|
+
// e.g. "sm" > .col-sm-X
|
116
|
+
//
|
117
|
+
// @param string $midfix Optional The midfix to use on the classes
|
118
|
+
|
119
|
+
@mixin gridstrap-build-columns($midfix: "") {
|
120
|
+
@if $midfix != "" {
|
121
|
+
$midfix: $midfix + "-";
|
122
|
+
}
|
123
|
+
|
124
|
+
// Add classes/modifiers for each column number
|
125
|
+
@for $i from 1 through $gridstrap-cols {
|
126
|
+
$width: ($i / $gridstrap-cols) * 100%;
|
127
|
+
|
128
|
+
.col-#{$midfix}#{$i}{
|
129
|
+
width: $width;
|
130
|
+
}
|
131
|
+
|
132
|
+
@if $gridstrap-use-span {
|
133
|
+
.span-#{$midfix}#{$i}{
|
134
|
+
width: $width;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
@if $gridstrap-use-of {
|
139
|
+
.of-#{$midfix}#{$i}{
|
140
|
+
width: 100% / $i;
|
141
|
+
}
|
142
|
+
}
|
143
|
+
|
144
|
+
// No modifiers for final column
|
145
|
+
@if $i < $gridstrap-cols {
|
146
|
+
@if $gridstrap-use-offset {
|
147
|
+
.offset-#{$midfix}#{$i}{
|
148
|
+
margin-left: $width;
|
149
|
+
}
|
150
|
+
}
|
151
|
+
@if $gridstrap-use-push {
|
152
|
+
.push-#{$midfix}#{$i}{
|
153
|
+
left: $width;
|
154
|
+
}
|
155
|
+
}
|
156
|
+
@if $gridstrap-use-pull {
|
157
|
+
.pull-#{$midfix}#{$i}{
|
158
|
+
right: $width;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
}
|
163
|
+
|
164
|
+
// Add resets
|
165
|
+
@if $gridstrap-use-offset {
|
166
|
+
.offset-#{$midfix}0{
|
167
|
+
margin-left: 0;
|
168
|
+
}
|
169
|
+
}
|
170
|
+
@if $gridstrap-use-push {
|
171
|
+
.push-#{$midfix}0{
|
172
|
+
margin-left: 0;
|
173
|
+
}
|
174
|
+
}
|
175
|
+
@if $gridstrap-use-pull {
|
176
|
+
.pull-#{$midfix}0{
|
177
|
+
margin-left: 0;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
// Column/Gutter values
|
2
|
+
$gridstrap-cols: 12 !default;
|
3
|
+
$gridstrap-gutter: 30px !default;
|
4
|
+
$gridstrap-gutter-half: $gridstrap-gutter / 2;
|
5
|
+
|
6
|
+
// Span and Modifer class options
|
7
|
+
$gridstrap-use-span: true !default;
|
8
|
+
$gridstrap-use-of: true !default;
|
9
|
+
$gridstrap-use-offset: true !default;
|
10
|
+
$gridstrap-use-push: true !default;
|
11
|
+
$gridstrap-use-pull: true !default;
|
@@ -0,0 +1,36 @@
|
|
1
|
+
@mixin gridstrap-build-down(){
|
2
|
+
@include gridstrap-build-simple();
|
3
|
+
|
4
|
+
// Tablet/Desktop/Widescreen Columns Setup
|
5
|
+
@include gridstrap-setup-columns("xs");
|
6
|
+
@include gridstrap-setup-columns("sm");
|
7
|
+
@include gridstrap-setup-columns("lg");
|
8
|
+
|
9
|
+
.container{
|
10
|
+
max-width: $md-screen - $gridstrap-gutter;
|
11
|
+
}
|
12
|
+
|
13
|
+
// Large (Widescreen) and up
|
14
|
+
@include lg-screen-min{
|
15
|
+
.container{
|
16
|
+
max-width: $lg-screen - $gridstrap-gutter;
|
17
|
+
}
|
18
|
+
@include gridstrap-build-columns("lg");
|
19
|
+
}
|
20
|
+
|
21
|
+
// Small (Tablet) and down
|
22
|
+
@include sm-screen-max{
|
23
|
+
.container{
|
24
|
+
max-width: $sm-screen - $gridstrap-gutter;
|
25
|
+
}
|
26
|
+
@include gridstrap-build-columns("sm");
|
27
|
+
}
|
28
|
+
|
29
|
+
// Extra-Small (Mobile) and down
|
30
|
+
@include xs-screen{
|
31
|
+
.container{
|
32
|
+
max-width: none;
|
33
|
+
}
|
34
|
+
@include gridstrap-build-columns("xs");
|
35
|
+
}
|
36
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
@mixin gridstrap-build-exact(){
|
2
|
+
// Mobile/Tablet/Desktop/Widescreen Columns Setup
|
3
|
+
@include gridstrap-setup-columns("xs");
|
4
|
+
@include gridstrap-setup-columns("sm");
|
5
|
+
@include gridstrap-setup-columns("md");
|
6
|
+
@include gridstrap-setup-columns("lg");
|
7
|
+
|
8
|
+
// Extra-Small (Mobile) and down
|
9
|
+
@include xs-screen($gridstrap-gutter){
|
10
|
+
.container{
|
11
|
+
max-width: none;
|
12
|
+
}
|
13
|
+
@include gridstrap-build-columns("xs");
|
14
|
+
}
|
15
|
+
|
16
|
+
// Small (Tablet) only
|
17
|
+
@include sm-screen{
|
18
|
+
.container{
|
19
|
+
max-width: $sm-screen - $gridstrap-gutter;
|
20
|
+
}
|
21
|
+
@include gridstrap-build-columns("sm");
|
22
|
+
}
|
23
|
+
|
24
|
+
// Medium (Desktop) only
|
25
|
+
@include md-screen{
|
26
|
+
.container{
|
27
|
+
max-width: $md-screen - $gridstrap-gutter;
|
28
|
+
}
|
29
|
+
@include gridstrap-build-columns("md");
|
30
|
+
}
|
31
|
+
|
32
|
+
// Large (Widescreen) only
|
33
|
+
@include lg-screen{
|
34
|
+
.container{
|
35
|
+
max-width: $lg-screen - $gridstrap-gutter;
|
36
|
+
}
|
37
|
+
@include gridstrap-build-columns("lg");
|
38
|
+
}
|
39
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
@mixin gridstrap-build-up(){
|
2
|
+
@include gridstrap-build-simple();
|
3
|
+
|
4
|
+
// Tablet/Desktop/Widescreen Columns Setup
|
5
|
+
@include gridstrap-setup-columns("sm");
|
6
|
+
@include gridstrap-setup-columns("md");
|
7
|
+
@include gridstrap-setup-columns("lg");
|
8
|
+
|
9
|
+
// Small (Tablet) and Up
|
10
|
+
@include sm-screen-min{
|
11
|
+
.container{
|
12
|
+
max-width: $sm-screen - $gridstrap-gutter;
|
13
|
+
}
|
14
|
+
@include gridstrap-build-columns("sm");
|
15
|
+
}
|
16
|
+
|
17
|
+
// Medium (Desktop) and up
|
18
|
+
@include md-screen-min{
|
19
|
+
.container{
|
20
|
+
max-width: $md-screen - $gridstrap-gutter;
|
21
|
+
}
|
22
|
+
@include gridstrap-build-columns("md");
|
23
|
+
}
|
24
|
+
|
25
|
+
// Large (Widescreen) and up
|
26
|
+
@include lg-screen{
|
27
|
+
.container{
|
28
|
+
max-width: $lg-screen - $gridstrap-gutter;
|
29
|
+
}
|
30
|
+
@include gridstrap-build-columns("lg");
|
31
|
+
}
|
32
|
+
}
|
metadata
ADDED
@@ -0,0 +1,70 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: gridstrap
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Doug Wollison
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-01-27 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: compass
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '0.11'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '0.11'
|
30
|
+
description: A bootstrap inspired grid system kit for Compass.
|
31
|
+
email: doug@wollison.net
|
32
|
+
executables: []
|
33
|
+
extensions: []
|
34
|
+
extra_rdoc_files: []
|
35
|
+
files:
|
36
|
+
- README.md
|
37
|
+
- lib/gridstrap.rb
|
38
|
+
- stylesheets/_gridstrap.scss
|
39
|
+
- stylesheets/inc/_vars.scss
|
40
|
+
- stylesheets/inc/build/_up.scss
|
41
|
+
- stylesheets/inc/build/_none.scss
|
42
|
+
- stylesheets/inc/build/_down.scss
|
43
|
+
- stylesheets/inc/build/_exact.scss
|
44
|
+
- stylesheets/inc/_mixins.scss
|
45
|
+
- stylesheets/inc/_build.scss
|
46
|
+
homepage: http://github.com/dougwollison/gridstrap
|
47
|
+
licenses: []
|
48
|
+
post_install_message:
|
49
|
+
rdoc_options: []
|
50
|
+
require_paths:
|
51
|
+
- lib
|
52
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
53
|
+
none: false
|
54
|
+
requirements:
|
55
|
+
- - ! '>='
|
56
|
+
- !ruby/object:Gem::Version
|
57
|
+
version: '0'
|
58
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
59
|
+
none: false
|
60
|
+
requirements:
|
61
|
+
- - ! '>='
|
62
|
+
- !ruby/object:Gem::Version
|
63
|
+
version: '0'
|
64
|
+
requirements: []
|
65
|
+
rubyforge_project:
|
66
|
+
rubygems_version: 1.8.23
|
67
|
+
signing_key:
|
68
|
+
specification_version: 3
|
69
|
+
summary: A bootstrap inspired grid system kit for Compass.
|
70
|
+
test_files: []
|