New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change the color of lost-utility: edit #127

Closed
AleksejDix opened this Issue May 23, 2015 · 13 comments

Comments

Projects
None yet
4 participants
@AleksejDix

AleksejDix commented May 23, 2015

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

like it was in the last versions

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons May 25, 2015

Contributor

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.

Contributor

corysimmons commented May 25, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sdale-fevo

sdale-fevo Jan 10, 2016

+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:

screen shot 2016-01-10 at 3 12 08 pm

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

I was hoping for something like this:

screen shot 2016-01-10 at 3 08 34 pm

Codepen

sdale-fevo commented Jan 10, 2016

+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:

screen shot 2016-01-10 at 3 12 08 pm

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

I was hoping for something like this:

screen shot 2016-01-10 at 3 08 34 pm

Codepen

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 11, 2016

Owner

@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?

Owner

peterramsing commented Jan 11, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 11, 2016

Contributor

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 :)

Contributor

corysimmons commented Jan 11, 2016

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

This comment has been minimized.

Show comment
Hide comment
@sdale-fevo

sdale-fevo Jan 12, 2016

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:

screen shot 2016-01-11 at 8 31 49 pm

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


screen shot 2016-01-11 at 8 44 33 pm


screen shot 2016-01-11 at 8 44 23 pm


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

sdale-fevo commented Jan 12, 2016

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:

screen shot 2016-01-11 at 8 31 49 pm

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


screen shot 2016-01-11 at 8 44 33 pm


screen shot 2016-01-11 at 8 44 23 pm


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

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jan 12, 2016

Owner

@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?

Owner

peterramsing commented Jan 12, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 13, 2016

Contributor

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.

Contributor

corysimmons commented Jan 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@sdale-fevo

sdale-fevo Jan 13, 2016

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

sdale-fevo commented Jan 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Jan 13, 2016

Contributor

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

Contributor

corysimmons commented Jan 13, 2016

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

@peterramsing peterramsing added this to the 7.x milestone Jan 14, 2016

@peterramsing peterramsing removed this from the 7.x milestone May 22, 2016

@peterramsing peterramsing added this to the v7.1.0 milestone Jul 6, 2016

@peterramsing peterramsing self-assigned this Jul 6, 2016

@peterramsing peterramsing changed the title from change the color of lost-utility: edit to change the color of lost-utility: edit Jul 6, 2016

@peterramsing peterramsing referenced this issue Aug 12, 2016

Merged

Add custom color to lost-utility: edit #322

2 of 2 tasks complete
@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Aug 12, 2016

Owner

this is now a pull request slated for v7.1.0

Owner

peterramsing commented Aug 12, 2016

this is now a pull request slated for v7.1.0

@peterramsing peterramsing removed this from the v7.1.0 milestone Aug 12, 2016

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing
Owner

peterramsing commented Aug 29, 2016

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

@AleksejDix

This comment has been minimized.

Show comment
Hide comment
@AleksejDix

AleksejDix Sep 2, 2016

Nice. Thank you very much

AleksejDix commented Sep 2, 2016

Nice. Thank you very much

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Sep 2, 2016

Owner

@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~

Owner

peterramsing commented Sep 2, 2016

@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~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment