search

syndesisio / syndesis-ui

The front end application or UI for Syndesis - a flexible, customizable, cloud-hosted platform that provides core integration capabilities as a service. It leverages Red Hat's existing product architecture using OpenShift Online/Dedicated and Fuse Integration Services.
https://syndesis.io/
14 stars 28 forks source link

Integrate PatternFly: CSS #9

Closed kahboom closed 8 years ago

kahboom commented 8 years ago

We are currently using Angular 2, Webpack 2, and are interested in using Bootstrap 4. At the moment, it appears that PatternFly does not use Bootstrap 4, rather is still using Bootstrap 3.x. In addition, we cannot use angular-patternfly since it has not been adapted for use with Angular 2. As such, we are having to resort to using ngBootstrap, since it uses Bootstrap 4 and was made for use with Angular 2. We will only be using some of the PatternFly CSS for the purposes of branding until it is natively compatible with Bootstrap 4 (for CSS) and Angular 2 (for JS).

CSS Issue

Loading the PatternFly CSS has been a bit troublesome, as Webpack's LESS loader has a bug with respecting relative paths (the transpiled CSS is also not valid CSS), and a Sass file is not offered. Because the transpiled CSS is not valid CSS (it has LESS symbols), it is likely an npm build issue, so for now we will simply have to reference it via a CDN in one of our own Sass files. I have also looked at patternfly-sass to be able to at least use PatternFly's Sass files, however, npm is not installing it to the project properly as a GitHub repo with a trackable version using a tag, and, unfortunately, it is not available on npm.

I've been in touch with the PatternFly team regarding the inability to load CSS or LESS properly from the main patternfly npm package using Webpack (due to that bug with Webpack's less-loader here: https://github.com/webpack/less-loader/issues/76). Please see relevant issues here: https://github.com/patternfly/patternfly/issues/458, https://github.com/patternfly/patternfly-demo-app/issues/10

We realize that we are on the bleeding edge here and will run into some challenges, but this will allow for easier maintainability into the near future, as contributors will not have to upgrade from one major version to the next. There are many moving components in terms of technology, so we want to keep up with the technologies that would result in the biggest changes when/if requiring an upgrade. In this case, that means Webpack 2, Angular 2, and Bootstrap 4.

Integrate PatternFly: JavaScript (https://github.com/hawtio/hawtio-ipaas/issues/8)

kahboom commented 8 years ago

See Jira issues instead: https://issues.jboss.org/secure/RapidBoard.jspa?rapidView=3672