UI Framework

Do we have to use the GUI source code?

No, you do not have to use the GUI source code. You can build from scratch using wireframes and visual designs if you prefer, but your final output must match the look and functionality of the GUI from a front-end perspective.

Which browsers does the GUI support?

Our current browser support philosophy recommends one version forward and two versions back with the exception of IE8 and up.

The GUI uses progressive enhancement, therefore older browsers may not optimally render the interface elements. If using an older browser, you must ensure that your interface elements meet the following requirements:

• Enable the user to complete a task
• Meet standard usability guidelines
• Comply to WCAG2 AA accessibility guidelines

  This philosophy is based on the following factors:

  • The ROI of tweaking elements for older browsers (with declining usage rates) for small enhancements which do not directly enhance the customer experience or task completion rate e.g. rounded corners.
  • Simplifying code by minimising styling with anything other than CSS
  • Less dependency on visual designers to provide graphic assets and support
  • More efficient workflow when building interfaces intended for multi-brand
  • Future proofing graphic quality for high definition screens

Interface rendering concerns in older browsers can be raised with CX but ultimately the AFS Digital Brand Director will decide whether the brand presentation is acceptable or if an alternative needs to be explored.

Who is responsible for bug fixing and testing?

You are responsible for testing and bug fixes when you download an instance of the GUI and use it in your project. Please let us know if you notice any bugs in the GUI and we’ll fix it up. Even better... send in a pull request. We’d be very grateful.

If we use the GUI do we still need UX and UI designers?

Yes. Every project should have a UX designer and a UI designer, no matter how small. This practice will ensure that the interaction design and interface designs are consistent.

Can I change LESS files, css or JavaScript?

We do not recommend changing the files. To alter or add styles in your project please use an override css file and concatenate it at the bottom. This will ensure that you stay upgradeable in case we fix things and create a new version of a module.

Can we use our own JavaScript library?

Yes you can use your own JavaScript library, however you are responsible for the implementation. The GUI currently comes with jQuery but we will try to move to vanilla JS in future to provide even more flexibility.

Is the GUI accessible?

Yes as of version 1.0.0. the GUI complies to AA accessibility standards. We have been through a formal accessibility review to meet this requirement.

How are modules affected by new releases?

Each module is affected differently by each release. But don't worry if you don't have the resources to upgrade, as we'll always keep the past versions online. This ensures that when a fix is issued or an improvement is made to a module, only teams that are using that particular module are affected.

Do we have to use the updated release?

No, you do not have to use the updated release. The Blender is specifically built to cater for every version, meaning that you can continue to use your preferred version. However, we encourage you to assess the effort required to upgrade, as it may only be minimal but could enable you to leverage the community fixes and testing.

Which frameworks are used to create the GUI?

As of version 2.0.0 we have rebuilt the GUI from scratch. It is a complete custom build for your environment and enables us to be more flexible in its development. We tried to keep the classes and naming convention as close to Bootstrap 3.x as possible.

Do I have to use version 2.0.0?

With improved versioning in the release, projects who are using a version of the GUI 1.x will continue to be able to use and implement their corresponding version. Each project should review the GUI 2.0.0 and assess the value, effort and impact of updating their projects before proceeding with the upgrade.

How do I use the GUI in my SPA project?

There are some additional considerations you have to do before jumping in with your project depending on the framework you use. We got some great resources about Angular and icons in dynamic DOM. If you have something you want to share let us know on GitHub.

How can you center the logos in a multi-brand environment?

The logos are all on the same size canvas to enable us to quickly switch the brand and not having to worry about the size of the different logos in each brand. This of course only works when you have your logo left aligned. In case your design requires you to center your logo you will have to account for the different sizes and that could be a bit frustrating to get your head around. That's why we made a test page that helps you getting started:

Check out this CodePen

This is why LESS and any preprocessor is great. You can add some smarts to your CSS. Here we have a env-var on the top of our LESS to represent the brand. We then check on that variable and adjust the size of the logo in the centered div. If you have any questions or additions to this issue, come over and talk to us here on GitHub.

How do I change the colour of my icon?

You will have to embedd the icons to change the colour. Once embedded you can use the icons-background class to change the fill eg: .icons-background { fill: rebeccapurple; }. Read more about icon colours.

What if I have a document in a non-latin language?

Some characters may not display correctly when using non-latin languages like Vietnamese or Hebrew. In those cases you should overwrite the font-family and edit out the roboto webfont we are still shipping. Just have a look at _fonts code-module and see what the current brand-font and body-font is. Read more about non-latin languages.

How can I get the unminified version of Javascript?

Although the blender is built to be easy to use, some features can drown in the noise. We got asked a couple times how one might get the unminified version of a modules JavaScript. You can read our answer on GitHub.