stackmix icon indicating copy to clipboard operation
stackmix copied to clipboard

Auth fragment styling

Open alesvaupotic opened this issue 4 years ago • 10 comments

I did what I could with styling to not change the whole concept. Protected page was set up with inverted theme and some global styles also messed with inputs.

We might think of a global css which can be deleted or updated on demand and each fragment would contribute to initially. It's a simple and quick way to replace styling in general on a new project.

Added a link to /protected route as there was none.

alesvaupotic avatar Apr 20 '21 22:04 alesvaupotic

Yeah, I like the idea. So what do you think about adding something like a CSS property to the blueprint?

diepoe avatar Apr 21 '21 07:04 diepoe

Jakob will chime in on this one, with v3 in mind maybe.

alesvaupotic avatar Apr 21 '21 07:04 alesvaupotic

We might think of a global css which can be deleted or updated on demand and each fragment would contribute to initially. It's a simple and quick way to replace styling in general on a new project.

I much agree. I've been looking for a minimal-class kinda framework that can provide default styling and easily be removed without leaving a mess of unused classes. Currently I like Milligram but am open to alternatives or adding some stackmix specific CSS.

jakobrosenberg avatar Apr 21 '21 11:04 jakobrosenberg

Before I merge this what does the PR fix?

This is what I get with vite-navigation-auth-markdown-milligram-app

screenshots

image

image

image

image

image

image

jakobrosenberg avatar Apr 21 '21 11:04 jakobrosenberg

Oh, sorry, with milligram you got styling. Never used that before. With just auth,vite I get the what was discussed in discord: image

alesvaupotic avatar Apr 22 '21 10:04 alesvaupotic

Jakob, milligram looks just fine. How about including it into base, it's 2KB and really brings a lot to the table? Even being a Tailwind user myself, I can see benefits of including a lib like that to introduce some styling for the user. I mean, we import all these testing libs and stuff, it wont affect npm install times at all.

alesvaupotic avatar Apr 22 '21 10:04 alesvaupotic

@alesvaupotic it should be already included by default. Should we add a comment to it that clarifies its purpose?

jakobrosenberg avatar Apr 22 '21 12:04 jakobrosenberg

@jakobrosenberg Just ran npx stackmix -f auth,vite and I see no reference to milligram anywhere in generated source code.

alesvaupotic avatar Apr 22 '21 14:04 alesvaupotic

Ah. You only get it by default if you run npx stackmix.

The -f is for unattended installs, so it'll assume you only want what you include.

jakobrosenberg avatar Apr 22 '21 16:04 jakobrosenberg

OK, but you can't assume either that preselected fragments will end up in the user's output. I always deselect milligram in favor of tailwind, this is what I get:

image

So, it would be of great help if either some general styling is applied for any output generated by stackmix or there is no styling at all. I haven't digged thru repository to see when Auth fragment got internal styles, but now it's a mess.

alesvaupotic avatar Apr 22 '21 19:04 alesvaupotic