Idea: debug mode

[phenomnomnominal]

It'd be pretty cool to be able to enable a debug mode that adds background colors to the flex containers so you can see what's going on.

[ThomasBurleson]

@phenomnomnominal - Love this idea!

[ggranum]

I use the following SCSS block:

.debug{
    [fxFlex]:nth-child(10n+1) { border: 1px solid rgba(128, 128, 128, 0.5); }
    [fxFlex]:nth-child(10n+2) { border: 1px solid  rgba(255, 0, 0, 0.5); }
    [fxFlex]:nth-child(10n+3) { border: 1px solid  rgba(255, 165, 0, 0.5); }
    [fxFlex]:nth-child(10n+4) { border: 1px solid  rgba(255, 255, 0, 0.5); }
    [fxFlex]:nth-child(10n+5) { border: 1px solid  rgba(0, 128, 0, 0.5); }
    [fxFlex]:nth-child(10n+6) { border: 1px solid  rgba(0, 0, 255, 0.5); }
    [fxFlex]:nth-child(10n+7) { border: 1px solid  rgba(128, 0, 128, 0.5); }
    [fxFlex]:nth-child(10n+8) { border: 1px solid  rgba(238, 130, 238, 0.5); }
    [fxFlex]:nth-child(10n+4) { border: 1px solid  rgba(169, 169, 169, 0.5); }
    [fxFlex]:nth-child(10n+9) { border: 1px solid  rgba(139, 0, 0, 0.5); }
    [fxFlex]:nth-child(10n+10) {border: 1px solid  rgba(0, 0, 139, 0.5); }
    } 

Just drop the .debug in front of each line to use it in CSS. Background colors were a bit too messy for my tastes, but obviously you can modify it however you like :~)

Add the debug class to whatever container you want to debug... and good luck.