Css

Tailwind

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

For more information on how these work visit the Tailwind Responsive Design Documentation.

What is included?

The following parts of Tailwind have been included in the global style sheet.

Margin
Padding
Grid Template
Width
Display
Flex
Justify Content
Text Align

Only the width classnames are available in the `sm:`, `md:`, and `lg:` designations.

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.

Css