at-import/toolkit

Toolkit for Responsive Web Design and Progressive Enhancement with Compass

toolkit's Issues

[support req] How is style guide supposed to be used?

Hi!

Templates contain a style guide partials section. How is it supposed to be used?

A comment there suggests both design and layout code should go there.

If it is solely a recommendation on how to theme the website, then why is it getting imported?

PS Thank you!

Intrinsic ratio applied to embedded Youtube/Vimeo links not working

I've embedded youtube and vimeo links in a Wordpress TinyMCE post. Then i tried to apply an intrinsic ratio to the iframe ( to get the video span 100% of the width and behave fluidly):

.news-text > iframe {
    @include intrinsic-ratio(16/9, 100%, 'iframe');
}

But no matter what i try 16/9, or 4/3 or 500/281 (the specified extends in the iframe markup), 1.77935942, all the time the video isn't displayed, only the space spanned and freed of other content. would a wrapper be necessary? or isn't the intrinsic ratio working with embedded videos and a solution like fitvids would be necessary? Best regards Ralf

Can't create project using Compass v0.13.alpha.0

this is the error I get in terminal

/Users/schapman/.rvm/gems/ruby-1.9.3-p194/gems/bundler-1.1.5/lib/bundler/shared_helpers.rb:22:in `default_gemfile': Could not locate Gemfile (Bundler::GemfileNotFound)
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/gems/bundler-1.1.5/lib/bundler.rb:213:in `default_gemfile'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/gems/bundler-1.1.5/lib/bundler.rb:164:in `root'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/gems/bundler-1.1.5/lib/bundler.rb:123:in `load'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/gems/bundler-1.1.5/lib/bundler.rb:114:in `setup'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/gems/bundler-1.1.5/lib/bundler.rb:119:in `require'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.13.alpha.0/bin/compass:25:in `<top (required)>'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/bin/compass:19:in `load'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/bin/compass:19:in `<main>'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/bin/ruby_noexec_wrapper:14:in `eval'
    from /Users/schapman/.rvm/gems/ruby-1.9.3-p194/bin/ruby_noexec_wrapper:14:in `<main>'

Broken Behavior path

When I compile my CSS, I see this broken path for legacy browsers:

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('/app/assets/css/../behaviors/box-sizing/boxsizing.php');
}

Is that supposed to be there?

Clarify Compass-dev dependency

Why does toolkit depend on Compass 0.13.0 alpha?

Typo? $ratio != $ration

Sassmeister is automatically using the most recent version of the Toolkit gem, which is 2.0.0.alpha.6.

My Sass, which worked last week, is now generating the error:
Undefined variable: "$ration".

http://sassmeister.com/gist/starryeyez024/7951177

Update Nested Context to follow Toolkit Contributing Guidelines

Nested Context is great, but it does not follow the Toolkit Contributing Guidelines in regards to globally setable default arguments or extend options for shared reusable pieces. Please update Nested Context to follow the guidelines.

box-sizing: border-box; not applied in all browsers :(

I'm getting this in my compiled CSS

/* line 36, ../../../../../../../../gems/gems/toolkit-1.3.8/stylesheets/toolkit/_box-sizing.scss */
*, *:after, *:before {
  box-sizing: border-box;
}

Which does not include the -moz and -webkit prefixed versions that are otherwise recommended: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

I think it usually does, so there might be some version issue here. For this instance, I have the following installed:

• breakpoint (2.0.7)
• bundler (1.3.5)
• chunky_png (1.2.8)
• color-schemer (0.2.7)
• compass (0.12.2)
• compass-blend-modes (0.0.2)
• compass-normalize (1.4.3)
• fssm (0.2.10)
• modular-scale (1.0.6)
• sass (3.2.11)
• sassy-buttons (0.2.6)
• sassy-math (1.5)
• sassy-strings (1.0.0)
• singularitygs (1.1.2)
• toolkit (1.3.8)

Diff versions of SASS conflicting

Installing the toolkit today, I get this error in the terminal when compass watch:

" Unable to activate toolkit-2.5.2, because sass-3.2.19 conflicts with sass (~> 3.3.0)"

"Rainbow" Border Mixin

Might be a bit niche, but it's a nice little mixin to create multicolored stripes.

From this article by Hugo Giraudel.

Seems like it could play nicely with Color Stacks.

Duplicate selector using enhance-with degrade-from

http://sassmeister.com/gist/7197433

We currently make an extensive use of the svg-background mixin for a project.
But I discovered there are a ton of duplicate and noneffective selectors.

This is coming from the fact we use are relying on extending a set of base classes.

It happens when we extend a class with the svg-background inside. Which in turn use the enhance-with and degrade-from mixins.

See gist.

I'm wondering how we could prevent this.

EDIT: Well this is not a Toolkit specific issue actually.

"intrinsic-ratio" mixin fails without arguments

The readme allows using +intrinsic-ratio without arguments:

.ratio-16-9 {
  @include intrinsic-ratio;
}

But when i do, i receive an error:

 error sass/style.sass (Line 27 of _fluid-media.scss: Undefined operation: "1/true times 100%".)

To overcome the issue, i have to specify the ratio explicitly, then it works.

Toolkit Error

In my project I use @import toolkit-no-css, but in the css output I get what's below. Does anyone have any suggestions?

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('../behaviors/box-sizing/boxsizing.php');
}

.comment__content, .breadcrumb, .action-links, .block--nav-bar .menu, .clearfix, .pager, .site-branding, .field--type-taxonomy-term-reference .field__items {
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}

.comment__content:before, .breadcrumb:before, .action-links:before, .block--nav-bar .menu:before, .clearfix:before, .pager:before, .site-branding:before, .field--type-taxonomy-term-reference .field__items:before, .comment__content:after, .breadcrumb:after, .action-links:after, .block--nav-bar .menu:after, .clearfix:after, .pager:after, .site-branding:after, .field--type-taxonomy-term-reference .field__items:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.comment__content:after, .breadcrumb:after, .action-links:after, .block--nav-bar .menu:after, .clearfix:after, .pager:after, .site-branding:after, .field--type-taxonomy-term-reference .field__items:after {
  clear: both;
}

Don’t write styles by default

Toolkit writes a far amount of CSS by default that can cause problems when importing it into existing projects. Would be nice if styles could be added with something like @import toolkit; @include toolkit; instead of just @import toolkit;.

Add support for WOFF2 fonts

The @font-face mixin currently does not allow for WOFF2 format fonts - they are now supported by Chrome and Opera.

Triangles Are Broken

Input Sass:

@include triangle(red, 30px, 270);

Output CSS

display: block;
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-color: red;
border-width: 0 135 30px 135;

The border-width property is wrong, and changing the 135s to 135px does not produce the correct triangle,

CodeKit Error on Compile

I created a new project using the command line:

compass create <my_project> -r toolkit --using toolkit/susy

Then load the project into CodeKit.

I then add a line of code into _design.scss:

a{
   padding:10px;
}

and receive this error:

Compass was unable to compile one or more files in the project: 

LoadError on line 31 of /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems/custom_require.rb: no such file to load -- toolkit
Run with --trace to see the full backtrace

(This action was triggered by a change to _design.scss)

@extend error _fluid-media.scss

Hi there,

I'm getting an error from LiveReload when I first try and import Toolkit.

I've added require "Toolkit" into my config.rb and added @import "Toolkit" at the top of my screen.scss. When I save this file I get the following error from LiveReload:

error sass/screen.scss (Line 25 of _fluid-media.scss: Invalid CSS after " @extend ": expected selector_sequence, was "%intrinsic-rati...")

I do have an import for the basic Compass clearfix underneath but removing this stills throws the same error. I don't have a _fluid-media.scss partial either so I have no idea where this error is coming from!

I hope you can help

Regards

Dan

Remove ::after and ::before for default box-sizing behaviour

I suggest the *::after and *::before pseudoclass selectors for box-sizing (in _border-box.scss) to be removed or made optional. They may lead to slow style recalculation on mobile platforms (I had this as an issue with iOS 6 in Safari). I think it's acceptable that when using these pseudoclasses that we can specify the box-sizing method seperately.

It's not such a big issue because we can just leave away the border-box includes, but it easily gets forgotten.

Dual-licensing too vague (and possibly irrelevant)

Project is dual-licensed under MIT and GPL.

The MIT part is ambiguous - there are multiple licenses are labelled as "MIT", but that one is spelled out in the LICENSE file as being what unambiguously could be labelled as "Expat".

The GPL part is ambiguous too - and is not spelled out, just references the GNU web page for that license. What is missing is which version, and if permitted to replace with newer versions or not.

...but technically dual-licensing should not be needed anyway, since Expat is compatible with GPLv2 and newer.

In short: Please consider either changing the "GPL" to e.g. "GPL-2+" (or the full paragraph recommended by GNU and listed at the bottom of their license page), or simply drop the GPL licensing as superfluous.

replace-text-pe mixin - text showing in IE9

Hi Snugug,
I've been using the @mixin replace-text-pe, but then I noticed that in IE9 it shows the text on top of the image.

I noticed that h5bp changed their image replacement technique h5bp/html5-boilerplate@aa0396e to use http://nicolasgallagher.com/another-css-image-replacement-technique/

So I thought maybe I could try that new technique after seeing https://github.com/Snugug/toolkit/blob/master/compass/stylesheets/toolkit/_pe.scss#L235, but I don't know how to extend those mixins.

Could you show me an example of how to extend those mixins to use a different image-replacement technique? I'm referring to %replace-text-pe-squish and %replace-text-pe-hide

Thank you

Underlines being misplaced in Chrome for Android with font size change

Hi there. I've noticed that (at least on my own site) the underlines sometimes get placed partway up the letters instead of underneath. From what I can tell, this has something to do with setting Chrome's default font size as something other than 100% (I have it set to 125% on my tablet). It also doesn't happen on every page load, and seems to only happen when revisiting a cached page, while cold loaded pages don't really have this issue. I suspect what's happening is that the underlines are being placed as if the font size was 100%, while the actual font size is some other size. Basically, it looks like Chrome is using incorrect sizes for the em units the underline uses for the background gradient. Has anyone else run into this issue, and if so, any way to avoid it?

Cold loaded, with underlines where they should be:

Cache loaded, with underlines appearing about halfway through the letters:

Grid-context calculations a bit off?

I've made a gist with Sassmeister to illustrate the problem:
http://sassmeister.com/gist/6952685

Basically im trying to make the "figure" element to pull to left margin of it's container, using the nested-context mixin.

Im probably doing something wrong, but would love your input on this.

Cheers.

Change $direction to $position in IR

Position is more clear as to exactly what's going to happen I think.

Equal height giving error

I'm getting an error while trying to use the equal height mixin.
I would like to create a single line to break up my two column layout using the below code

.main{
    $widths: 25%;
    $colors: red;
    @include equal-height-columns($widths, $colors);
}

But am getting this error message in the terminal: /Library/Ruby/Gems/1.8/gems/toolkit-0.2.6/stylesheets/toolkit/_equal-height-columns.scss:40 DEBUG: red, red 25%

Any ideas what I might be doing wrong?

Details:
Sass 3.2.7
Compass 0.12.2
Breakpoint 1.3

Support for Sass 3.4?

Toolkit has Sass locked at 3.3.

Can you bump the version?

Tint and Shade now in Compass

I believe the tint() and shade() functions in Toolkit are identical to the ones now in Compass (1, 2). Since Toolkit requires Compass, these can probably be removed.

Unable to activate toolkit-2.3.0, because sass-3.2.19 conflicts with sass (~> 3.3.0)

I cannot find any solutions on how to fix this conflict.

Improve triangle

Currently triangle does not work if there is no content: ''; next to @include triangle();. Also, second and third argument should probably be switched, as it is standard to write X axis value (width) first and Y axis value (height) second. See http://cssarrowplease.com/ for code that always works.

Extra semi-colon preventing proper linting in _colors.scss

Line 113 of _colors.scss has an extra semi-colon which should not be there.

Include Box Sizing Polyfill Install

As above.

Can we have an example of what you can *do* with a colour stack?

I just have a question on actual usage for color stacks - I love the concept, but am a little lost on actually using the results. As far as I can tell, per the code in the readme, you can set a variable with the colour stack function:

$red-blue: colour-stack(red, blue, 25%, 50%, 75%, 100%);

Sooooo - what can you now do with your $red-blue variable? Since the processed SCSS results in

red, #bf003f, #7f007f, #3f00bf, blue;

Which, is great. But you really can't pass that as a value into your implementation, unless there is a way to use SASS variables with multiple values that I'm not aware of.

I guess I would just love to see a little more explanation on usage. Or, put more bluntly: You invoke colour-stack - now what?

Thank you for a great set of tools! Like I say, I love this idea, and want to use it - I'm just not quite grasping how to use the results.

Box-sizing gets added once or twice without any @include

Today I wanted to create a stripped down test case to try something in Singularity with placeholder selectors. Thereby i ran into something completely different. ;)

I've created a test project folder only containing a config.rb file with the following required plugins:

require "sassy-math";          //v1.5 
require "modular-scale";      //v1.0.6
require "breakpoint";           //v2.0.7
require "toolkit";                 //v1.3.8
require "singularitygs";        //v1.1.2
require "singularity-extras";  //v0.0.3

Aside that, i've only created a scss folder and a css folder and monitored the whole thing with codekit. Then i've created a a style.scss file with the following code:

@import 'compass';
@import 'modular-scale';
@import 'singularitygs';
@import 'singularity-extras';
@import 'breakpoint';
@import 'toolkit';

which lead to the following css:

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('../css/../behaviors/box-sizing/boxsizing.php'); }

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('../css/../behaviors/box-sizing/boxsizing.php'); }

img, video {
  max-width: 100%;
  height: auto; }

the other variants i've tried:

@import 'compass';
@import 'modular-scale';
//@import 'singularitygs';
//@import 'singularity-extras';
@import 'breakpoint';
@import 'toolkit';

lead to

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('../css/../behaviors/box-sizing/boxsizing.php'); }

img, video {
  max-width: 100%;
  height: auto; }

The following to variants

@import 'compass';
@import 'modular-scale';
@import 'singularitygs';
@import 'singularity-extras';
@import 'breakpoint';
//@import 'toolkit';

@import 'compass';
@import 'modular-scale';
//@import 'singularitygs';
//@import 'singularity-extras';
@import 'breakpoint';
//@import 'toolkit';

lead to no css output - the expected behaviour i suppose. Cuz basically i've thought Toolkit would require an include (@include box-sizing('border-box');) to apply box-sizing at all or is it regular behaviour? Cheers Ralf

Don't add border-box to all elements

I know, it sounds like madness, but sometimes I don't want to add:

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('/stylesheets/../behaviors/box-sizing/boxsizing.php');
} 

But I couldn't work out how to not add it - Is there a way?

Bump Compass version to 0.13.alpha.4

I will be bumping the version of Compass to 0.13.alpha.4 because the animation module is required for the carousels. We can either remove the need for the animation modules or we need to bump up our required version of Compass.

So I am bumping the version to 0.13.alpha.4 unless there is any objection.

Selector not found when using retina-background

(Aurora theme)
On _variables.scss:

$logos: 'logos';
$icons: 'icons';
@include sprite-map-generator($logos);
@include sprite-map-generator($icons);

_design.scss

.icon-facebook{
   @include retina-background($icons, 'facebook');
}

>>> Change detected at 17:01:01 to: partials/design/_design.scss
unchanged assets/img/logos-sfa92f4f300.png
unchanged assets/img/icons-sd014756106.png
unchanged assets/img/icons-sd014756106.png
unchanged assets/img/icons_2x-s246af13964.png
WARNING on line 138 of /var/lib/gems/1.9.1/gems/toolkit-1.0.0/stylesheets/toolkit/_pe.scss: ".ie6 #block-block-3 .iconzzz" failed to @extend "%icons-image-map-fallback".
  The selector "%icons-image-map-fallback" was not found.
  This will be an error in future releases of Sass.
  Use "@extend %icons-image-map-fallback !optional" if the extend should be able to fail.

WARNING on line 138 of /var/lib/gems/1.9.1/gems/toolkit-1.0.0/stylesheets/toolkit/_pe.scss: ".ie7 #block-block-3 .iconzzz" failed to @extend "%icons-image-map-fallback".
  The selector "%icons-image-map-fallback" was not found.
  This will be an error in future releases of Sass.
  Use "@extend %icons-image-map-fallback !optional" if the extend should be able to fail.

WARNING on line 138 of /var/lib/gems/1.9.1/gems/toolkit-1.0.0/stylesheets/toolkit/_pe.scss: ".ie8 #block-block-3 .iconzzz" failed to @extend "%icons-image-map-fallback".
  The selector "%icons-image-map-fallback" was not found.
  This will be an error in future releases of Sass.
  Use "@extend %icons-image-map-fallback !optional" if the extend should be able to fail.

overwrite assets/css/style.css

Any ideas?
Thanks!

Warning message when wrapping SVG background image in breakpoint

I have SVG background working great but as soon as I wrap them in a breakpoint I get a "DEPRECATION WARNING".

DEPRECATION WARNING on line 108 of /Users/jeremy/.rvm/gems/ruby-2.0.0-p353/gems/toolkit-1.3.8/stylesheets/toolkit/_pe.scss:
  @extending an outer selector from within @media is deprecated.
  You may only @extend selectors within the same directive.
  This will be an error in Sass 3.3.
  It can only work once @extend is supported natively in the browser.

Here's the code that triggers that warning message.

.icon-mytest {
  @include breakpoint($bp-small, $no-query: true) {
    @include svg-background($icons, 'mytest');
  }
}

The code compiles correctly and everything works but I'm wondering how to get around it throwing an error each time and how to code this a bit differently.

I tried creating a mixin with "content: "TEST";" and calling it in the breakpoint rather than the SVG and I didn't receive any errors. And looking at the error message it points to Toolkit. I've tried moving the call to the SVG to a silent placeholder too with no luck.

For reference I'm running:
Compass 0.12.2
Sass 3.2.10
Toolkit-1.3.8
Breakpoint 2.0.7

Any help is appreciated.

Sprite and SVG background functions in 2.x

I've just updated to 2.x toolkit and noticed the sprite and SVG background mixins have been removed. Are available anywhere else? Can you suggest alternatives if there are better implementations out there?

Cannot install via Bower - color-schemer version

$ bower install sass-toolkit
bower cached        git://github.com/Team-Sass/toolkit.git#1.3.8
bower validate      1.3.8 against git://github.com/Team-Sass/toolkit.git#*
bower not-cached    git://github.com/Team-Sass/color-schemer.git#>=0.2.3
bower resolve       git://github.com/Team-Sass/color-schemer.git#>=0.2.3
bower cached        git://github.com/Snugug/Sassy-Strings.git#1.0.0
bower validate      1.0.0 against git://github.com/Snugug/Sassy-Strings.git#*
bower cached        git://github.com/Team-Sass/breakpoint.git#2.3.0
bower validate      2.3.0 against git://github.com/Team-Sass/breakpoint.git#>=2.0.2
bower ENORESTARGET  No tag found that was able to satisfy >=0.2.3

Additional error details:
No versions found in git://github.com/Team-Sass/color-schemer.git

Change the image path for SVG Background mixin

When using the "SVG Background" mixin I can't seem to get the URL to point to my image correctly when not inline and when using a PNG fallback. The sprites are generated but the paths are incorrect with my structure.

Everything seems to function correctly but my image path is different and I am getting background-image: url("/images/logos/menu/iq.svg?1384230060");

That is correct except I need the path to be "../images" rather than "/images".

I checked the config.rb and I have images_dir = "images" set which is correct. Is there any way to change that through the mixin or elsehwere?

Create and maintain a changelog

Good example: https://github.com/sparklemotion/nokogiri/blob/master/CHANGELOG.rdoc

str-replace($find, $replace, $input) not working

ahoy,

it seems like str-replace is not working. given the following input

$find: 'hello';
$replace: 'ahoy';
$input: 'hello Toolkit!';

@debug str-replace($find, $replace, $input);

the output is DEBUG: hello. basically, it seems to return the $find string no matter what.

my current Bundler versions are:

Using sass (3.2.12) 
Using compass (0.12.2) 
Using toolkit (1.3.8) 
Using bundler (1.3.5) 

thanks

Unable to resolve dependencies: sass requires listen (~> 1.1.0)

Sorry, for opening an issue actually I forget to use bundler. I installed toolkit using bundler now it's working fine.

Error on Toolkit install on Sass 3.2.13 and Compass 0.12.2 - Sass requires Listen ~1.1.0

I am running Sass 3.2.13 and Compass 0.12.2 on OSX 10.8.5. with Ruby 1.8.7 (2012-02-08 patchlevel 358) [universal-darwin12.0] and Gem 1.3.6 . I had a few gem issues especially with Modular Scale. Finally lead to a striped down and simple gem set up preceded with a clean install (Just installed Sass/Compass, Breakpoint and Modular Scale):

*** LOCAL GEMS ***

breakpoint (2.0.7)
chunky_png (1.2.9)
compass (0.12.2)
fssm (0.2.10)
modular-scale (2.0.0.alpha4)
sass (3.2.13)

@scottkellum already helped me over at the modular scale repo to figure things out. One of the only two remaining gems i need is Toolkit. I wanted to install the latest version of Toolki able to run with stable Sass and Compass, like i did with Breakpoint 2.0.7, until the new Sass and Compass versions go final . Unfortunately no matter which version i try to install (1.3.8 oder 1.1.0):

sudo gem install toolkit -v 1.x.x

i get:

ERROR:  Error installing toolkit:
    sass requires listen (~> 1.1.0, runtime)

Unable to install toolkit at all. :( Is there a way to get Toolkit running again on stable Sass and Compass? Cuz Listen seems a Sass related gem which wasn't installed along with stable Sass. Best regards Ralf

Update links on RubyGems.org

https://rubygems.org/gems/toolkit

Project links lead to an obsolete repo.

Is it possible to display a Picturefill image without any bars and span residuals with the intrinsic ratio mixin?

I've tried around quite a bit but somehow it is kind of tricky to apply the intrinsic ratio mixin to a picturefill markup. If I try a single image everything lays out fine.

<div class="ir">
    <img src="/img/fp-580x270.jpg" alt="fp">
</div>

.ir {
    @include intrinsic-ratio(2.14814815, 100%);
}
*, *:before, *:after {
outline: 1px solid red;
}
body,
html {
    height:100%;
    line-height:1.4;
    padding:0;
    margin:0;
    background:lightyellow;
}

.container {
     max-width:750px;
     margin: 2em auto 0 auto;
}
img {
    width:100%;
    max-width:100%;
    height: auto;
}

a clean display - a wrapping div the ratio mixin is applied to - all fine. But the problem is on the picturefill side you dont have a single wrapping element but subelements as well. I tried to bypass by adding the class name to the inner spans and ended up with an empty box

<span data-picture data-alt="fp">
    <span class="intrinsic" data-src="/img/fp-338x157.jpg"></span>
    <span class="intrinsic" data-src="/img/fp-507x236.jpg" data-media="(min-device-pixel-ratio: 1.5)"></span>
    <span class="intrinsic" data-src="/img/fp-676x315.jpg" data-media="(min-device-pixel-ratio: 2.0)"></span>
    <noscript>
        <img src="/img/fp-loesungen-1160x540.jpg" alt="fp">
    </noscript>
</span>

If I added the selector to the outer span and removed the intrinsic class from the inner, using an attribute selector .intrinsic[attr^=data-alt] for the mixin I ended up with an image displayed:

On the downside there is still an empty bar beneath the image in contrast to the "regular" image from the beginning as well as the outline for an empty span. Is there a way to display an Picturefill image in the same clean manner like the first image? Best regards Ralf

WARNING: The compass/css3/shared module has been deprecated

Got this warning:

WARNING: The compass/css3/shared module has been deprecated.
You can silence this warning by importing compass/css3/deprecated-support instead.
Please be aware that module will be removed in the next release.
         on line 1 of /home/yuvilio/.rvm/gems/ruby-2.0.0-p247@ruby247/gems/compass-core-1.0.0.alpha.16/stylesheets/compass/css3/\
_shared.scss
         from line 1 of /home/yuvilio/.rvm/gems/ruby-2.0.0-p247@ruby247/gems/toolkit-1.3.8/stylesheets/toolkit/_box-sizing.scss
         from line 4 of /home/yuvilio/.rvm/gems/ruby-2.0.0-p247@ruby247/gems/toolkit-1.3.8/stylesheets/toolkit/_border-box.scss
         from line 9 of /home/yuvilio/.rvm/gems/ruby-2.0.0-p247@ruby247/gems/toolkit-1.3.8/stylesheets/_toolkit.scss
         from line 1 of /home/yuvilio/ws/apps/laravel/lab/slider/public/sasslab/scss/styles.scss

Tested with this stack:

$ compass --version
Compass 1.0.0.alpha.17
Copyright (c) 2008-2014 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
$ sass --version
Sass 3.3.0.rc.2 (Maptastic Maple)
$ ruby --version
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux]
$

font-face mixin collides with identically named mixin from Compass, but with different syntax

Toolkit has a very useful font-face mixin, but if you're used to using Compass, you might be used to using their @import font-face([…]).

Problem is that the two different versions have different syntax, and if you have both Toolkit and Compass loaded, which one gets used is not quite clear.

So if I use this syntax (which would work with the font-face from Compass):

@include font-face("Fira Sans", font-files(
  "fira_sans/firasans-book.woff",
  "fira_sans/firasans-book.ttf"
), "fira_sans/firasans-book.eot");

I get this error from Toolkit:

error sass/print.scss (Line 36 of .vendor/bundle/ruby/2.0.0/gems/toolkit-2.6.0/stylesheets/toolkit/_fonts.scss: $map: (("url('../fonts/fira_sans/firasans-book.woff?1408878462')" "format('woff')"), ("url('../fonts/fira_sans/firasans-book.ttf?1408878462')" "format('truetype')")) is not a map for 'map-has-key')

I don't really know how this can be handled. Perhaps the Toolkit version could be modified to also work with Compass' font-files() structure?

Gem::ImpossibleDependenciesError when installing toolkit

I was unsure whether to raise this on this project, as it relates to out-of-sync dependencies across a number of team sass projects.

When I attempt to gem install toolkit in a clean/empty gemset I get:

ERROR:  While executing gem ... (Gem::ImpossibleDependenciesError)
    compass-0.12.2 requires sass (~> 3.1) but it conflicted:
  Activated sass-3.2.12 instead of (~> 3.3.0.rc.2) via:
    breakpoint-2.3.0, singularitygs-1.1.2, toolkit-1.3.7

Consider updating kickstart's box-sizing code.

Consider implementing the "slightly better" box sizing suggested by Chris Coyier.
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

I've run into the need to fight the inheritance for 3rd party libraries that expect box-sizing: content-box and this technique removed the need to define box-sizing: content-box multiple times for elements nested inside a larger component.