redhat-rcue/rcue

Red Hat Common User Interface (RCUE) reference implementation

Red Hat Common User Experience (RCUE) reference implementation

The Red Hat Common User Experience (RCUE) project was created to promote design commonality across all of Red Hat’s Enterprise product offerings.

This reference implementation of RCUE is based on PatternFly and Bootstrap v3. Think of RCUE as a "skinned" version of Bootstrap with additional components and customizations. For information on how to quickly get started using RCUE, see the Quick Start Guide.

Dependencies

RCUE includes a number of dependencies that are not committed to this repository. To add them, see "Install NPM Dependencies". And make sure you keep them updated (see "Keeping NPM Dependencies Updated").

Development

Development setup requires nodejs and Ruby. If you do not already have nodejs, npm, and Ruby installed on your system, see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager and https://www.ruby-lang.org/en/downloads.

Install NPM Dependencies

The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:

npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.

Additionally you may need to install the grunt command line utility. To do this run:

npm install -g grunt-cli

Test pages are generated using Jekyll. After ensuring Ruby is installed and available, run:

gem install jekyll

Keeping NPM Dependencies Updated

Anytime you pull a new version of RCUE, make sure you also run

npm update

so you get the latest version of the components specified in package.json.

Live Reload Server

A local development server can be quickly fired up by using the Gruntjs server task:

grunt server

This local static asset server (i.e., http://localhost:9001) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.

Coding Style

• Indentation
  • Use spaces (not tabs)
  • Indentation size is 2 spaces
• Filenames
  • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
• LESSCSS
  • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
  • Alphabetize rules by selector
  • Alphabetize properties by declaration
  • Define or override variables centrally in less/variables.less
  • Define or override mixins centrally in less/mixins.less

Build

CSS

In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:

grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/rcue.min.css.

Tests

The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use RCUE.

The HTML pages in tests/ are generated using Jekyll. Do not edit these files directly. Changes to the test source files (components/patternfly/tests-src/) should be made upstream in PatternFly.

Release

To release a new version version of RCUE, edit bower.json and package.json.

Update the version listed in bower.json by editing the file and changing the line:

"version": "<new_version>"

Update the version listed in package.json by editing the file and changing the line:

"version": "<new_version>"

Commit the version bump:

git commit -a -m "Version bump to <new_version>"

Tag and push upstream (assuming you have commit access):

git tag <new_version>
git push && git push --tags

Documentation

See https://redhat-rcue.github.io/, https://www.patternfly.org/, and http://getbootstrap.com/.

Browser and Device Support

Since RCUE is based on PatternFly, and PatternFly is based on Bootstrap, RCUE supports the same browsers as Bootstrap excluding Internet Explorer 8, plus the latest version of Firefox for Linux.

Important: starting with the v2.0.0 release, RCUE no longer supports Internet Explorer 8.

License

Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.

rcue's Issues

Provide instructions for developing/testing locally

I wanted to test #69 locally, which requires building PatternFly from master and then building RCUE. I was able to build patternfly and use npm link, but it still seems to use the latest release (installed into node_modules) instead of the one installed by npm link.

I have a project that uses npm install to manage dependencies, including RCUE, but I don't know the easiest way to test with my local rcue either.

What I'd like to do is:

0. Build PatternFly
1. Build RCUE using the built PatternFly
2. Build my frontend using the built RCUE

Instructions for doing this seem like a useful addition to the README? I'd be happy to submit a PR with that, but let's figure out the necessary steps (and I can help you test)

Update site as repo is not longer private

RCUE repo no longer needs request for access. The site should be updated. https://rcue-uxd.itos.redhat.com/

Alignment issues with wizard on RCUE 3.23 (does not affect PatternFly 3.23)

Hi,

There seems to be a strange alignment problem with the wizard steps indicator. Inexplicably, it only affects RCUE 3.23 and does not affect PatternFly 3.23.

PatternFly 3.23 - http://codepen.io/anon/pen/ryqzpj

RCUE 3.23 - http://codepen.io/anon/pen/MpPvOe

404s on login.html

Probably not a big deal, but figured I'd report it just in case.

Color variable is missing for vertical navigation

When I apply the RCUE css to a project that uses horizontal navigation. I see that the top border above the masthead is red, as expected.

However when I apply the css to a project that uses vertical navigation, the top border is blue.

In the file variables.less, line 17, I can see that @navbar-pf-border-color (used by horizontal nav) is assigned the #cc0000 red color. But I do not see @navbar-pf-vertical-border-color (used by vertical nav) included in this file.

bower.json: use devDependencies instead of dependencies to allow consuming RCUE as a bower package

Related to bootstrap-3 branch:

I suggest to use devDependencies instead of dependencies:

https://github.com/rhamilto/rcue/blob/master/bower.json#L15

The reason is that when you download a package which specifies dependencies, all that dependencies needs to be downloaded as well.

I don't think people that will use RCUE style directly needs sources of third-party dependencies that RCUE builds upon.

Missing 'bg-modal-about-pf.png' referenced in rcue-additions, rcue.css, variables.less

"bg-modal-about-pf.png" is referenced at 7 files but I can't find in "/dist/img/"

• rcue-additions.css, rcue-additions.css.map, rcue-additions.min.css
  background-image: url("../img/bg-modal-about-pf.png");
• rcue.css.map
• styles-additions.css, style-additions.min.css
  background-image: url("../img/bg-modal-about-pf.png");
• variables.less
  @modal-about-pf-bg-img: "bg-modal-about-pf.png";

Gruntfile should build Jekyll dependencies through bundler

PatternFly's build installs Ruby dependencies with bundler and then builds the Jekyll dependencies using bundle exec:

Running "run:bundleInstall" (run) task
Using addressable 2.4.0

...

Running "jekyll:tests" (jekyll) task
`bundle exec jekyll build --source tests/pages --destination dist/tests` was initiated.

RCUE, however, does not seem to manage Ruby gem (bundler) dependencies the same way, leading to this error when running grunt-build (after installing rubygem-jekyll on Fedora 25):

Running "jekyll:tests" (jekyll) task
>> Error: Command failed: jekyll -v
>> WARN: Unresolved specs during Gem::Specification.reset:
>>       listen (~> 3.0)
>> WARN: Clearing out unresolved specs.
>> Please report a bug if this causes problems.
>> /home/jawnsy/.gem/ruby/gems/bundler-1.14.6/lib/bundler/runtime.rb:40:in `block in setup': You have already activated addressable 2.5.0, but your Gemfile requires addressable 2.4.0. Prepending `bundle exec` to your command may solve this. (Gem::LoadError)
>> 	from /home/jawnsy/.gem/ruby/gems/bundler-1.14.6/lib/bundler/runtime.rb:25:in `map'
>> 	from /home/jawnsy/.gem/ruby/gems/bundler-1.14.6/lib/bundler/runtime.rb:25:in `setup'
>> 	from /home/jawnsy/.gem/ruby/gems/bundler-1.14.6/lib/bundler.rb:100:in `setup'
>> 	from /home/jawnsy/.gem/ruby/gems/jekyll-3.3.0/lib/jekyll/plugin_manager.rb:36:in `require_from_bundler'
>> 	from /home/jawnsy/.gem/ruby/gems/jekyll-3.3.0/exe/jekyll:9:in `<top (required)>'
>> 	from /bin/jekyll:23:in `load'
>> 	from /bin/jekyll:23:in `<main>'
Warning: Please install Jekyll before running this task. Use --force to continue.

Aborted due to warnings.

Note that this is running jekyll directly rather than bundle exec jekyll, as PatternFly's build does. I'd like to propose copying PatternFly's build steps over to RCUE, and I'm happy to submit a PR for doing that.

WORKAROUND

An easy workaround for now is to run the whole build through bundler (bundle exec grunt build), or only run the grunt less target.

Update Login Styles

Update the Login styles to account for the new placement of .login-class.

Broken image on https://redhat-rcue.github.io/index.html%3Fp=1304.html

Login image at the bottom of the page is broken.

Minified CSS does not seem to match input

This might be a consequence of the way I'm building things (I'm manually replacing, e.g. rcue/node_modules/patternfly with a symlink to my local patternfly) - see #71

Here's code in my rcue-additions.css, built using patternfly master to include patternfly/patternfly#624:

.wizard-pf-steps-indicator .wizard-pf-step-number {
  background-color: #fff;
  border-radius: 50%;
  border: solid 2px #bbb;
  color: #bbb;
  font-size: 12px;
  font-weight: 700;
  height: 25px;
>>  left: calc(50% - 13px);
  line-height: 22px;
  position: absolute;
  top: 27px;
  width: 25px;
}

This is exactly what I want, and fixes the alignment issues identified. So far, so good. But using the built minified version, the problem reappears:

.wizard-pf-steps-indicator .wizard-pf-step-number{background-color:#fff;border-radius:50%;border:2px solid #bbb;color:#bbb;font-size:12px;font-weight:700;height:25px;left:calc(37%);line-height:22px;position:absolute;top:27px;width:25px}

It takes a little horizontal scrolling to see it, but left:calc(37%) has reappeared from somewhere! I don't know if the minifier is doing this or if we're running the file through less twice, or something else?

drawer-pf-title overrides width

drawer-pf-title in PF defines the width as 100%, while RCUE overrides this to be a fix 318px. This breaks if you have a 'X' to close the drawer while the drawer is expanded. The X will be 318px from the left of the >> icon instead of the right hand side of the drawer.

Looking at the drawer-pf-title css class in RCUE it is identical to the PF one, except the width, so IMO it makes sense to simply remove it from RCUE as it is not overriding anything useful.