menu
Channels
Team

gatsby-theme-blog knows too much about style

July 24, 2019 at 7:27pm

gatsby-theme-blog knows too much about style

July 24, 2019 at 7:27pm (Edited 1 year ago)
The work on themes is outstanding. Everything I'm about to say does not negate that. ;)
I'd prefer that gatsby-theme-blog have no opinion about styling. I believe it should (a) spit out pure markup and (b) assume no layout, no decoration, no css whatsoever.
It could, I suppose, optionally import a theme which provides look and feel. As in options: { style: on/off }
The problem is that gatsby-theme-blog is opinionated about how style should be applied -- theme-ui, typography, etc. That may be optimal but it limits the use-cases for which gatsby-theme-blog could otherwise be applied. Everyone who would benefit from use of this theme package will come to it from a unique context. Some of those contexts will have a different opinion about how to apply style.
Example:
  • I have a gatsby site that I've developed to conduct registrations for public events.
  • I now want an "articles" area of the site and so I've added gatsby-theme-blog.
  • I know find myself having to decide whether to undo, override, shadow every bit of gatsby-theme-blog so that its markup inherits the style of my existing site; OR decide to duplicate a bunch of stuff so that they look 'similar'; OR rework all my own style-related code.

July 24, 2019 at 7:32pm
I'm even torn whether gatsby-theme-blog should have it's own helmet material.
Of course, if anyone uses gatsby-theme-blog as a 'base' theme (upon which they'll attach other themes, extend the site, etc.) then they'll like gatsby-theme-blog as a quickstart/turn-key solution.
But, for anyone who has an existing gastby site, they're likely to prefer that the blog template simply inherit their existing layout component and inject {children} into a template of their own design.
  • reply
  • like

July 25, 2019 at 7:56am
- Gatsby has you covered. What you want is this starter: https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-hello-world/ - the demo is here: DEMO: https://gatsby-starter-hello-world-demo.netlify.com/, and you can install it, using these instructions. https://www.gatsbyjs.org/docs/starters/
FYI - this is a popular starter theme as others also prefer to roll their own CSS
Good luck!
  • reply
  • like

July 25, 2019 at 11:22pm
Hi David,
I'm aware of that option. The issue I'm driving at is a little different and perhaps my question/comments above weren't clear enough.
Imagine you have an existing gatsby site. You've poured a ton of work into it and you've made use of for styling. You've decided not to use typograpyjs and you're really happy with your design. But now you want to add some blog articles -- and you think to yourself, "Hey, I'll just use the new gatsby-theme-blog!!"
So, you yarn add gatsby-theme-blog and place the appropriate code in your gatsby-config.js.
You then gatsby develop and pop open your beautiful site in a web browser and, voila, your site is now brown everywhere with Merryweather font courtesy of typographyjs -- adding gatsby-theme-blog to your site now also means you've inherited a ton of colouration, new typeface, new spacing. When all you wanted was the awesome functionality of a blog list, blog post template, and handy pagination.
So... what are you to do: It's as much work to 'uninherit' the styling (undo, override, deepmerge new styles into the theme) than to just remake new blog features from scratch.
  • reply
  • like

July 26, 2019 at 1:35pm
Yes yes, now I see what you're saying. You would like the skeleton code of what the theme has to offer but have your CSS override the CSS of the theme you're adding onto your project. Yup. I see and thanks for expanding and clarifying that.
This is going to require a convention that is agreed upon in order to implement. Like a CSS kill switch on themes. Unfortunately, the whole CSS-in-JS thing makes it a little difficult. :)
Maybe there needs to be another thing called "gatsby skeletons"? or some less morbid name. Not really a plugin, but almost. Maybe that could be the edited title of this post - "Introducing Gatsby Skeletons, not plugins but almost"
Edited
  • reply
  • like
I don't think a new name is required. But the gatsby-theme-blog could itself be subdivided into two themes so the concerns of 'style' and 'functionality' are appropriately separated.
Suggestion:
gatsby-theme-blog
  • gatsby-theme-blog-features
  • gatsby-theme-blog-presentation
So, in my case I'd use only the features. But for someone else who wants a standalone turn-key blog that looks good out of the box, they could use gatsby-theme-blog.
And yes, I think a new convention will become necessary soon in the gatsby community. A CSS kill-switch, maybe. Or, more importantly, everyone needs to be careful to build themes with very narrow concerns OR easy overrides and options. (I mean, not the ability to override a background color or font name. I mean, I want the option to inherit [or not] an entire opinion.)
  • reply
  • like
There is also this "thing" where some people pass props with prop-types and others don't. Some people use hooks and some people don't. Unfortunately, the docs are sometimes not using the same consistent coding style. You use , but I started with CSS modules and now I use styled-components. and on and on. Hopefully, this sorts itself out with a wide range of options.
Good topic.
  • reply
  • like
I'll note that I don't expect consistency or 'standards'. I do, however, expect interoperability. To do that effectively, the scope of things needs to be narrow and focused. The scope of your opinion to use styled-component in a theme you build, shouldn't have any impact on my opinion to use in a site I build -- that way, I can consume your theme in my site and be assured that our work interoperates without imposing.
like-fill
1
  • reply
  • like
This may answer some of your questions: https://github.com/gatsbyjs/gatsby/issues/16106
like-fill
1
  • reply
  • like

August 11, 2019 at 6:05pm
gatsby-theme-blog-core is what you're looking for https://github.com/gatsbyjs/gatsby/pull/16166
like-fill
1
  • reply
  • like