CxDL v2.3.0
Charles Koch - August 22, 2024
Generic Classes and Variables
Official CxDL Color Pallet
$cx-main
$cx-light-secondary
$cx-dark-secondary
$cx-tertiary
$cx-accent
$very-light-gray
$light-gray
$medium-gray
$dark-gray
$very-dark-gray
$disabled-color
Background Color Classes
For each color of the Official CxDL Color Pallet, there is also a corresponding class to override the background color.
Examples: bg-cx-main , bg-very-dark-gray , etc..
Responsive Content Classes
Some content should only be visible when the screen is a certain size. Non-essential content such as descriptions, long titles, and flavor text can be partially or fully hidden.
| hide-small | The content disappears when the screen width is less than 570px |
| truncate-small | The content will truncate the text with ellipsis ( ... ) when the screen width is less than 570px |
| truncate-text | The content will truncate the text with ellipsis ( ... ) any time the container is too small |
| noselect | Text content cannot be selected and teh caret cursor will not appear when the mouse hovers over the text |
Layout Classes
Flexbox
Define a component as a flexbox, which means that all immediate children will grow or shrink to fit the box as it is resized. Essential for good responsive design.
| l | defines the component as a flexbox |
| li | defines the component as an inline-flexbox |
| lh | defines the component as a flexbox that sets objects horizontally, left-to-right |
| lh-reverse | defines the component as a flexbox that sets objects horizontally, right-to-left |
| lv | defines the component as a flexbox that sets the objects vertically, top-to-bottom |
| lv-reverse | defines the component as a flexbox that sets the objects vertically, bottom-to-top |
| wrap | indicates that a flexbox should wrap the items to the next line if they don't fit |
| wrap-reverse | indicates that a flexbox should wrap the items on the opposite side that they are laid out from |
| nowrap | indicates that a flexbox should keep all items in the same line, even if they don't fit |
Flex item shrink/grow
Define the flex shrink/grow factor for a child of a flexbox. Classes marked as (default) are what is automatically set if a specifc class is not added to the component.
| flex-auto | automatically sets the grow/shrink values (default) |
| flex-0 | item will not grow or shrink as the box changes size |
| flex-shrink | item will only shrink as the box does, but will not grow beyond its original size |
| flex-<number> | sets the grow/shrink factor by the number from 1 to 12 |
Flex align-items
Define where items are positioned on the cross-axis of a flexbox.
| start | items are pushed to the start of the cross-axis |
| center | items are pushed to the center of the cross-axis |
| end | items are pushed to the end of the cross-axis |
| baseline | items are set so that all their baselines are lined up |
| stretch | stretch the items so that all empty space on the cross-axis is filled (default) |
Flex justify
Define how items are positioned on the main axis of a flexbox.
| start-j | content is pushed to the start of the main axis (default) |
| center-j | content is pushed to the center of the main axis |
| end-j | content is pushed to the end of the main axis |
| around-j | content is set so that each item has the same "margins" within the main axis |
| j | content is set at equal intervals along the axis, but may have inconsistent spacing |
Flex align-self
Use this on single children to override the default align-items class applied to the flexbox.
| self-start | the item is pushed to the start of the cross-axis |
| self-center | the item is pushed to the center of the cross-axis |
| self-end | the item is pushed to the end of the cross-axis |
| self-baseline | the item isset so that its baseline is on the cross-axis |
| self-stretch | the item is stretched to fill the empty space of the cross-axis (default) |
Flex multi-line allignment
When a flexbox has more than 1 cross-axis lines, you need to align the collection of lines.
| multi-start | content is pushed to the start of the main axis |
| multi-center | content is pushed to the center of the main axis |
| multi-end | content is pushed to the end of the main axis |
| multi-between | each line is set at equal intervals along the axis, but may have inconsistent spacing |
| multi-around | content is set so that each line has the same "margins" within the main axis |
| multi-stretch | content is stretched to fill the empty space of the main axis (default) |
Flex Grid
A special flex-style grid that resizes each section of the grid so that the entire grid retains the same content in each row and column.
To use a flex grid:
- Create a grid class <div>
- Inside the grid, define row-<number> class divs
- In each row, place col-<number> class divs
| grid | a container for the flex grid that fully fills the object it is placed inside |
| row-<number> | a row of the grid with a flex grow/shrink factor set by a number from 1 to 12 |
| col-<number> | a column of a row with a flex grow/shrink factor set by a number from 1 to 12 |
Other Layout classes
Other non-flexbox related layout classes.
| block | defines a component as a HTML block element |
| invisible | makes a component invisble but the component will still occupy space in the document |
| relative | changes the component's position to relative |
| fit | forces the component to fill the entire window |
| scroll | will automatically add scrolling to any component with overflow |
| fullbleed | forces the component to be the full height of the browser window |
| fill | forces the object to completely fill the object it is inside |
| nopadding | remove all padding from a component |
| clear-float | remove any floating objects from this component |
| nofloat | remove any float property from the component |
| nomargin | remove all margins from a component |
| fixed-top | component is the full width of the screen and always expands from the top of the screen |
| fixed-bottom | component is the full width of the screen and always expands from the bottom of the screen |
| fixed-left | component is the full height of the screen and always expands from the left of the screen |
| fixed-right | component is the full height of the screen and always expands from the right of the screen |
| z-<number> | component has a z-index of number from 0 to 1000 in intervals of 100 |
Typography Classes
These classes affect the text that appears in a component.
Font Family
Cxdl uses the Google "Roboto" font for all text, but also uses the Google "Noto", and finally a generic sans-serif font.
| cxdl-font-family | sets text to use the above fonts and sets the line-height to equal the size of the font |
Font Size
Cxdl uses font sizes based on the root font size (rem units) of the document.
| font-sm | set the font size to 0.75 rem |
| font-1 | set the font size to 1.0 rem |
| font-1-5 | set the font size to 1.5 rem |
| font-2 | set the font size to 2.0 rem |
| font-2-5 | set the font size to 2.5 rem |
| font-3 | set the font size to 3.0 rem |
Font Weight
Cxdl uses 4 different font weights, which affect the thickness of the strokes:
| font-light | very thin letters (may not work with some browsers) |
| font-normal | average thickness |
| font-heavy | thicker letters (may not work with some browsers) |
| font-very-heavy | very thick letters |
Shadow Classes
These classes adjust, add, or remove a shadow from a component.
| no-shadow | removes a shadow from a component |
These classes create a shadow on an object. The higher the number, the larger the shadow.
- shadow-1
- shadow-2
- shadow-3
- shadow-4
- shadow-6
- shadow-8
- shadow-12
- shadow-16
Components
App-Container
An app container is a component that fills the screen and implements scrolling. This, in effect, creates a frame-like structure to deliver the content of an application.
<div class="app-container">
<div class="app-content">
Hooray! There's content in here!
</div>
</div>
- Component Classes
- app-container (required)
- The main component that defines an app container.
- app-content
- A special sub-component that ensures the full area of the app container is used.
Badge
An badge is a small component that displays overtop of another component.
<div class="icon notification badge-host">
<div id="notifications-badge" class="badge">6</div>
</div>
- Component Classes
- badge-host (required)
- The component the badge will be placed on top of.
- badge (required)
- The badge component itself.
- Attributes
- id (required)
- If you want to alter the badge with Javascript, you'll need an id to call it with. Then in your Javascript, you can use the cxdl_update_badge(id, value) function to change what is displayed in the badge.
| NOTE: | The cxdl_update_badge(id, value) function will hide the badge automatically if the value given is a "falsey" value (empty string, zero, null ). |
Button
An button is a component that is used to activate some type of interaction with the application. It is an extension of a native HTML <button>.
<button> Click me! </button>
- Component Classes
- A button does not have any component classes. It is a native HTML <button> tag.
- Style Classes
- icon-btn
- A button styled to display a clickable icon.
- toggle-btn
- A button that toggles from active to inactive.
| NOTE: | The toggle-btn class requires the element to have an id attribute, or it will not be able to toggle the element. |
- Behavior Classes
- active
- Use only with toggle-btn class.
- Shows the button in it's active state.
- Attributes
- A button is a standard HTML <button> tag and retains all standard HTML attributes.
Card
A card is a component that visually resembles a sheet of paper. A card can hold content on its own or you can use 3 card- classes inside it for easier organization.
<div class="card">
<div class="card-header"> This is the title! </div>
<div class="card-content">
Put some content in here!
</div>
<div class="card-actions">
Buttons, badges, and othe related "actions" go here.
</div>
</div>
- Component Classes
- card (required)
- The main component that defines a card.
- card-header
- A special sub-component of a card that has a larger font and margins.
- card-content
- A special sub-component of a card for inserting content.
- card-actions
- A special sub-component of a card for inserting buttons and other interactivity related to the content of the card.
- Style Classes
- solo-card
- Use only with card class.
- A large card that is meant to be used when there is no content nearby.
Checkbox
An checkbox is a component that is used to toggle a single value. It is an extension of a native HTML <input type="checkbox"> .
<div class="checkbox-aura" id="mycheckbox">
<div class="checkbox checked" id="mycheckbox-div"></div>
<label class="checkbox-label">My Checkbox</label>
<input type="checkbox" id="mycheckbox-input" name="mycheckbox" checked>
</div>
| NOTE: | The cxdl-django directory has a template ( cxdl-checkbox.html ) that serves as a standard configuration of components similar to the one shown in the example above. There is also a template ( cxdl-mutli-select.html ) for a group of checkboxes to select multiple items. |
- Component Classes
- checkbox-aura (required)
- The container for the checkbox.
- checkbox (required)
- The actual visual checkbox that will appear.
- <input type="checkbox"> (required)
- The native HTML input the component is mapped to.
- Style Classes
- checkbox-label
- Use this with a <label> tag to give it the proper styling for use with a checkbox.
- Behavior Classes
- checked
- Use only with checkbox class.
- Indicates that the checkbox should be checked.
| NOTE: | If this class is given to the checkbox class, make sure that the corresponding <input type="checkbox"> has the checked attribute as well. |
- Attributes
- id (required)
- The id is a common attribute that must remain consistent for each component of the checkbox. The naming convention is as follows:
- disabled
- Use only with checkbox class and the <input type="checkbox"> .
- Indicates that the checkbox should be disabled.
| NOTE: | If this class is given to the checkbox class, make sure that the corresponding <input type="checkbox"> has the disabled attribute as well. |
Collapse
A collapse is a container that can be hidden or shown via a toggle component.
<div class="collapse-toggle" data-collapse="my-collapse" data-group="group1">
There's some content in here. Click me to see more!
</div>
<div class="collapse" id="my-collapse">
<div class="collapse-content">
Neato! There's more stuff hidden in here!
</div>
</div>
- Component Classes
- collapse (required)
- Defines a collapse component.
- collapse-content (required)
- Defines the area where the content of a collapse component goes.
- collapse-toggle (required)
- A component the user clicks on to open/close the collapse component.
- Behavior Classes
- expanded
- Use only with collapse class.
- Indicates that the collapse should be open when the page loads.
| NOTE: | Only 1 collapse in each group can have the expanded class. |
- Attributes
- id (required)
- The collapse component must have an id so that any collapse-toggles can identify the collapse in their data-collapse attribute.
- data-collapse (required)
- Use only with collapse-toggle class.
- The id of the collapse this toggle applies to.
- data-group
- Use only with collapse-toggle class.
- A group that this collapse applies to. Only 1 collapse in each group can be active at a time. All other collapses in the same group will be closed. If a dcollapse has no data-group attribute, then it will be treated a separate collapse that is not associated with any group.
- data-direction
- Use only with collapse class.
- The direction the collapse will open/close. If set as horizontal , the collapse will expand to the right when opened. If set as vertical , the collapse will expand downward when opened. If no data-direction is indicated, the collapse defaults to vertical .
- Accepted Values: horizontal , vertical
Dialog
A dialog is a component that can be triggered to appear and stays on the screen until it is dismissed.
<div class="dialog-toggle" data-dialog="mydialog"
data-position="bottom-left" data-group="group1">
Click me to open a dialog!
</div>
<div class="dialog" id="mydialog">
This is a dialog.
</div>
- Component Classes
- dialog (required)
- Defines a dialog component.
- dialog-toggle (required)
- Defines the component the user clicks to open the dialog.
- Attributes
- id (required)
- Each dialog component must have an id so that a corresponding dialog-toggle can be associated to it in the data-dialog attribute.
- data-dialog (required)
- Use only with dialog-toggle class.
- The id of the dialog this toggle applies to.
- data-position
- Use only with dialog-toggle class.
- The position relative to the toggle that the dialog will appear. If no data-position is indicated, the dialog will open in the center of the screen.
- Accepted Values: top-left , top-center , top-right , bottom-left , bottom-center , bottom-right , center
- data-group
- Use only with dialog-toggle class.
- A group that this dialog applies to. Only 1 dialog in each group can be active at a time. All other dialogs in the same group will be closed. If a dialog has no data-group attribute, then it will be treated a separate dialog that is not associated with any group.
Dropdown
A dropdown is a component that is used to select a vlue from a specified list of options. It is an extension of a native HTML <select> .
<div class="dropdown">
<select>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
</div>
| NOTE: | The cxdl-django directory has a template ( cxdl-dropdown.html ) that serves as a standard configuration of components similar to the one shown in the example above. |
- Component Classes
- dropdown (required)
- The container for the dropdown.
- Attributes
- disabled
- Indicates that the dropdown should be disabled.
| NOTE: | If this attribute is given to the dropdown class, make sure that the corresponding <select> has the disabled attribute as well. |
Icon
An icon is a small component that displays a picture, known as an icon. Icons use the Google Material Icon web font.
<div class="icon person"></div>
- Component Classes
- icon (required)
- Defines an icon component.
| NOTE: | Because the icons are presented as a font, you cannot put text inside an icon component. |
- <icon name> (required)
- The name provided indicates the icon to display. The example.html contains a section with all of the available icons. Click on an icon to see the class name associated to it.
Input
A input is a component for entering text for an HTML form. It is simply a stylized version of a native HTML</code> <input> tag.
<input id="my_id" type="text" value="this is an input!" >
| NOTE: | The cxdl-django directory has a template ( cxdl-input.html ) that serves as a standard configuration of labels and an <input> similar to the one shown in the example above. |
- Component Classes
- An input does not have any component classes. It is a native HTML <input> tag.
- Style Classes
- input-error
- Use with a <label> tag to style it as an error message for the input.
- Attributes
- An input is a standard HTML <input> tag and retains all standard HTML attributes.
Label
An label is a component that marks an input or other small component. It is simply a stylized version of a native HTML <label> tag.
<label>A label for your thoughts...</label>
- Component Classes
- A label does not have any component classes. It is a native HTML <label> tag.
- Attributes
- A label is a standard HTML <label> tag and retains all standard HTML attributes.
List
A list is a set of components that display vertically.
<div class="lv">
<div class="list-item"> This is an item. </div>
<div class="list-item"> This is an item too. </div>
<div class="sub-list-item"> This is a sub-list item! </div>
<div class="sub-list-item"> Wowee! Here's another! </div>
<div class="list-item"> And this is another item. </div>
<div>
| NOTE: | It is best to place list-item and sub-list-item components in a lv class container to ensure they are positoned correctly. |
- Component Classes
- list-item
- Defines a list item component.
- sub-list-item
- Defines a sub-list item that has slightly larger left margin to indent it beneath the list item.
Navbar
An navbar is a component that sits off to the left side of teh screen, where you can store the navigation links. It swings out of the way when not in use and can be opened via a toggle, which can be set on one or multiple components.
<div class="navbar">
Put a list of links in here.
</div>
- Component Classes
- navbar (required)
- The main component that defines a navbar.
| NOTE: | It is assumed that there is only one navbar per page. If you have multiple navbars, the toggle will open/close all of them at the same time. |
- navbar-toggle (required) The toggle component that open/closes the navbar. You may have multiple toggle components.
Sidebar
A sidebar is a navbar which has some content visible at all times, and other content that is only visible when it is expanded.
<div class="sidebar" id="side-nav">
<div class="sidebar-item">
<div class="sidebar-toggle"></div>
<div class="sidebar-hide"></div>
</div>
<div class="sidebar-item">
<div class="sidebar-icon person"></div>
<div class="sidebar-hide sidebar-text">Users</div>
</div>
<div class="sidebar-item">
<div class="sidebar-icon settings"></div>
<div class="sidebar-hide sidebar-text">Settings</div>
</div>
</div>
| NOTE: | The sidebar-toggle must be a child of the sidebar class. |
- Component Classes
- sidebar (required)
- The main component that defines a sidebar.
- sidebar-toggle (required) The toggle component that open/closes the navbar. You may have multiple toggle components.
| NOTE: | It is assumed that a sidebar only has a single toggle. Multiple toggles for teh same sidebar could cause unwanted behavior. |
- sidebar-icon
- A special variant of the icon class for use in a sidebar-item
- sidebar-hide
- Any component thats hould be collapsed when the sidebar is inactive.
- Behavior Classes
- active
- Use only with sidebar-toggle class.
- Indicates that the sidebar should be open when the page loads.
- Style Classes
- sidebar-item
- Each row of the sidebar content should be in an element with this class, as it helps standardize the spacing of elements.
- sidebar-text
- Applies proper padding to text for spacing.
- Attributes
- id (required)
- Each sidebar component must have an id so that CxDL can identify it for behaviors.
Tab
A tab is a component that can hide or show another container of data. A collection of tabs are placed in a tab bar and each tab is linked to a tab content component.
<div class="tab-bar">
<div class="tab active" data-tab="tab1" data-group="group1"> Tab 1 </div>
<div class="tab" data-tab="tab2" data-group="group1"> Tab 2 </div>
</div>
<div class="tab-content" id="tab1">
This is TAB 1.
</div>
<div class="tab-content" id="tab2">
This is TAB 2.
</div>
- Component Classes
- tab (required)
- tab-bar (required)
- Defines the area where the tab components reside.
- tab-content (required)
- A container linked to a specific tab.
- Behavior Classes
- active
- Use only with tab class.
- Indicates that the tab should be displayed when the page loads.
| NOTE: | Only 1 tab in each group can have the active class. If no tab is given the active class, no content will be displayed. |
- Attributes
- id (required)
- Each tab-content component must have an id so that a corresponding tab can be associated to it in the data-tab attribute.
- data-tab (required)
- Use only with tab class.
- The id of the tab-content this tab applies to.
- data-group
- Use only with tab class.
- A group that this tab applies to. If a tab has no data-group attribute, then it will be considered as grouped with any other tabs that do not have a data-group . Only 1 tab in each group can be active at a time. This allows you to have multiple tabbed views in a single page.
Toast
A Toast is a small card-like component that can be triggered to appear and then disappears after a set amount of time.
<div class="relative">
<div class="toast" id="mytoast">
To our girlfriends and wives, may they never meet.
</div>
</div>
<button onclick="open_toast('mytoast')">A Toast!</button>
- Component Classes
- toast (required)
- Defines an toast component.
| NOTE: | A toast component is positioned absolutely. As such, it is not part of the normal HTML flow and it is ideal that you create a host element that is a non-static positioning for the toast to work properly. When the toast appears, it will appear at the top-left corner of the host element. |
- Attributes
- id (required)
- Each toast component must have an id so that it can be triggered by the open_toast(id) Javascript function. Use the open_toast(id) function to trigger the toast. You can also use the close_toast(id) to close a toast prematurely or a toast that has the data-stayopen set to zero.
- data-direction
- The direction the toast will appear from. The toast begins off-screen and them will slide across the screen to the host element (or the top-left corner of the page, if no host element is supplied). If no data-direction is indicated, the toast will come from the bottom of the screen.
- Accepted Values: top , right , left , bottom
- data-stayopen
- The number of seconds the toast should stay visible before it disappears. If this is set to zero, the toast will never disappear. If no data-stayopen is indicated, the toast will disappear after 3 seconds.
Toolbar
A toolbar is a component that fills the width of the screen and will be displayed above all other content (except a Navbar).
<div class="toolbar">
<div class="toolbar-title"> This is the title! </div>
<div class="toolbar-item">An item on the toolbar</div>
<div class="toolbar-item">Another item on the toolbar</div>
</div>
- Component Classes
- toolbar (required)
- The main component that defines a toolbar.
- toolbar-title
- A special sub-component of a toolbar that has a larger font and margins.
- toolbar-item
- A special sub-component of a toolbar that easily spaces items and colors the font.
- footer
- A variation of the toolbar meant to be used at the bottom of a page or element.
Global Functions
Once the cxdl-widgets.js script is included in your document, several functions are available globally within scripts to trigger different behaviors of the CxDL.
cxdl_switch_tab(tab_id)
Switches a tab group to the identified tab .
Parameters:
| tab_id | the id of an element with the tab class |
cxdl_toggle_collapse(toggle_id)
Changes a collapse from its current state (active or inactive), to the opposite state.
Parameters:
| toggle_id | the id of an element with the collapse-toggle class |
cxdl_open_collapse(toggle_id)
Sets a collapse to active state, closing any other collapses in the same group.
Parameters:
| toggle_id | the id of an element with the collapse-toggle class |
cxdl_close_collapse(toggle_id)
Set a collapse to inactive state.
Parameters:
| toggle_id | the id of an element with the collapse-toggle class |
cxdl_close_all_collapses(group = null)
Sets all collapses to inactive state. If a group is specified, will only close collapses from that group.
Parameters:
| group | the data-group which identifes the group of collapses to close |
cxdl_open_toast(toast_id)
Activates a toast (and starts its countdown to expire).
Parameters:
| toast_id | the id of an element with the toast class |
cxdl_close_toast(toast_id)
Dismisses a toast immediately.
Parameters:
| toast_id | the id of an element with the toast class |
cxdl_close_all_toasts()
Dismisses all toasts immediately.
cxdl_update_badge(badge_id, value)
Places the value inside the element with an id of badge_id . If value equates to a falsey value (/'' , false , 0 , null , undefined , etc. ), then the bagde will be hidden from view.
Parameters:
| badge_id | the id of an element with the badge class |
cxdl_toggle_button(button_id)
Changes a toggle-btn classed element from its current state (active or inactive), to the opposite state.
| NOTE: | This does not actually trigger any behavior, it only changes the visual state and class of the element identifed by button_id . |
Parameters:
| button_id | the id of an element with the toggle-btn class |
cxdl_toggle_dialog(toggle_id)
Changes a dialog and its toggle from its current state (active or inactive), to the opposite state.
Parameters:
| toggle_id | the id of an element with the dialog-toggle class |
cxdl_open_dialog(toggle_id)
Sets a dialog and its toggle to active state, closing any other dialogs in the same group.
Parameters:
| toggle_id | the id of an element with the dialog-toggle class |
cxdl_close_dialog(toggle_id)
Sets a dialog and its toggle to inactive state, closing any other dialogs in the same group.
Parameters:
| toggle_id | the id of an element with the collapse-toggle class |
cxdl_close_dialog_by_id(dialog_id)
Set a dialog to inactive state. Because dialogs can be triggered by multiple dialog-toggle elements, we do not have to specify the toggle in order to close the dialog. Thus, we can use the id of the dialog element itself.
Parameters:
| dialog_id | the id of an element with the dialog class |
cxdl_close_all_dialogs(group = null)
Sets all dialogs and toggles to inactive state. If a group is specified, will only close dialogs from that group.
Parameters:
| group | the data-group which identifes the group of dialogs to close |
cxdl_toggle_checkbox(checkbox_aura_id)
Changes a checkbox from its current state (active or inactive), to the opposite state.
Parameters:
| checkbox_aura_id | the id of an element with the checkbox-aura class |
cxdl_check_checkbox(checkbox_aura_id)
Sets a checkbox to active state ( checked ).
Parameters:
| checkbox_aura_id | the id of an element with the checkbox-aura class |
cxdl_uncheck_checkbox(checkbox_aura_id)
Sets a checkbox to inactive state ( not checked ).
Parameters:
| checkbox_aura_id | the id of an element with the checkbox-aura class |
cxdl_toggle_navbar()
Changes the navbar from its current state (active or inactive), to the opposite state.
cxdl_open_navbar()
Opens the navbar to active state.
cxdl_close_navbar()
Closes the navbar to inactive state.
cxdl_toggle_sidebar(sidebar_id)
Changes a sidebar and its toggle from its current state (active or inactive), to the opposite state.
Parameters:
| sidebar_id | the id of an element with the sidebar-toggle class |
cxdl_open_sidebar(toggle_id)
Sets a sidebar and its toggle to active state.
Parameters:
| sidebar_id | the id of an element with the sidebar-toggle class |
cxdl_close_sidebar(toggle_id)
Sets a sidebar and its toggle to inactive state.
Parameters:
| sidebar_id | the id of an element with the sidebar-toggle class |
Generated 02:14PM 10 Jun 2025
Documentation generated by Ketchup v2.6.0
Developed by Charles Koch - 2024