Css

CSS only Loading Animations

UPDATED VERSIONS COMING WITH MORE LOADING DESIGN OPTIONS

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

UPDATED VERSION COMING, REMOVING UNUSED OPTIONS

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

Tailwind Page Sizes

For tailwind to utilize different classnames at different page widths the page size needs to be add to the classnames. For example md:p-0 will attach padding 0 css to the element at the medium size. The sizes available are sm (640px), md (768px), and lg (1024px) and when added in order will trigger different css for each page width.

<div class="w-full sm:2/3 md:w-1/2 lg:w-1/4">
    This div will be 1/4 width when the page is 1024px or wider, 1/2 width between 768px and 1023px, and 2/3 between 640px and 767px, and full width below 640px. 
</div>

Full bleed

UPDATED VERSION COMING

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.