#14 Fractal Build for Fedora Bootstrap. Please help me out
Closed: Fixed 5 years ago by ryanlerch. Opened 5 years ago by ojn.

@duffy @ryanlerch

I have been trying to learn and implement Fractal Build, adding some good examples for how to use Fedora Bootstrap sass files can be great for consistency across the 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

(preview of the static build is on the github page)

I have added you as admins, I still need to write instructions on how the Fractal Build process functions.
It uses Dart Sass js library http://sass-lang.com/dart-sass and Gulp, I'm trying to keep dependencies to the minimum. Present implementation using Webpack has some vulnerabilities because of node-sass I think.

I was thinking adding commit rights to @fedora-web and @fedora-design groups, please tell me if it is a good idea or not.


@ojn I think this is a great idea. It's redundant with the pattern lab project though (see https://pagure.io/patternlab). However it's been a while since I've worked on it, and am happy to give to you if you are interested in working on this. Do you think fractal is a better platform? Can you use the styles we have defined in patternlab in fractal?

Just my first impressions but I found the gulp version to be buggy.
Their cli defaults to Node edition (not gulp), so I do hope that Gulp tooling would not be neglected since they consolidated it under one roof (https://github.com/pattern-lab/edition-node-gulp/issues/124).

I'm not so sure if both tools have the same purpose though. I'll try find out more about patternlab, it seems like there is no way to automatically show css/sass parts and snippets on the pattern preview page (correct me if I'm wrong here). https://patternlab.io/docs/pattern-managing-assets.html says: You need to add them manually to the shared pattern header and footer. So this would be huge pain point and can get outdated quickly.

As I started describing in https://pagure.io/design/issue/618#comment-533735
my idea (or rather my hope) were for Fedora to have great documentation about the ui that would introduce users and contributors to engage in the development of the coherent style. The style-sheets are the main concern there, the templating language should be of the secondary importance and not every Fedora page can or will use one. Fractal does have Mustache adapter though so it's not unfeasible, nothing actually stops us from using both tools.

I know that Fedora has a lot of fabulous developers and creative users that could and should be able to learn the basics of HTML/CSS if they want to improve the web pages of the community.
It's unfortunate that often times first impression and reaction that people get when they see CSS is how unwieldy it could get if it's not managed with care. My question to you and also @ryanlerch is, do you envision that website maintainers would use the whole fedora-bootstrap stylesheet and add their own CSS hacks on top or should it maybe be more modular in a way that Atomic Design philosophy is describing it. The way I see it is that modular approach is what actually makes me appreciate the style-sheets in the first place, it also makes it possible to learn and iterate as one goes along when implementing a particular webpage or web app.
I'm not a web dev, just merely web and open source enthusiast with a background in biology so my ideas could be wrong here.

Just found out that it's not possible to do preview templates with Pattern-lab the way it could be done with Fractal, https://github.com/pattern-lab/patternlab-node/issues/926
That is one of those thing that can be invaluable for beginners to learn the composability of the Pattern library. Fractal is not without it's faults either - the documentation in many places is terrible, their previous team abandoned the plans on the 2.0 release and stepped down, now it is up to the community of users to drive the project forward.
Someone have recently re-implemented Fractal (in React I think) https://github.com/Malvid/Malvid
it can be used with Gulp but relies on their custom site generator Rosid - that I would worry about if it disappears tomorrow. Also there really is no community to speak of and not much documentation. That project is really cool so I tried it briefly but could not figure out how to do some things -it might be too flexible for it's own good, it's not great if it hinders the usability.

Metadata Update from @ryanlerch:
- Issue close_status updated to: Fixed
- Issue status updated to: Closed (was: Open)

5 years ago

WE no longer use webpack here for building the sass.

Feel free to reopen this issue if you wish to continue this further.

Login to comment on this ticket.

Metadata