The typography styling here is currently not included in the
pdx-bootstrap library. This is intended for a future release as we make efforts toward a more complete
style and design guide to give consistency across development. You can copy the styles from this page directly if you
would like to try them, however.
All HTML headings are available
<h1> through
<h6>, and classes
.h1 through
.h6 are available for applying those same stylings to other elements or for inline use.
Pierian uses the "Hind" font face for display fonts.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 4
Heading 4
We set our base font-size to
16px with a line-height of
1.5 for better readability. This is applied to the
body and all paragraphs. In addition,
p (paragraphs) receive a bottom margin of the base font size (
16px by default).
Pierian uses the Open Sans font for body copy and text.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
...
Status icons are used to represent user defined states of variants, such as relevant, irrelevant
and unknown. These can be created using the FontAwesome 5 .fa-bookmark icon font along with the corresponding
.status--* class.
Status icons can also be set to a disabled state to show they are inactive or not in use using the .disabled class.
Use
.flag for a fixed width/height label of one or two letters to denote a status flag.
You can use `.flag` elements inline, though they are larger than any inline line-height that might be used.
This is a line of text with a XX flag in it.
This is a line of text with a XX flag in it.
You can use
.flag`s in various sizes as well by using the
.flag-small or
.flag-large. There are also some predefined styles for commonly used flags, such as artifacts and benign
polymorphisms.
The 'none' flag, flag--none, is a special case of flag, where the text is longer than 2 letters. In this
case, we wrap the text in a span to allow us to size the text without modifying the flag width and height itself. This
approach can be used on all tags if the user wishes, simply wrap the flag text in a span tag.
?
BP
A
none
?
BP
A
none
?
BP
A
none
.flag elements can also be disabled using the .disabled class.
?
BP
A
none
The flag dropdown is a specific implementation of the standard boostrap dropdown menu. It allows multiple selections. The
flag dropdown uses all the standard bootstrap dropdown classes with the addition of the
.dropdown-flag class on the
.dropdown element as well. It must also have an element with the
data-toggle="dropdown" attribute to trigger the dropdown.
The flag dropdown can be activated using the following javascript
$('.dropdown-flag').flagDropdown();
The flag dropdown emits the same events as the standard bootstrap dropdown but also emits an event when items are selected.
The first argument to the event handler is always the Event object. All dropdown events are fired at the
.dropdown-menu’s parent element and have a
relatedTarget property, whose value is the toggling anchor element.
| Event Type | Description | Params |
|---|---|---|
| pdx.flagdropdown.change | This event fires immediately when an item in the
.dropdown-menu is selected or unselected |
|
$('.dropdown-flag').on('pdx.flagdropdown.change', function(ev /* selected id, ... */) {
const ids = Array.from(arguments).slice(1); // get selected ids as an array
const triggeringElement = ev.relatedTarget; // DOM element that was 'clicked' triggering the change
// ...
});
The status dropdown is a specific implementation of the standard boostrap dropdown menu. It allows only a single selections.
The status dropdown uses all the standard bootstrap dropdown classes with the addition of the
.dropdown-status class on the
.dropdown element as well.
The
data-toggle="toggle" attribute should be set on an icon using one of the defined status bookmark icons from
FontAwesome 5. This icon should reflect the currently selected status icon. When a new status is selected from the dropdown,
the icon marked by the
data-toggle attribute will be changed to match the selected status icon.
The status dropdown can be activated using the following javascript
$('.dropdown-status').statusDropdown();
The status dropdown emits the same events as the standard bootstrap dropdown but also emits an event when items are selected.
All dropdown events are fired at the
.dropdown-menu’s parent element and have a
relatedTarget property, whose value is the toggling anchor element.
| Event Type | Description | Params |
|---|---|---|
| pdx.statusdropdown.change | This event fires immediately when an item in the
.dropdown-menu is selected |
|
$('.dropdown-flag').on('pdx.flagdropdown.change', function(ev, selectedId) {
var triggeringElement = ev.relatedTarget; // DOM element 'clicked' that triggered event
// ...
});
The
.dropdown-select class turns a regular Bootstrap dropdown into a single or multiselect dropdown. It uses the standard bootstrap dropdown
class plus a
.dropdown-select class on the parent along with the traditional
.dropdown class.
To specify single or multiselect use the
data-select-multiple attribute on the parent element. Leaving it off will default the component to function as a single select dropdown.
You can also set
data-select-multiple="false" for single select. To use as a multiple select dropdown add the
data-select-multiple="true" attribute to the parent element.
The
data-toggle="toggle" attribute can be added to the element within the
.dropdown-select parent element that will act as the trigger. If present, this component will be initialized on page load via the
data-* API.
The dropdown select can be activated with the
data-* API as mentioned above or by using the following javascript
$('.dropdown-select').selectDropdown();
The dropdown select emits the same events as the standard bootstrap dropdown but also emits an event when items are selected.
All dropdown events are fired at the
.dropdown-menu’s parent element and have a
relatedTarget property, whose value is the toggling anchor element.
| Event Type | Description | Params |
|---|---|---|
| pdx.dropdown-select.change | This event fires immediately when an item in the
.dropdown-menu is selected |
|
$('.dropdown-select').on('pdx.dropdown-select.change', function(ev, /* itemId, ... */) {
const selected = Array.from(arguments).slice(1);
const triggeringElement = ev.relatedTarget; // DOM element 'click'ed that triggered event
// do something with the ids in `selected`
});
The toggle switch is a component for capturing and changing the on/off semantic state of something. It has similar meaning to a checkbox, which should represent the existence or non-existence (true/false, on/off) state of some aspect of an application or interface.
You can disable a toggle switch using the .disabled class on the .toggle element.
The toggle switch can be activated using the following javascript
$('.toggle').toggleSwitch();
The toggle switch emits a single change event whenever its state is toggled.
| Event Type | Description | Params |
|---|---|---|
| pdx.toggle.change | This event fires immediately when the toggle state is changed |
|
$('.toggle').on('pdx.toggle.change', function(ev, state) {
// ...
});