Guidelines

Libraries

Our system is based on the Bootstrap framework. The libraries for this framework exist on our CI, QA and PROD environments and are already being utilized in projects such as the: IBKR Marketing Websites, Registration System, Client, Advisor and Broker Portals, Investors' Marketplace, and White-Branding. If you wish to incorprate the Bootstrap framework into your project, the links to the required resources are below.

                                
                                    <!-- JAVASCRIPT ---------->

                                    <script type="text/javascript" src="/scripts/common/js/bootstrap-5.3.8/bootstrap.bundle.min.js"></script>

                                
                            

                        
                        <!-- CSS ---------->

                        <link rel="stylesheet" type="text/css" media="all" href="/css/design/website.min.css" />

                        
                        

Getting Started

This guide offers a variety of pre-configured components built off of the Bootstrap framework and have been optimized to work with all of IBKR's products and White-Branded clients.

Designers

Use this guide as a reference to find commonality between all components we have on offer to the programming/development team. If a component that you are looking to create does not exist within this system currently, please submit a JIRA ticket marked as a Task to the SEOUX team. This request should include the following:

• A brief description describing the component, the business use case, the "states" of the component when applicable, and where in our system the components is intended to be used (i.e. Common, Marketing, Registration, Portal).
• A visual mockup of the component. The visual mockup should show how the component behaves on a mobile, tablet, laptop and desktop device. You must take the "Mobile-First" approach when designing your components. The mockup should also include the "states" where applicable. For example, a button component would have a default, hover, pressed, focused, active and disabled state.
• A link to your Figma or Adobe XD mockup file. Please be sure to enable the markup feature in these tools so that the SEOUX team does not have to guess about font-sizes, colors, etc...

Programmers/Developers

This guide is an ongoing developmental tool that will continue to grow and imrpove over time. The components documented at this time are static HTML markup with the applicable CSS class names applied. As we acquire more reesources, VueJS and Angular variations of these components will be documented in the code block to allow quick copying to your clipboard to make development faster.

If you are concerned about how a component is built, or have questions about how to best implement a component into your project, please reach out to the SEOUX team through JIRA.

Project Workflow

The over-arching goal of this guide is to provide a consistent look and feel across all of IBKR's products and tools by consolidating styles, class names and html markup into one singular location.

That being said, in order to continue to ensure consistency across all of our platforms into the future the following workflow should be adheared to.

• All projects should start with a design team. The design team will be responsible for creating...