Glossary

Below we will define some key terms that you will see used throughout this documentation. It is not required for you to become totally proficient in CSS in order to use the framework, but a baseline understanding of the terms ill go a long way in helping you impliment the framework.

General Terms

UI

UI, or User Interface, refers to the screens, buttons, toggles, icons, and other visual elements that you interact with when using a website, app, or other electronic device.

UX

UX, or User Experience refers to the entire interaction you have with a product, including how the user feels about the interaction.

OnBase Terms

You should be familiar with most OnBase terms such as “Studio” or “Designer” but there are a few we will be using that are not as common.

CONTROL

A control is one of the options in the Studi Designer’s toolbox, they consist of Panels, Tables, Attributes, Buttons, etc. The control we will most use in the framework is Panel because it is as close to a vanilla ‘div’ in HTML as we can get.

VIEW

A view refers to the view that is displayed when a WorkView object is open, the View itself can have CSS rules applied directly to it and will require this in most cases.

SCREEN

Similar to a View, a screen can be used to display information to users but the information displayed is often more geared towards a specific task and needs to be triggered by an action. In OnBase 22, a screen can be displayed when the object is created which has great benefits to the user experience as it allows us to present only the information we want to the user at the time of creation, or executing a task, which can focus them directly on the work that needs done for that action.

HTML Terms

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It consists of elements that can be styled with CSS rules that target the element as a whole, the Id attribute of the element, by adding classes to an element, or by adding styles directly inline.

ELEMENTS

HTML element is everything from the start tag to the end tag, for example:

<p>This is a paragraph element</p>
<div>This is a div element<div>

ATTRIBUTES

An HTML attribute is a piece of the markup language used to adjust the behavior or display of an HTML element. Attributes can be used as selectors in CSS to change the color, size, or functionality of HTML elements. For example:

<div id=”myDiv” class=”center container” style=”width: 100%;”></div>

ID Attribute

The id attribute in the example above is “myDiv” and can be used as a selector in CSS using the syntax #myDiv. This value must be unique in the HTML document and the id is often used in CSS to ensure that only that one element is selected.

Class Attribute

The class attribute stores the CSS rules that you are applying to that element. You can use multiple CSS rules as shown above with simple a space between each rule.

Style Attribute

The style attribute is used to apply CSS properties directly to an element. This is referred to as inline styling. When setting a style to an element through the OnBase Studio UI only that one element is affected. This is an example of repeatable steps that we will attempt to reduce through the framework.

CSS Terms

A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines what HTML elements to target with the CSS rule. Rules are applied to the ‘CSS Classes’ tab in the Property window inside OnBase Studio and sometimes might be referred to as “Classes”.

PROPERTIES

Properties are defined within selectors by defining a property and a value. They are separated with a colon and delineated with a semi-colon.

selector { property: value; }

SELECTORS

Selectors are used in CSS to select the parts of the HTML that are being styled. You can use several different methods for selecting an element. Here are a few examples of the most common selectors.

Class Name Selectors

You can also select HTML elements by their Class name. Unlike ID selectors, Class selectors select all elements with a matching class. Example:

.jumbo { text-size: 1000px; }

HTML Selected:

<a href="http://codecademy.com" class="link jumbo"> 
<span class="jumbo">

Element Selectors

You are able to select HTML elements first by simply using the name of the element. Example:

body {  background-color: #333; }

HTML Selected:

<body>

ID Selectors

ID selectors are used to select only a single item on a page. Like the term (“identification”) indicates, ID selectors will ONLY select the first element with a matching ID. Example:

#thatThingINeededToStyle {  font-size: 24px; }

HTML Selected:

<span id="thatThingINeededToStyle"> 

Attribute Selectors

HTML elements are also able to be selected by their attributes. Example:

input[type="text"] {  width: 100px; }

HTML Selected:

<input type="text">