search

nodox / gatsby-theme-tessellate

Tessellate theme from Gatsby Manor
https://gatsbymanor.com/themes/tessellate
1 stars 1 forks source link

Responsive styles doesn't work #2

Open Poggen opened 6 years ago

Poggen commented 6 years ago

None of grid based responsive classes, e.g. 12u(narrow) seems to work.

nodox commented 6 years ago

@Poggen thanks for finding this issue. If you could investigate this issue a bit and make a pull request that would be most useful! Our team is currently handling a new release for jay as well adding more themes to the gallery. Your help would be much appreciated!

Poggen commented 6 years ago

Would've loved to do that but I've been trying to isolate the problem for a couple of hours to no avail and I'm on the verge of giving up. First time using skeleton in a project and not really comfortable with what's going on under the hood.

nodox commented 6 years ago

First time using skeleton in a project and not really comfortable with what's going on under the hood.

What do you mean by this?

Poggen commented 6 years ago

The tesselate theme uses the skel.io (v3.0.2-dev) – never used it before. Specifically, it seems like something disables media queries for the cell classes from being generated: https://github.com/gatsbymanor/gatsby-theme-tessellate/blob/63ad296cf1a002a55ba47cdfa08c8a018d0d8c50/styles/libs/_skel.scss#L256-L258 The issue is not present in the demo version of HTML5UP version of Tessellate, so somehow their compiled css differs from the one in the manor theme. However, the source code in scss looks identical, which leads me to believe that these two projects have been compiled differently?

Poggen commented 6 years ago

Any idea here?

nodox commented 6 years ago

TL;DR The short answer is I'm not sure what is going on because I don't own that CSS ☚ī¸ .

Most of these themes are a ReactJS port of the HTML5UP themes. Therefore the CSS/SASS was not created by me. In order to solve the problem you'll have to continue to dig into the SCSS.

Since the framework is a bit foreign to both of us, I'd rather have the plain CSS that comes with the downloaded theme. The download pack provides both the SASS and CSS version. In this regard we don't have to worry about weird logic functions in our SASS. The simplicity might make debugging the source easier. But usually these bugs means that a small piece is from my porting over.

Another option would be to add an override stylesheet that makes the necessary components responsive. PR's are welcome! 😅

Thanks for reaching out @Poggen 😄

jlietart commented 6 years ago

Hi.

Thanks for the great work !

I have the same problem here and i think i found the cause. The generated CSS by gatsby is removing the backslash in the class names. For example 12u(narrow) is processed as 12u2428narrow29but it should be 12u\28narrow\29. If you replace it directly in your code it just works !

But how can we fix the problem ?