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.
         |