chameleon-sass 0.0.8 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +30 -3
- data/assets/stylesheets/_chameleon.sass +4 -3
- data/assets/stylesheets/_config.sass +2 -1
- data/assets/stylesheets/_defaults.sass +4 -1
- data/assets/stylesheets/_objects.sass +0 -1
- data/assets/stylesheets/{defaults → config}/_units.sass +0 -0
- data/assets/stylesheets/objects/_grid.sass +18 -0
- data/lib/chameleon-sass.rb +3 -3
- metadata +4 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a06f632f0013b7dd31c565146f82c0edaa334a9c
|
|
4
|
+
data.tar.gz: d62cab8df34e253809817074975df07b5258cc42
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e373b52851238af9bb3b0ae7d70e7881c9d8273a429dad3f08598b4cb7b2d6ccd68c204906da2011108498e7c2eff8c08301c204471ebed6e459c475da906e1b
|
|
7
|
+
data.tar.gz: f19ec85354cf69d6539b00c092d099a29c350d7a093550bbaa033c2cdb427b1781cab241cf1371f733d63476a58363432f7e9b4e62a2f2c5daec58c25f2ace8d
|
data/README.md
CHANGED
|
@@ -44,7 +44,7 @@ Otherwise, you will need to manually add the above path to your @import.
|
|
|
44
44
|
|
|
45
45
|
Add to your main Sass stylesheet:
|
|
46
46
|
|
|
47
|
-
`@import "chameleon"
|
|
47
|
+
`@import "chameleon";`
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
### Generating a responsive grid
|
|
@@ -54,7 +54,34 @@ One of the defining feature of Chameleon is that no CSS is generated until you e
|
|
|
54
54
|
Let's get started by adding some building blocks of a responsive grid:
|
|
55
55
|
|
|
56
56
|
```
|
|
57
|
+
@import "chameleon";
|
|
58
|
+
|
|
59
|
+
@include defaults();
|
|
57
60
|
@include grid-defaults();
|
|
58
|
-
|
|
59
|
-
@include classes("cols-
|
|
61
|
+
|
|
62
|
+
@include classes("cols-spaced", $on: ("base" "fablet-up" "tablet-up" "desktop-up"));
|
|
63
|
+
@include classes("cols-to-rows", $on: ("base" "mobile" "fablet-down" "tablet-down"));
|
|
64
|
+
|
|
65
|
+
@include classes("col-1-2", $on: "base");
|
|
66
|
+
@include classes("col-1-3", $on: "base");
|
|
67
|
+
@include classes("col-1-4", $on: "base");
|
|
68
|
+
|
|
69
|
+
@include classes("rows-spaced", $on: "base");
|
|
70
|
+
@include classes("cols-spaced", $on: "base");
|
|
60
71
|
```
|
|
72
|
+
Here we use the default breakpoint expressions defined by Chameleon to generate classes that work for different viewport sizes.
|
|
73
|
+
|
|
74
|
+
Now, import your stylesheet into your page and add some markup:
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
<div class="row cols-spaced">
|
|
78
|
+
<div class="col-1-2">
|
|
79
|
+
<div class="panel">Half</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="col-1-2">
|
|
82
|
+
<div class="panel">Half</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Congrats! You just generated a super easy to use, easily customisable, responsive grid system.
|
|
File without changes
|
|
@@ -40,6 +40,24 @@
|
|
|
40
40
|
+placeholders("col-3-4")
|
|
41
41
|
width: 75%
|
|
42
42
|
|
|
43
|
+
+placeholders("col-1-5")
|
|
44
|
+
width: 20%
|
|
45
|
+
|
|
46
|
+
+placeholders("col-2-5")
|
|
47
|
+
width: 40%
|
|
48
|
+
|
|
49
|
+
+placeholders("col-3-5")
|
|
50
|
+
width: 60%
|
|
51
|
+
|
|
52
|
+
+placeholders("col-4-5")
|
|
53
|
+
width: 80%
|
|
54
|
+
|
|
55
|
+
+placeholders("col-1-6")
|
|
56
|
+
width: 16.666666%
|
|
57
|
+
|
|
58
|
+
+placeholders("col-5-6")
|
|
59
|
+
width: 83.333333%
|
|
60
|
+
|
|
43
61
|
|
|
44
62
|
// Switch cols to rows (stack 'em)
|
|
45
63
|
|
data/lib/chameleon-sass.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: chameleon-sass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.12
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Daniel Grant
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2015-09-10 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description: A styleless Sass framework for responsive user interfaces
|
|
14
14
|
email: hello@danielgrant.im
|
|
@@ -26,7 +26,7 @@ files:
|
|
|
26
26
|
- assets/stylesheets/_objects.sass
|
|
27
27
|
- assets/stylesheets/config/_base-sizing.sass
|
|
28
28
|
- assets/stylesheets/config/_breakpoints.scss
|
|
29
|
-
- assets/stylesheets/
|
|
29
|
+
- assets/stylesheets/config/_units.sass
|
|
30
30
|
- assets/stylesheets/functions/_maps.sass
|
|
31
31
|
- assets/stylesheets/functions/_units.scss
|
|
32
32
|
- assets/stylesheets/helpers/_box.sass
|
|
@@ -56,7 +56,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
56
56
|
version: '0'
|
|
57
57
|
requirements: []
|
|
58
58
|
rubyforge_project:
|
|
59
|
-
rubygems_version: 2.
|
|
59
|
+
rubygems_version: 2.4.8
|
|
60
60
|
signing_key:
|
|
61
61
|
specification_version: 4
|
|
62
62
|
summary: Chameleon
|