Css

CSS only Loading Animations

The classname of dk-skeleton will add a left to right animated background color to whatever element it is added to. Example below is added to a dk-card div. Remove the classname when the content is loaded to stop the animation. This classname had a min-height of 40px attached, other layout styles will need to be added per project.

The classname of dk-loading-icon will add a circular loading animation. This element will need to be shown/hidden per use.

Tailwind

The global style guide includes parts of the CSS framework known as Tailwind.

All Tailwind utilities have responsive class variants. For more information on how these work visit the Tailwind Responsive Design Documentation. Certain components of the style guide also have these class variants. Check the documentation pages to find out which components have responsive variants.

What is included?

The following core parts of Tailwind have been included in the global style sheet (links lead to Tailwind documentation).

• Margin
• Padding
• Accessibility
• Text Align
• Width
• Flex
• Gap
• Grid Column
• Grid Template Columns
• Grid Column Start
• Grid Column End
• Font Size
• Display
• Flex Direction
• Align Items
• Justify Content
• Flex Wrap
• Box Shadow
• Border Radius
• Space
• Border Width
• Border Style

Full bleed

Add the classname full-bleed to the outermost div of the section that needs to appear full-width on the page.

White or gray can be specified as a background color by using: full-bleed--gray or full-bleed--white. View the Analog Devices supplier center Tools and Support section for an example.

<div class="full-bleed">
  <p>
    Some full-bleed content without a set background color.
  </p>
</div>

LTR and RTL

Add the classname dk-ltr to declare the direction of left-to-right. Add the classname dk-rtl to declare the direction of right-to-left. Useful on part numbers and English only text to keep words and special characters in the correct order.