Cerrax Display Library (CxDL)
Generic Classes and Variables
Layout Classes
Flexbox
Flex item shrink/grow
Flex align-items
Flex justify
Flex align-self
Flex multi-line allignment
Flex Grid
Other Layout classes
Typography Classes
Font Family
Font Size
Font Weight
Shadow Classes
Components
App-Container
Badge
Button
Card
Checkbox
Collapse
Dialog
Dropdown
Icon
Input
Label
List
Navbar
Tab
Toast
Toolbar
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-smallThe content disappears when the screen width is less than 570px
truncate-smallThe content will truncate the text with ellipsis ( ... ) when the screen width is less than 570px
truncate-textThe 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.
ldefines the component as a flexbox
lidefines the component as an inline-flexbox
lhdefines the component as a flexbox that sets objects horizontally, left-to-right
lh-reversedefines the component as a flexbox that sets objects horizontally, right-to-left
lvdefines the component as a flexbox that sets the objects vertically, top-to-bottom
lv-reversedefines the component as a flexbox that sets the objects vertically, bottom-to-top
wrapindicates that a flexbox should wrap the items to the next line if they don't fit
wrap-reverseindicates that a flexbox should wrap the items on the opposite side that they are laid out from
nowrapindicates 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-autoautomatically sets the grow/shrink values (default)
flex-0item will not grow or shrink as the box changes size
flex-shrinkitem 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.
startitems are pushed to the start of the cross-axis
centeritems are pushed to the center of the cross-axis
enditems are pushed to the end of the cross-axis
baselineitems are set so that all their baselines are lined up
stretchstretch 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-jcontent is pushed to the start of the main axis (default)
center-jcontent is pushed to the center of the main axis
end-jcontent is pushed to the end of the main axis
around-jcontent is set so that each item has the same "margins" within the main axis
jcontent 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-startthe item is pushed to the start of the cross-axis
self-centerthe item is pushed to the center of the cross-axis
self-endthe item is pushed to the end of the cross-axis
self-baselinethe item isset so that its baseline is on the cross-axis
self-stretchthe 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-startcontent is pushed to the start of the main axis
multi-centercontent is pushed to the center of the main axis
multi-endcontent is pushed to the end of the main axis
multi-betweeneach line is set at equal intervals along the axis, but may have inconsistent spacing
multi-aroundcontent is set so that each line has the same "margins" within the main axis
multi-stretchcontent 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:
  1. Create a grid class <div>
  2. Inside the grid, define row-<number> class divs
  3. In each row, place col-<number> class divs
grida 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.
blockdefines a component as a HTML block element
invisiblemakes a component invisble but the component will still occupy space in the document
relativechanges the component's position to relative
fitforces the component to fill the entire window
scrollwill automatically add scrolling to any component with overflow
fullbleedforces the component to be the full height of the browser window
fillforces the object to completely fill the object it is inside
nopaddingremove all padding from a component
clear-floatremove any floating objects from this component
nofloatremove any float property from the component
nomarginremove all margins from a component
fixed-topcomponent is the full width of the screen and always expands from the top of the screen
fixed-bottomcomponent is the full width of the screen and always expands from the bottom of the screen
fixed-leftcomponent is the full height of the screen and always expands from the left of the screen
fixed-rightcomponent 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-familysets 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-smset the font size to 0.75 rem
font-1set the font size to 1.0 rem
font-1-5set the font size to 1.5 rem
font-2set the font size to 2.0 rem
font-2-5set the font size to 2.5 rem
font-3set the font size to 3.0 rem
Font Weight
Cxdl uses 4 different font weights, which affect the thickness of the strokes:
font-lightvery thin letters (may not work with some browsers)
font-normalaverage thickness
font-heavythicker letters (may not work with some browsers)
font-very-heavyvery thick letters
Shadow Classes
These classes adjust, add, or remove a shadow from a component.
no-shadowremoves a shadow from a component
These classes create a shadow on an object. The higher the number, the larger the shadow.
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>
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>
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>
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>
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.
NOTE: If this class is given to the checkbox class, make sure that the corresponding <input type="checkbox"> has the checked attribute as well.
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>
NOTE: Only 1 collapse in each group can have the expanded class.
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>
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.
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>
NOTE: Because the icons are presented as a font, you cannot put text inside an icon component.
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.
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>
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.
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>
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.
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>
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.
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>
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.
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>
Generated 11:24AM 14 Aug 2024
Documentation generated by Ketchup v2.2.1
Developed by Charles Koch - 2020