CxDL v2.2.1
Charles Koch - July 28, 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 |
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
- 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 update_badge(id, value) function to change what is displayed in the badge.
| NOTE: | The update_badge(id, value) function will hide the badge automatically if the value given is an integer of zero. |
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.
- 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 checked 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 name must match the given name from the Google Material Icons: https://design.google.com/icons
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="layout-vertical">
<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 layout-vertical 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.
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.
Generated 11:24AM 14 Aug 2024Documentation generated by Ketchup v2.2.1Developed by Charles Koch - 2020