layout-tools-for-susy 0.1.2 → 0.1.6
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 +8 -8
- data/lib/layout-tools-for-susy.rb +3 -3
- data/stylesheets/_layout-tools-for-susy.scss +0 -3
- data/stylesheets/mixins/_layout-use.scss +4 -4
- metadata +10 -10
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 180cb44dc0e0823b692156346200ad968dc51c4d
|
4
|
+
data.tar.gz: b31858f42a0e5ad6fc619cd1f8576c2302403a23
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8d8876013b0e5c8ac3c780ff16cb0fd7a1b07c7dec0f58d3f6f1715d316bac73ed27d11256c0d25d306b4be3ba2de7638c80c22aabce9321ff5b1bfdeecc3385
|
7
|
+
data.tar.gz: 22fd0900b43e0c5d2af492f495f09de332d67e7b6b3ed1f8cd74986c2c5c5b218d0c4b1e899a4ae2f55d41eb57e83f2738ff10d9c168a83f7a55dd7bf0a2933b
|
data/README.md
CHANGED
@@ -32,7 +32,7 @@ $ npm install layout-tools-for-susy --save-dev
|
|
32
32
|
This installs layout tools and Susy. Include tools in your stylesheets like this:
|
33
33
|
```scss
|
34
34
|
// file: src/stylesheets/styles.scss
|
35
|
-
@import '../../node_modules/
|
35
|
+
@import '../../node_modules/susy/sass/susy',
|
36
36
|
'../../node_modules/layout-tools-for-susy/stylesheets/layout-tools-for-susy';
|
37
37
|
```
|
38
38
|
|
@@ -139,7 +139,7 @@ $layouts: (
|
|
139
139
|
@include layout-init($layouts);
|
140
140
|
|
141
141
|
```
|
142
|
-
The root properties of the map $layouts represent the different layout contexts. Layout contexts may be layout variations depending on breakpoints or layout settings specific for e.g. a certain template. There are some important settings that will be defined by default if you don’t set them yourself. The `default` layout will be set up by—you guessed it—default with the properties `susy`—containing Susy’s default settings—and `base`—setting a `base__font-size` and `base__line-height` value. To implement your custom layouts, you have to create your settings map like shown above overriding the defaults and adding additional layout specifications.
|
142
|
+
The root properties of the map $layouts represent the different layout contexts. Layout contexts may be layout variations depending on breakpoints or layout settings specific for e.g. a certain template. There are some important settings that will be defined by default if you don’t set them yourself. The `default` layout will be set up by—you guessed it—default with the properties `susy`—containing Susy’s default settings—and `base`—setting a `base__font-size` and `base__line-height` value. To implement your custom layouts, you have to create your settings map like shown above overriding the defaults and adding additional layout specifications.
|
143
143
|
|
144
144
|
#### Using layout contexts
|
145
145
|
The `default` layout context is the most basic. It will be used everywhere where no other layout context is set (by using the `layout-use` mixin). All other layout contexts extend the `default` context and thus override its settings. If you want to extend a specific context, you can define it using the `extends` property within a layout context’s definition map. In the example above the layout context `L` extends `M`. That means the settings and values you will be working with in the layout context `L` are the result from first merging `M` into `default` and then `L` into the first merge’s result. So within the context of `L` the value of `base__font-size` will be 18px. This behaviour allows you create a sophisticated system of layout settings through controlled inheritance of settings and values.
|
@@ -224,7 +224,7 @@ $my-component: (
|
|
224
224
|
|
225
225
|
// Use styles
|
226
226
|
.my-component {
|
227
|
-
|
227
|
+
|
228
228
|
&__label {
|
229
229
|
// Retrieve settings from current layout context
|
230
230
|
$label__font-size: layout-get(my-component, label__font-size);
|
@@ -264,7 +264,7 @@ $layouts: (
|
|
264
264
|
...
|
265
265
|
),
|
266
266
|
breakpoint: (
|
267
|
-
(
|
267
|
+
(
|
268
268
|
min-width: 480px,
|
269
269
|
max-width: 800px,
|
270
270
|
min-height: 650px
|
@@ -308,7 +308,7 @@ As you can see, it's possible to define a single, simple breakpoint through addi
|
|
308
308
|
}
|
309
309
|
}
|
310
310
|
```
|
311
|
-
That’s it. Easy, isn’t it?
|
311
|
+
That’s it. Easy, isn’t it?
|
312
312
|
|
313
313
|
## More handy helpers
|
314
314
|
Layout Tools for Susy come with some more handy helpers.
|
@@ -343,7 +343,7 @@ body {
|
|
343
343
|
}
|
344
344
|
|
345
345
|
.page {
|
346
|
-
|
346
|
+
|
347
347
|
&__header {
|
348
348
|
// retrieve font sizes from layout context
|
349
349
|
$header__font-size: layout-get(page, header__font-size);
|
@@ -387,7 +387,7 @@ body {
|
|
387
387
|
}
|
388
388
|
}
|
389
389
|
}
|
390
|
-
}
|
390
|
+
}
|
391
391
|
}
|
392
392
|
```
|
393
393
|
In the example above the ```type-context``` mixin is used to set new local font sizes and line heights as ```em``` values. In contrast to ```type-base``` the base values ```$base__font-size``` and ```$base__line-height``` won’t be altered within the mixins scope. Multiple type contexts can be embedded into each other and the mixin will take track of the relative font sizes and line heights and the necessary calculations.
|
@@ -429,4 +429,4 @@ background-image: url(const(BG_IMG_PATH) + 'hero_bg.jpg');
|
|
429
429
|
|
430
430
|
### Tips and tricks
|
431
431
|
|
432
|
-
### Contribute
|
432
|
+
### Contribute
|
@@ -80,9 +80,9 @@
|
|
80
80
|
}
|
81
81
|
}
|
82
82
|
}
|
83
|
-
|
84
|
-
|
85
|
-
|
83
|
+
@else {
|
84
|
+
@content;
|
85
|
+
}
|
86
86
|
}
|
87
87
|
// restore parent layout settings
|
88
88
|
$LAYOUT: $LAYOUT--parent !global;
|
@@ -91,4 +91,4 @@
|
|
91
91
|
$base__line-height: $base__line-height--parent !global;
|
92
92
|
// $local__font-size: $local__font-size--parent !global;
|
93
93
|
// $local__line-height: $local__line-height--parent !global;
|
94
|
-
}
|
94
|
+
}
|
metadata
CHANGED
@@ -1,41 +1,41 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: layout-tools-for-susy
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.6
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Oliver Wehn
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2016-01-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
|
-
- -
|
17
|
+
- - ~>
|
18
18
|
- !ruby/object:Gem::Version
|
19
19
|
version: '3.0'
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
|
-
- -
|
24
|
+
- - ~>
|
25
25
|
- !ruby/object:Gem::Version
|
26
26
|
version: '3.0'
|
27
27
|
- !ruby/object:Gem::Dependency
|
28
28
|
name: susy
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
30
30
|
requirements:
|
31
|
-
- -
|
31
|
+
- - ~>
|
32
32
|
- !ruby/object:Gem::Version
|
33
33
|
version: '2.2'
|
34
34
|
type: :runtime
|
35
35
|
prerelease: false
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
37
37
|
requirements:
|
38
|
-
- -
|
38
|
+
- - ~>
|
39
39
|
- !ruby/object:Gem::Version
|
40
40
|
version: '2.2'
|
41
41
|
description: Organize and handle layouts over multiple breakpoints
|
@@ -45,8 +45,8 @@ executables: []
|
|
45
45
|
extensions: []
|
46
46
|
extra_rdoc_files: []
|
47
47
|
files:
|
48
|
-
- CHANGELOG.md
|
49
48
|
- README.md
|
49
|
+
- CHANGELOG.md
|
50
50
|
- lib/layout-tools-for-susy.rb
|
51
51
|
- stylesheets/_layout-tools-for-susy.scss
|
52
52
|
- stylesheets/config/_constants.scss
|
@@ -84,17 +84,17 @@ require_paths:
|
|
84
84
|
- lib
|
85
85
|
required_ruby_version: !ruby/object:Gem::Requirement
|
86
86
|
requirements:
|
87
|
-
- -
|
87
|
+
- - '>='
|
88
88
|
- !ruby/object:Gem::Version
|
89
89
|
version: '0'
|
90
90
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
91
91
|
requirements:
|
92
|
-
- -
|
92
|
+
- - '>='
|
93
93
|
- !ruby/object:Gem::Version
|
94
94
|
version: 1.3.6
|
95
95
|
requirements: []
|
96
96
|
rubyforge_project: layout-tools-for-susy
|
97
|
-
rubygems_version: 2.
|
97
|
+
rubygems_version: 2.0.14
|
98
98
|
signing_key:
|
99
99
|
specification_version: 4
|
100
100
|
summary: Handy mixins and functions to handle layout settings for multiple breakpoints.
|