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

[css-grid] Decorative grid-cell pseudo-elements #499

Open
tabatkins opened this Issue Sep 19, 2016 · 8 comments

Comments

Projects
None yet
9 participants
@tabatkins
Member

tabatkins commented Sep 19, 2016

@jensimmons proposes adding a grid-cell pseudo so you can add (responsive) decorative elements to grids without having to add empty elements to your page.

Syntax like:

#grid::grid-area(1 / 2 / 3 / 4) {
  background-color: red; /* etc */
  /* grid-positioning properties are blacklisted */
}

Also some way of controlling whether or not that takes up auto-flow space. Might want to reserve space or not. Can we base this on 'content' or something? Or do we need a new property?

@jensimmons

This comment has been minimized.

Show comment
Hide comment
@jensimmons

jensimmons Sep 19, 2016

The slides from the presentation I just gave are at: https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016

And actually, the syntax above is not what I proposed. This is what I proposed:

@region #grid-container foobar {
  grid: 3 / 1 / 4 / 2; 
}
foobar {
  background: yellow;
}

jensimmons commented Sep 19, 2016

The slides from the presentation I just gave are at: https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016

And actually, the syntax above is not what I proposed. This is what I proposed:

@region #grid-container foobar {
  grid: 3 / 1 / 4 / 2; 
}
foobar {
  background: yellow;
}
@MatsPalmgren

This comment has been minimized.

Show comment
Hide comment
@MatsPalmgren

MatsPalmgren Sep 19, 2016

If a pseudo-element solves this use case then why not allow multiple ::before/::after instead?

#grid-container::before(1) {
  grid: 3 / 1 / 4 / 2;
  background: yellow;
}
#grid-container::before(2) { ... }
etc

which would be useful for all elements, not just grid.

MatsPalmgren commented Sep 19, 2016

If a pseudo-element solves this use case then why not allow multiple ::before/::after instead?

#grid-container::before(1) {
  grid: 3 / 1 / 4 / 2;
  background: yellow;
}
#grid-container::before(2) { ... }
etc

which would be useful for all elements, not just grid.

@fantasai

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Sep 19, 2016

Contributor

@jensimmons The syntax Tab proposes here fits better into the CSS model, imho. Though I can see the case for wanting to have a name for the thing.

@MatsPalmgren Multiple pseudo-elements are a bit more problematic wrt cascading usability imho. It's easy to lose track of some and then have weird stuff appearing in your document or have styling pulled in from some rule that you have neglected to overrde. Tying it to grid and limiting it this way makes it easier to clear out and avoid such problems.

Contributor

fantasai commented Sep 19, 2016

@jensimmons The syntax Tab proposes here fits better into the CSS model, imho. Though I can see the case for wanting to have a name for the thing.

@MatsPalmgren Multiple pseudo-elements are a bit more problematic wrt cascading usability imho. It's easy to lose track of some and then have weird stuff appearing in your document or have styling pulled in from some rule that you have neglected to overrde. Tying it to grid and limiting it this way makes it easier to clear out and avoid such problems.

@gregwhitworth

This comment has been minimized.

Show comment
Hide comment
@gregwhitworth

gregwhitworth Sep 20, 2016

Contributor

This seems like a merging of @apply and CSS being able to pierce the shadow DOM. I agree that the author should be able to style area boxes, but I'm not entirely sure we should be solve this problem specifically focused on grid. I think it would be best, and I know we've tried and failed, to provide a generalized solution for styling boxes that exist but don't have an element associated with them that is targetable via general selectors.

Contributor

gregwhitworth commented Sep 20, 2016

This seems like a merging of @apply and CSS being able to pierce the shadow DOM. I agree that the author should be able to style area boxes, but I'm not entirely sure we should be solve this problem specifically focused on grid. I think it would be best, and I know we've tried and failed, to provide a generalized solution for styling boxes that exist but don't have an element associated with them that is targetable via general selectors.

@SelenIT

This comment has been minimized.

Show comment
Hide comment
@SelenIT

SelenIT Dec 23, 2016

Collaborator

I believe that having a grid-specific way to style grid area boxes would be useful. Grid areas differ from other virtual/dynamic CSS boxes (like line boxes, column boxes in multicolumn layout etc.) because they 1) definitely exist regardless there is any content associated with them, 2) have clear mechanism to address them (by name, line numbers etc.) and 3) clear algorithm to calculate their size. Essentially we can use the same logic as for placing a ::before pseudo under the hood, though the syntax proposed by Tab looks less 'hacky' to me (what we usually want is to style the "virtual container" itself, not to place something there just to emulate this, which looks more like a workaround if there is no more direct way to do it). But pesonally I would be happy with multiple pseudos either.

Collaborator

SelenIT commented Dec 23, 2016

I believe that having a grid-specific way to style grid area boxes would be useful. Grid areas differ from other virtual/dynamic CSS boxes (like line boxes, column boxes in multicolumn layout etc.) because they 1) definitely exist regardless there is any content associated with them, 2) have clear mechanism to address them (by name, line numbers etc.) and 3) clear algorithm to calculate their size. Essentially we can use the same logic as for placing a ::before pseudo under the hood, though the syntax proposed by Tab looks less 'hacky' to me (what we usually want is to style the "virtual container" itself, not to place something there just to emulate this, which looks more like a workaround if there is no more direct way to do it). But pesonally I would be happy with multiple pseudos either.

@morganfeeney

This comment has been minimized.

Show comment
Hide comment
@morganfeeney

morganfeeney Feb 16, 2017

Use case:
a designer / developer / designoper is able to create a grid overlay which would act as design reference. Applying it using CSS could be as suggested in @tabatkins opening comment, a pseudo-element but with super Grid powers. This benefit of an overlay can then be gained by:

  • Translating a design from a program like Sketch or Illustrator to the browser with accuracy.
  • Being creative whilst using the browser as a device for laying-out content, new ideas can be applied once the design has been translated, through experimentation.

Otherwise grid alignment, and understanding the possible variations using a grid, is essentially 'by eye'. Other than being able to imagine the structure of a grid layout, or refer to a piece of paper with a grid drawn out on it whilst working, there inevitably needs to be a way to display a grid of this kind.

It would be also very cool if I could use Firefox's grid inspector to enable the view of this reference grid and allow me to use it in a way similar to how I have created my crude example here: https://interiorsystem.co.uk/ — toggle the overlay. Also if using Firefox you'll be able to see there is a difference between the grid of what is inspected and the reference, which is used to apply the design to.

Inspected grid
Note that when you inspect an implicit grid the cells fit the content.
image

Design reference
This example is agnostic of whether a grid is implicit or not.
image

This idea is not new, there are reference books which teach the use of grid layout, I haven't seen a single book that doesn't show a grid overlay as part of the process. Screen shots from a PDF on the book Grid Systems in Graphic Design written by: Josef Müller-Brockmann to demonstrate.
image
image

morganfeeney commented Feb 16, 2017

Use case:
a designer / developer / designoper is able to create a grid overlay which would act as design reference. Applying it using CSS could be as suggested in @tabatkins opening comment, a pseudo-element but with super Grid powers. This benefit of an overlay can then be gained by:

  • Translating a design from a program like Sketch or Illustrator to the browser with accuracy.
  • Being creative whilst using the browser as a device for laying-out content, new ideas can be applied once the design has been translated, through experimentation.

Otherwise grid alignment, and understanding the possible variations using a grid, is essentially 'by eye'. Other than being able to imagine the structure of a grid layout, or refer to a piece of paper with a grid drawn out on it whilst working, there inevitably needs to be a way to display a grid of this kind.

It would be also very cool if I could use Firefox's grid inspector to enable the view of this reference grid and allow me to use it in a way similar to how I have created my crude example here: https://interiorsystem.co.uk/ — toggle the overlay. Also if using Firefox you'll be able to see there is a difference between the grid of what is inspected and the reference, which is used to apply the design to.

Inspected grid
Note that when you inspect an implicit grid the cells fit the content.
image

Design reference
This example is agnostic of whether a grid is implicit or not.
image

This idea is not new, there are reference books which teach the use of grid layout, I haven't seen a single book that doesn't show a grid overlay as part of the process. Screen shots from a PDF on the book Grid Systems in Graphic Design written by: Josef Müller-Brockmann to demonstrate.
image
image

@o-t-w

This comment has been minimized.

Show comment
Hide comment
@o-t-w

o-t-w Nov 21, 2017

I have used grid on 3 websites and have need to selectively apply borders based on the row/column the item is in (e.g. border-bottom but not on items in the bottom row).

You can see an example here: https://www.nature.com/nplants/

In both cases I used overflow: hidden. It worked well but feels hacky. Any potential solution for that? e.g. ability to select elements by the column or row they are in? Using current nth-child solutions can get very complicated!

o-t-w commented Nov 21, 2017

I have used grid on 3 websites and have need to selectively apply borders based on the row/column the item is in (e.g. border-bottom but not on items in the bottom row).

You can see an example here: https://www.nature.com/nplants/

In both cases I used overflow: hidden. It worked well but feels hacky. Any potential solution for that? e.g. ability to select elements by the column or row they are in? Using current nth-child solutions can get very complicated!

@g12n

This comment has been minimized.

Show comment
Hide comment
@g12n

g12n Dec 22, 2017

Hi @jensimmons ! I love the idea! It tackles a lot of current problems. I am currently writing a longer comment about the implications for paged media and it's relations to flexbox, grid and multicolumn-layouts. But before i can finish it, I would like to understand your proposal a little bit better.

In your presentation on slide 38 you use the grid property to place an grid-element in its grid-container. Is this new? Or did you meant grid-area?

Using my current grasp of grids, I would write something like this:

#grid-container{
    grid: repeat(3, 1fr) / repeat(3, 1fr);
}

@region #grid-container foobar {
  grid-area: 3 / 1 / 4 / 2; 
}

foobar {
  background: yellow;
}

Other examples

Use of named grid-template-areas defined in the grid container:

@region #grid-container foobar {
  grid-area: left; 
}

Selection of a whole column to style:

@region #grid-container left {
  grid-column: 1 2; 
}

Relation to named grid-template-areas

How does your proposal relate to grid-template-areas?
It feels to me like a second mechanism to name them. With the added bonus, that this way named areas could overlap.

Would something like this work:

@region #grid-container foobar {
  grid-area: 3 / 1 / 4 / 2; 
}
.childelement {
    grid-area: foobar
}

Though then I would suggest @area or @template-area for the keyword.

Maybe a different selector-syntax?

I am concerned about this part:

foobar {
  background: yellow;
}

Simple element-selector syntax for a named grid-area seems dangerous to me.

Because changes in the HTML-Spec might introduce elements that are identically named to areas named by CSS-authors and break the page. I guess that's the reason, why we have the two dashed at the beginning of css-custom properties.

Maybe a Pseudo-Selector, At-Rule or something similar to the custom-property syntax would work better.

I like the close alignment to the @keyframes syntax. But I am not sure about it. Keyframe Animations are quite global – a bit like custom-properties. Grid-Areas on the other hand are tightly bound to the Grid Container itself.

Can you point me to additional resources, where I can learn the formal definitions and differences between these mechanisms. Especially the formal difference between pseudo-selectors and at-rules are quite foggy to me at the moment.

g12n commented Dec 22, 2017

Hi @jensimmons ! I love the idea! It tackles a lot of current problems. I am currently writing a longer comment about the implications for paged media and it's relations to flexbox, grid and multicolumn-layouts. But before i can finish it, I would like to understand your proposal a little bit better.

In your presentation on slide 38 you use the grid property to place an grid-element in its grid-container. Is this new? Or did you meant grid-area?

Using my current grasp of grids, I would write something like this:

#grid-container{
    grid: repeat(3, 1fr) / repeat(3, 1fr);
}

@region #grid-container foobar {
  grid-area: 3 / 1 / 4 / 2; 
}

foobar {
  background: yellow;
}

Other examples

Use of named grid-template-areas defined in the grid container:

@region #grid-container foobar {
  grid-area: left; 
}

Selection of a whole column to style:

@region #grid-container left {
  grid-column: 1 2; 
}

Relation to named grid-template-areas

How does your proposal relate to grid-template-areas?
It feels to me like a second mechanism to name them. With the added bonus, that this way named areas could overlap.

Would something like this work:

@region #grid-container foobar {
  grid-area: 3 / 1 / 4 / 2; 
}
.childelement {
    grid-area: foobar
}

Though then I would suggest @area or @template-area for the keyword.

Maybe a different selector-syntax?

I am concerned about this part:

foobar {
  background: yellow;
}

Simple element-selector syntax for a named grid-area seems dangerous to me.

Because changes in the HTML-Spec might introduce elements that are identically named to areas named by CSS-authors and break the page. I guess that's the reason, why we have the two dashed at the beginning of css-custom properties.

Maybe a Pseudo-Selector, At-Rule or something similar to the custom-property syntax would work better.

I like the close alignment to the @keyframes syntax. But I am not sure about it. Keyframe Animations are quite global – a bit like custom-properties. Grid-Areas on the other hand are tightly bound to the Grid Container itself.

Can you point me to additional resources, where I can learn the formal definitions and differences between these mechanisms. Especially the formal difference between pseudo-selectors and at-rules are quite foggy to me at the moment.

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