Move IE Grid documentation into a separate file

[ghost]

trafficstars

Hi everyone, Maybe this will be a duplicate issue (I already searched in the closed issues, but I don't foud anything).

Take this piece of code (grid: no-autoplace)

  .l-values-grid {
    grid-gap: 3.5rem 2.5rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas. "value-1 value-2 value-3"
    "value-4 value-5 value-6";
  }
  
.l-values-grid>*:nth-child(1) {
  grid-area: value-1;
}

.l-values-grid>*:nth-child(2) {
  grid-area: value-2;
}

.l-values-grid>*:nth-child(3) {
  grid-area: value-3;
}

.l-values-grid>*:nth-child(4) {
  grid-area: value-4;
}

.l-values-grid>*:nth-child(5) {
  grid-area: value-5;
}

.l-values-grid>*:nth-child(6) {
  grid-area: value-6;
}
  
@media screen and (min-width: 1200px) {

  .l-values-grid {
    grid-gap: 5rem 6.5rem;
    grid-template-columns: repeat(3, 1fr);
  }

}

The first part of the code, out of the media query is translated well with the right declarations ecc. But the second part of the code is a little bit a problem where the final css output prefixed is:

@media screen and (min-width: 1200px) {
  .l-values-grid {
    grid-gap: 3.5rem 2.5rem;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

Instead when we add a duplicated grid-area all work good. Why autoprefixer cannot "inherit" the grid area declaration?

[ai]

Do you want to send PR with grid area declaration inheriting?

[ghost]

What a fast response 😅, Unfortunately, I don't know a lot about Js, for that I can't help a lot. Sorry 😥

[ai]

The reason why we do not copy is that it is hard to do it for all cases.

For instance:

.grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 900px) {
  grid-template-columns: repeat(4, 1fr);
}

.grid.is-big {
  grid-template-columns: repeat(5, 1fr);
}

@media (min-width: 1200px) {
  grid-gap: 3.5rem 2.5rem;
  // we need to copy from (min-width: 900px) and dublicate .grid.is-big
}

Because IE 11 dies and the CSS community doesn’t give a proper support for JS tools, it is very unlikely that somebody will write this complex logic.

Do you have an idea of how we can improve docs to make it clear that you must to duplicate grid-template-columns?

[ghost]

Damn to Ie. This appear very difficult.

Mmmmmm....currently also, We need to consider that for support Ie (in both autoplacement mode and no-autoplacement) things are already a little bit complicated. For that reason maybe (in addition to the CSS tricks article) It will be useful to shift the grid Ie documentation in a separate file.md with more examples and explanations about logics, properties and so on.

[ai]

@Unknow-max hm, I like the idea.

Do you want to try and send a pull request?

[ghost]

Well, I can give it a try (in the next 3-4 days I can Pr), but let's recap a moment. We Will cut the part related to Ie grid support for the readme MD (maybe including a link the separate doc that says "Hey, if you want to know about Grid Ie, see here", and then including in the root folder a file called "grid-ie-support.md" where we will explain a little bit better the actual support state. do you think it is okay?

[ai]

I think we can try. In contrast with other questions and topics of README.md, using Grid for IE is a very special case, when you may prefer separate docs.

@Dan503 what do you think if we will move Grid IE docs to separated files with many links from main README.md to have docs focused on Grid?

[Dan503]

Yeah I think it's a pretty good idea.

The Grid portion of autoprefixer is a huge component that isn't relevant to the rest of autoprefixer so it makes sense to have separate readme files for it.

[ghost]

Ok, little update guys! Tomorrow I can start working on the documentation, shifting the Ie docs in a separate file, with more examples and detailed examplanations. I will study a little bit deeper the grid layout for that, and in the next 4-5 days I will be ready for Pr.

[Dan503]

Cool, thanks for doing this 😊 I'll review it when you're done.

I was the one that wrote the CSS Grid in IE series on CSS Tricks and probably most of the Grid related Autoprefixer documentation.

I recommend installing the Markdown All in One VS Code extension to make working on markdown files a bit easier.

[ghost]

Ok, This is the first (a lot beta) draft, see here. I need to fix the indentation, css class names and other small stuff, @Dan503 and @ai can you take a look? If you think that something is missing, tell me.

[ai]

The new docs look much focused. It was a really good idea.

Can we simplify example (with 2-3 grid cells, instead of 4) and use some real cases like menu main? It will make examples smaller.

[ghost]

Done! I wil review quickly again the documentation tomorrow, and after that I think it will be ready for Pr, if you noticed something else which can be improved , tell me.

[ai]

Send a PR, it will be easier for me to comment there

[Dan503]

Sorry, I've been really busy this week.

I'll try and take a look at this over the weekend.

[Dan503]

@ai I had a look at the Financial Times and Yandex websites. I don't see a single scrap of CSS Grid code in any of the style sheets :/

Do we have any valid examples of major websites using IE Friendly CSS Grid code that we can link to? Can you ask on Twitter maybe?

[Dan503]

@Unknow-max I'm reviewing it. There is a lot of broken English in it that needs fixing.

I've checked out a copy of your branch and I'm making edits to it, but it will probably take a while.

Also, why did you feel the need to try and explain the "no-autoplace" option so heavily? We primarily want developers to get used to using Autoprefixer with auto-placement turned on. The only reason we have a "no-autoplace" option is for the sake of backwards compatibility.

I'm refocusing that section to explain what Autoprefixer is actually doing when you turn auto-placement support on.

[Dan503]

I'm no-where near done yet but this is what I've done so far: Dan503/Grid-documentation-update

[Dan503]

Thanks @Unknow-max for making a start on this 😊

[ghost]

@Unknow-max I'm reviewing it. There is a lot of broken English in it that needs fixing.

I've checked out a copy of your branch and I'm making edits to it, but it will probably take a while.

Also, why did you feel the need to try and explain the "no-autoplace" option so heavily? We primarily want developers to get used to using Autoprefixer with auto-placement turned on. The only reason we have a "no-autoplace" option is for the sake of backwards compatibility.

I'm refocusing that section to explain what Autoprefixer is actually doing when you turn auto-placement support on.

Ok! Thank you very much!

Also, why did you feel the need to try and explain the "no-autoplace" option so heavily? We primarily want developers to get used to using Autoprefixer with auto-placement turned on. The only reason we have a "no-autoplace" option is for the sake of backwards compatibility.

Well when I first saw the documentation I noticed that there is'nt any good documentation about the no-autoplacement option, ok, maybe is't important as the autoplacement option, but hey, it still remain an autoprefixer option. I think that in a documentation we need to leave space for all the options in equal measure, without leaving anything just because "We primarily want developers to get used to using Autoprefixer with auto-placement turned on". If the want to use autoplacement, they will use autoplacement, if they want to use no-autoplacement, they will use no-autoplacement. This is that I think!

[ghost]

Thanks @Unknow-max for making a start on this 😊

Ok, no problem, I pass the baton to you! Good Luck!

[Dan503]

Well when I first saw the documentation I noticed that there is'nt any good documentation about the no-autoplacement option, ok, maybe is't important as the autoplacement option, but hey, it still remain an autoprefixer option.

Ok, i get that. We can explain "no-autoplace" a bit more but the focus should primarily be on the "autoplace" setting.

[ghost]

Good, but noticed something: I the css tricks article you have mentioned only the grid no-autoplace option. This is the main reason for my focus on that option. Think about the normal flow about the developer that need to support Ie grid: He search on google, find your article on css tricks where you mentioned the grid no-autoplace and after that he go on the autoprefixer repo where the main focus in on the autoplace option. It can be a little bit confusing.

[Dan503]

Oh I didn't realise the Grid article on CSS Tricks was focusing on "no-autoplace". I can probably fix that.

[Dan503]

I haven't forgotten about this.

I'm just very busy at the moment and this is a pretty low priority for me.

I'll probably get around to working on this again in a few weeks.

[Dan503]

Also can we rename this issue "Move Grid documentation into a separate file"?

The current issue name doesn't align with what the actual work for the issue is anymore.

[Dan503]

the css tricks article you have mentioned only the grid no-autoplace option. This is the main reason for my focus on that option. Think about the normal flow about the developer that need to support Ie grid: He search on google, find your article on css tricks where you mentioned the grid no-autoplace and after that he go on the autoprefixer repo where the main focus in on the autoplace option. It can be a little bit confusing.

@Unknow-max Thanks for pointing that out. The articles were written before the autoplace option existed and I never went back to update them.

I've gone through all the CSS Tricks articles now and have posted updates to parts that I felt were outdated. The CSS Tricks articles now place a lot more emphasis on the new "autoplace" setting.

I'll get back into updating the Autoprefixer Grid documentation either tomorrow or maybe next weekend.