#618 Need help building good examples for Fedora Bootstrap
Opened 8 months ago by ojn. Modified 2 days ago

phenomenon

This is cross post of https://pagure.io/fedora-bootstrap/issue/14
Basically I've been trying to learn Fractal Build https://fractal.build/ and trying to develop some kind of UI styleguide for Fedora websites.
Old repo: https://pagure.io/fedora-ui/fractal
The project has been renamed and the new repository is located here:
https://pagure.io/ui-patterns

reason

Having some good examples on how to use Fedora Bootstrap sass files should be great for consistency across the Fedora websites.

recommendation

Examples should look something like this:
https://ui-patterns.github.io/components/detail/nav.html
https://fedora-ui.github.io/components/detail/nav.html

Add notes into the README.md for each component


@ojn hey we have a project called patternlab doing the same thing. are there advantages over patternlab that fractal has?

see https://pagure.io/patternlab

@duffy

I did not know about patternlab. I've read some chapters from Atomic Design book some time ago. Looks like patternlab is much more "bottom up" approach and can even be used to build websites if I understood that correctly. Seems that it is a great showcasing tool.

I've got interested in Fractal mainly for the possibility to document styles (css, sass) and how easy that was to keep them compartmentalized. In the manner that https://bits.24ways.org/ is doing it, but they're using postcss (https://github.com/24ways/frontend).

I've been slowly contributing to fedora-docs. I find that different groups within Fedora need more cooperation. Actually I wanted to adopt Fractal for https://pagure.io/fedora-docs/fedora-docs-ui first, but since Antora is such a special case I decided to try with something more generic first and then I found Fedora Bootstrap repo so I used that to try.

@ojn well I am glad you are here bc this is stuff we're a little weak on as you've noted and it has great potential to help Fedora in a big way.

If you think Fractal is a better tool for us then let's use it. We can probably convert the styles defined in our patternlab to fractal wo much fuss Im guessing? How can I can help with fractal?

Hi, I just expanaded my thoughts about it here:
https://pagure.io/fedora-bootstrap/issue/14#comment-533822

tl;dr I think that both could be useful for standardizing the UI for Fedora, I think Atomic design is a great philosophy for structuring it and could also be applied to Fractal.

Maybe we could call the this library UI-Patterns
and have under pagure.io/ui-patterns ??

I would wish that we set up a short name though so that one doesn't have to use bookmarks to remember where to find it. It would kinda depict that it is the successor of PatternLab repo (could even be downstream from it in the unlikely case) and wouldn't take away the mindset that the work is based on UI patterns for the web interfaces.

@duffy if you can create the repo and add me and @ryanlerch we could get going, the name shouldn't matter much as long as it's short and descriptive. Also I would like for it to focus on documentation so that it could attract new users and guide them though it step for step.

I began to work on something similar, i.e UI documentation (https://www.styledoc.org/styledoc/) the docs there are a complete mess mostly because it was translated from swedish i a hurry and for the lack of interest lately; but also for the need to have Windows support. Made it for one of the local web dev shops (then open sourced it) but they are using Windows :smirk: :smirk:

I had time to try patterLab more, I found it sluggish both on my locally on my machine and here: https://docs.pagure.org/patternlab/
And in a way it's too complex to be productive with it when building the UI Library.

The UI patterns themselves are great and I began converting those to Fractal. First wanted to convert Fractal to mustache but when I found out it was more or less the same thing, they state Handlebars is largely compatible with Mustache so I did not bother (Fractal docs use Handlebars in their examples), there's also Nunjucks from Mozilla https://mozilla.github.io/nunjucks/ with even more features if we wan't to go there, but then it can defer the learning curve for beginner too much.

The scss files from pagure.io/patternlab work great as they were with Fractal so I'm glad for that.

For anyone wanting to make a PR to pagure.io/fedora-ui/fractal
wait with it please, as we decide on the name of the project -so it will move. It should move to a repo that doesn't have the name of the software because Gulp allows us to add other tools that might become as important or more important as Fractal in the future along the way that this project evolves.

so if you want a short url, why not drop the first subdir and just call it ui-patterns, and put it under the fedora-web team?

https://pagure.io/group/fedora-web

Metadata Update from @duffy:
- Issue tagged with: triaged

7 months ago

@ojn if you're ok with it i'll go ahead and create 'ui-patterns' under fedora-web?

Hi, sorry I should had posted about my git troubles here. I was trying to migrate the repo and keep the git history. Not sure what I did wrong but I could not push my changes to pagure. I did add a new remote and all, but Git did not allow me to push to the empty repo, which is strange since I have done it before on pagure and it worked, that has to be some setting that I missed (I hope it's not a pagure bug from the recent site updates).

So I started from a fresh repo and uploaded it, maybe it's okay since the project is still in its' beginning. https://pagure.io/ui-patterns

@duffy I added you and @ryanlerch as admins and gave @fedora-web commit rights.

Also created 'ui-patterns' on github for online preview. Would be great to preferably use something else that would instantly tell it is fedora related, I thought of fedorapeople.org as a temporarily solution but the problem is that relative URLs to static resources don't resolve if I put it in ojn.fedorapeople.org/ui-patterns and it's not accessible for others to update.

Fractal needs an absolute URL and unless one wants to hardcode it... Eh, and that's a bad idea and breaks local previews.

Anyway, I guess I would need to ask infrastructure team for help to set up a proper url later on.

I will update the links in the issues I created.

Edit: typo

@ojn this one came up in ticket triage today - is this something you're still actively interested in?

Login to comment on this ticket.

Metadata