Get rid of https://demo.productionready.io/main.css to force proper frontend asset bundle integration using gothinkster/conduit-bootstrap-template

[cirosantilli]

Edit: I just downloaded, pretified and git tracked https://demo.productionready.io/main.css in my implementation: https://github.com/cirosantilli/node-express-sequelize-nextjs-realworld-example-app/blob/4d1e11d06c0b9fbbdfe5dddfb8f9c6376cfa48d4/demo.productionready.io.main.css I'll just have to survive an 125K blob in my git repo this time :-)

CSS asset bundling is a fundamental part of frontend development, but currently we cheat it out by just using https://demo.productionready.io/main.css .

Instead, frontends should use https://github.com/gothinkster/conduit-bootstrap-template (the source for https://demo.productionready.io/main.css ) either via:

• a npm package, could be direct install from git for scss-capable frontends: https://stackoverflow.com/questions/14187956/npm-install-from-git-in-a-specific-version
• a git submodule

to demonstrate how to integrate the (hopefully .scss) entry into their asset bundler.

This React fullstack integration exemplifies this: https://github.com/cirosantilli/node-express-sequelize-realworld-example-app notably at: https://github.com/cirosantilli/react-redux-realworld-example-app/tree/0b4762e534bbbc12e1fdfcef8f23faea4acc18ee

Also note that https://demo.productionready.io/main.css and https://github.com/gothinkster/conduit-bootstrap-template are out of sync currently, building from source gives a broken CSS: gothinkster/conduit-bootstrap-template#5 so that should be fixed first regardless.

Unfortunately there's no easy way to enforce this besides removing https://demo.productionready.io/main.css entirely. On the short term unmaintained frontends would break. But on the long term this is the correct path for the project. Maybe v2 will break enough things that it won't matter. Not sure.

The same applies to https://static.productionready.io/images/smiley-cyrus.jpg basically. That image should be added to conduit-bootstrap-template and then bundled.

[geromegrignon]

Hello @cirosantilli ,

Maybe v2 will break enough things that it won't matter. Not sure.

Indeed, we plan to introduce a new brand ui design for the V2 (part of the explanation being to avoid confusion with the first version and related changes).

Using a git submodule is a great idea : using npm would require an account and one of our current points of focus is to avoid reliying on external accounts for a sustainable maintenance.

About the conduit-bootrap-template, we won't fix it for the current version as it works.

[cirosantilli]

Ah fantastic, if there's going to be a new CSS, that makes things simpler.

[plusgut]

I think it is very problematic to enforce that all the css sits in one file.
With that approach technology which uses webcomponents will have a bin problem, since css does not penetrate these components.
Also this hinders the possibility to implement in an idiomatic way of any given environment.

To give one full fledged css, would indeed be the easy way of letting people start implementing, but I think it would be beneficial if there is a way to get the css needed for each little component.

[mvila]

I agree that the v2 specs should not enforce the usage of a specific CSS file. A CSS file could be provided as an example, but then it'd be up to the implementor to style its frontend using the most appropriate technique given the framework/libraries he's using.

[plusgut]

I like that idea a lot.
Further I think it would be helpful if the css is tiny and does not include a big css library. I do not believe that in a modern website there is a need for that anyway, since css-grid and custom-properties exists nowadays.

[cirosantilli]

I also didn't mean to propose that we should enforce how implementations implement their CSS.

My main recommendation is that we don't host a reference CSS file where it can be easily included, to make it more likely that implementations will actually bundle it properly. Just put a SASS reference in this repo and be done with it.

Implementations would then be allowed to re-implement it idiomatically (which also implies proper bundling), though in practice most frontends will likely just properly bundle what we provide by default to avoid the reimplementation effort.

[geromegrignon]

I like that idea a lot.
Further I think it would be helpful if the css is tiny and does not include a big css library. I do not believe that in a modern website there is a need for that anyway, since css-grid and custom-properties exists nowadays.

I agree. I would like to get rid of bootstrap with the new version.

[plusgut]

I like that idea a lot.
Further I think it would be helpful if the css is tiny and does not include a big css library. I do not believe that in a modern website there is a need for that anyway, since css-grid and custom-properties exists nowadays.

I agree. I would like to get rid of bootstrap with the new version.

That makes me so happy to hear that from you!
Is there any way I can help out at V2?

[geromegrignon]

Hi @plusgut, i'll let you know when we'll actively work on V2.

[geromegrignon]

Hi @plusgut, it's been a while. I'll create a repository to work on the V2 ui design in a few days.

I'll integrate storybook as a tool to demonstrate small parts of the application in isolation and facilitates discussion about future changes.

The goal of this step towards v2 is to work on a framework agnostic version (pure HTML/CSS).
It'll replace the current 'template' part of the current documentation.

I'll also create another dedicated repository for the V1, demonstrating how storybook works with current stylesheet and templates.

For your information, this new repository will be tagged with 'hacktoberfest' in case you plan to participate.

[plusgut]

@geromegrignon that sounds great, I'm looking forward to it. but I probably won't have much time available to participate.

[geromegrignon]

@plusgut here is a quite simple starter example using the existing templates: https://realworld-storybook-old.netlify.app/?path=/story/pages-article-form--article-form
I just created the repo for the next version: https://github.com/gothinkster/realworld-storybook