change the color of lost-utility: edit

[AleksejDix]

would be nice to change the color of the edit mode.

like it was in the last versions

[corysimmons]

Yeah I agree this would be nice. It will require breaking edit out to its own command and also adding a lot of JS color functions.

[sdale-fevo]

+1
This would be a super useful utility to debug while learning how Lost works, particularly the columns + gutters.

For example, I made this simple codepen while trying to understand how offset works, enabled the utility, saw this:

This unfortunately doesnt show the columns, nor gutters. Or maybe I'm missing something?

I was hoping for something like this:

Codepen

[peterramsing]

@sdale-fevo This is a use case I hadn't thought of. Thanks for the input! I'll look to see how much effort this will be and see when we could slate this. Any chance you'd want to submit a PR for this yourself?

[corysimmons]

Is there some cool way to make these faux grids now? Last time I checked it was a gradient and had rounding issues that made it inaccurate.

I made this thingy a long time ago https://github.com/corysimmons/grid-overlay :)

[sdale-fevo]

hmm, this is what I iterated on today, lemme know if worth to submit.
We're using a different number of columns for different breakpoints.

S: 4 col
Md: 8 col
Lg: 12 col
XL: 16 col

I've used Enquire.js in our codebase to detect changes to media query size (for debugging/dev, not in production), then on change of our defined breakpoints, I'm injecting the number of Div's necessary into a helper class container .bpoints-helper--column-overlay. One .grid-col div for each column defined for that bpoint.

The ~ for my var declarations are .LESS related btw

/*  
  Adapted from:
    -- Codepen: http://codepen.io/ericrasch/pen/HzoEx
    -- Source:  http://blog.scur.pl/2012/06/variable-media-queries-less-css
*/

@bp-sm-size:     ~"0rem";
@bp-md-size:     ~"35.5rem";
@bp-lg-size:     ~"52rem";
@bp-xl-size:     ~"60rem";

@bp-sm:          ~"only screen and (min-width: @{bp-sm-size} )";
@bp-md:          ~"only screen and (min-width: @{bp-md-size} )";
@bp-lg:          ~"only screen and (min-width: @{bp-lg-size} )";
@bp-xl:          ~"only screen and (min-width: @{bp-xl-size} )";

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio:  1.5)",
              ~"only screen and (min--moz-device-pixel-ratio:     1.5)",
              ~"only screen and (-o-min-device-pixel-ratio:       3/2)",
              ~"only screen and (min-device-pixel-ratio:          1.5)";


@sm-columns: 4;
@md-columns: 8;
@lg-columns: 12;
@xl-columns: 16;

// http://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
@highest-z-index: 2147483647;

.bpoints-helper--size { 
  position: absolute;

  z-index: @highest-z-index;  

  right: 0;
  bottom: 0;

  &:after { 
    display: inline-block;
    font-family: "Arial"; 
    font-weight: bold;
    font-size: 1rem; 
    color: white;
    width: 12rem;
    padding: 0.25rem 1rem;

    @media @bp-sm {
      content: "SM: @{bp-sm-size} : @{sm-columns} col"; 
      background: green;
    }

    @media @bp-md {
      content: "MD: @{bp-md-size} : @{md-columns} col";  
      background: blue;
    }

    @media @bp-lg {
      content: "LG: @{bp-lg-size} : @{lg-columns} col"; 
      background: crimson;
    }

    @media @bp-xl {
      content: "XL: @{bp-xl-size} : @{xl-columns} col"; 
      background: red;
    }
  }
}


.bpoints-helper--column-overlay {
  lost-flex-container: row;

  position: absolute;
  top: 0;
  width: 100%;

  .grid-col { 
    @media @bp-sm { lost-column: 1/@sm-columns; }
    @media @bp-md { lost-column: 1/@md-columns; }
    @media @bp-lg { lost-column: 1/@lg-columns; }
    @media @bp-xl { lost-column: 1/@xl-columns; }

    display: block;
    background: red; 
    opacity: 0.2;
    height: 100vh;

    // one less than the highest z-index possible, so the bpoint helper display shows on top
    z-index: @highest-z-index - 1;  
   }
}

then in my template, I'm doing:

<div class="bpoints-helper--size"></div>
<div class="bpoints-helper--column-overlay"></div>

<!--  other templaty things .... -->

Lastly, in my .js:

function resetColumnsForThisBreakpoint(numColumns) {
    console.log('removing debugging columns');
    $('.bpoints-helper--column-overlay div').remove();

    for(var i = 0; i < numColumns; i++){
        $( ".bpoints-helper--column-overlay" ).prepend( "<div class=grid-col></div>" );
    }

}

enquire.register("only screen and (min-width:0)", function() {
    console.log('sm: 0em');
    resetColumnsForThisBreakpoint(4)
});

enquire.register("only screen and (min-width:35.5)", function() {
    console.log('md: 35.5em');
    resetColumnsForThisBreakpoint(8)
});

enquire.register("only screen and (min-width:52em)", function() {
    console.log('large : 52em');
    resetColumnsForThisBreakpoint(12)
});

enquire.register("only screen and (min-width:60em)", function() {
    console.log('xl : 60em');
    resetColumnsForThisBreakpoint(16)
});

Close, in XL, looks something like this:

When I go down to lower bpoints, I lose "sync, I think related to how I structured my media queries.








Is this too much non Lost specific stuff to submit a PR?

One issue with this approach is that the # of columns for each breakpoint have to match from CS <--> JS, which is brittle. I'd prefer to have the col # and sizes specified once, but not sure how to do this..

Should probably look at Bourbon/Neat source..

@corysimmons They have off by one errors too in their debugger column display, it's a loose guide, I wouldnt worry about getting it pixel perfect.

=: s

[peterramsing]

@sdale-fevo This looks like some cool code but it might be a bit outside of the scope of Lost. I think what would be best is to enhance the current lost-utility: edit; to receive another parameter for color.

foo {
  lost-utility: edit #fff;
}

and

foo {
  lost-utility: edit;
  lost-utility-color: #fff;
}

Thoughts?

[corysimmons]

I agree with @peterramsing

Cool grid thing, and maybe worth doing a blog post on, but I think it's a bit outside Lost's scope as well.

@peterramsing I like the first syntax but don't really think we need a lost-utility-color (might be overkill).

Here, I made something that will provide full-height columns lined up perfectly with their columns: http://codepen.io/corysimmons/pen/jWLbZp?editors=110

The only caveat is if they are using :before or translateZ on those particular columns which is probably pretty rare.

[sdale-fevo]

Thanks for the feedback, I figured.. also thought it might be useful to someone reading this issue..

Re: the technique in the Codepen - do you forsee any issues with using position: fixed for this? I thought there are a lot of issues with it for mobile, so I generally stay away..

Looking forward to this add ..

=: s

[corysimmons]

Didn't read the article but it seems like those mobile issues are mostly for older mobile browsers.

[peterramsing]

this is now a pull request slated for v7.1.0

[peterramsing]

This is now in version 7.1.0.
https://github.com/peterramsing/lost/releases/tag/v7.1.0

[AleksejDix]

Nice. Thank you very much

[peterramsing]

@AleksejDix Have you used it and is it working well?

I think that I'm going to add the ability to just use some basic keywords such as the primary colors so that you don't have to create and rgb if you want to use it.

Let me know how it's performing and if you have any additional feedback. Thanks~