Follow

Utility Styles

Utility styles are classes that are available on any site that allow you to quickly add styles to an element to spruce up your content.

--> Some styles may look best with a page that spans the entire width of the browser, if you're not sure how to do this please get with your account manager.

Containers

Containers allow you to quickly add a width to a block element (div, p, section). The following classes will add a set width and center the element horizontally within it's parent. 

  • dak-contain-xs: 640px
  • dak-contain-sm: 800px
  • dak-contain-md: 960px
  • dak-contain-lg: 1120px
  • dak-contain-xl: 1280px
  • dak-contain-xxl: 1440px

The above widths are the maximum size they will be and they will get smaller as their parent gets smaller. For example, if you have a div with a class of dak-contain-xs and then put another div inside with a class of dak-contain-xxl, the second div will be 640px as well because it's parent's maximum width is 640px, and not 1440px.

Background Styles 

There are times where you might want to add a background to an element (note this works best with block elements like div, p, section). Additionally, if you select a background color/image that is dark, you can set all the text inside your element to white by adding a class of dak-text-light to the element.

Solid Colors

  • dak-main-bg: Sets the background color to the main color of your website
  • dak-alt-bg: Sets the background color to the alt color of your website
  • dak-accent-bg: Sets the background color to the light color of your website. This may be white however.
  • dak-bg-light: Sets the background color to a light gray if dak-accent-bg is white.

Images

If you'd like to add an image to a block element, you will need to upload the image (please resize and optimize it!), and add it as a style to the element you need it on. To do this you'll get the URL of the image, and add it as a style and add dak-bg-image as a class:

<div class="dak-bg-image dak-text-light" style="background-image:url('URLOFIMAGE');">

dak-bg-image sets the background to a dark-gray so your text will still be visible if the image does not load. The example also adds dak-text-light to the class list, so the text is still readable.

If you have a lighter image and want a light background fallback, you can use dak-bg-image-light instead. You'd omit the dak-text-light class in this case.

Overlays

Sometimes images may be too busy, or not provide enough contrast for text laid on top of this. This is an important consideration for people who may have difficulty reading text. We offer a few overlays to help resolve this. The percentages below indicate how much of the image the overlay darkens or lightens. An overlay of 60% appears darker than 15%.

Solid Overlays

  • dak-overlay-dark: Adds a black overlay that is set to 40%
  • dak-overlay-dark-subtle: Adds a black overlay that is set to 15%
  • dak-overlay-dark-heavy: Adds a black overlay that is set to 60%

  • dak-overlay-light: Adds a white overlay that is set to 40%
  • dak-overlay-light-subtle: Adds a white overlay that is set to 15%
  • dak-overlay-light-heavy: Adds a white overlay that is set to 60%

Gradient Overlays

  • dak-overlay-dark-b: Adds a dark overlay that is heavier on the bottom and lighter on the top.
  • dak-overlay-dark-t: Adds a dark overlay that is heavier on the top and lighter on the bottom.
  • dak-overlay-dark-r: Adds a dark overlay that is heavier on the right and lighter on the left.
  • dak-overlay-dark-l: Adds a dark overlay that is heavier on the left and lighter on the right.

  • dak-overlay-light-b: Adds a light overlay that is heavier on the bottom and lighter on the top.
  • dak-overlay-light-t: Adds a light overlay that is heavier on the top and lighter on the bottom.
  • dak-overlay-light-r: Adds a light overlay that is heavier on the right and lighter on the left.
  • dak-overlay-light-l: Adds a light overlay that is heavier on the left and lighter on the right.

Padding (px)

The above styles do not add any padding to the inside of the element they are placed on, so any text added will end up butting up against the sides. To avoid this, you can use a class to add padding.

  • dak-pad-6: Will add 6 pixels of padding 
  • dak-pad-12: Will add 12 pixels of padding
  • dak-pad-18: Will add 18 pixels of padding
  • dak-pad-24: Will add 24 pixels of padding
  • dak-pad-36: Will add 36 pixels of padding
  • dak-pad-48: Will add 48 pixels of padding
  • dak-pad-60: Will add 60 pixels of padding

The padding is added to all 4 sides.

These classes are also tied to our media query sizing, so if you want to use bigger padding on wider screens (like laptops) and smaller padding on small screens (like phones), you can use:

  • dak-pad-6: default, all browser width sizes
  • dak-pad-sm-6: Will affect browsers of width 552 pixels or larger
  • dak-pad-md-6: Will affect browsers of width 768 pixels or larger
  • dak-pad-lg-6: Will affect browsers of width 992 pixels or larger
  • dak-pad-xl-6: Will affect browsers of width 1200px or larger

Just change the "6" to whatever width you need at different sizes.

TIP: Media Queries are based on the current browser size, so you can see them work if you resize your browser. If your element is smaller than the browser width, it might behave oddly if it has a classes of:

"dak-contain-sm dak-pad-12 dak-pad-xl-60"

Since at screen sizes 1200px and above the padding will suddenly jump to 60, but the size of the container doesn't change. To use media query options for padding please be mindful of your container size!

Granular Padding/Margin (rem)

There are also larger padding and margin options that are rem based (1rem  generally equals about 16px). The classes in this section allow you to add uneven padding to each side as needed. These classes are also responsive by default so the size option does not apply to these. These are ideal for large, full width features where you need more space on the top/bottom than on the sides.

Padding is used to add space on the inside of a container. Margin is used to add space around a container and collapses vertically. For example. If you have 2 elements on top of each other, each with 2rem padding, there will be 4rem (~64px) of space between each div. If they have 2rem (~32px) margin, there will only be 2rem of space between them. If your elements are different colors, you'll want padding, but if they are the same color, you'll likely want to use margin.

Padding

  • dak-p-1: Adds 1rem (~16px) of padding inside the container
  • dak-p-2: Adds 2rem (~32px) of padding inside the container
  • dak-p-3: Adds 3rem (~48px) of padding inside the container
  • dak-p-4: Adds 4rem (~64px) of padding inside the container
  • dak-p-5: Adds 5rem (~80px) of padding inside the container
  • dak-p-6: Adds 6rem (~96px) of padding inside the container
  • dak-p-7: Adds 7rem (~112px) of padding inside the container

Margin

  • dak-m-1: Adds 1rem (~16px) of margin outside the container
  • dak-m-2: Adds 2rem (~32px) of margin outside the container
  • dak-m-3: Adds 3rem (~48px) of margin outside the container
  • dak-m-4: Adds 4rem (~64px) of margin outside the container
  • dak-m-5: Adds 5rem (~80px) of margin outside the container
  • dak-m-6: Adds 6rem (~96px) of margin outside the container
  • dak-m-7: Adds 7rem (~112px) of margin outside the container

Adding Padding or Margin to specific sides

Each of the above classes can be augmented with a "side" option. We'll use the 1rem class as an exmple:

  • dak-px-1: Adds 1rem (~16px) of padding to the left and right sides only (x-axis)
  • dak-py-1: Adds 1rem (~16px) of padding to the top and bottom sides only (y-axis)
  • dak-pt-1: Adds 1rem (~16px) of padding to the top only
  • dak-pb-1: Adds 1rem (~16px) of padding to the bottom only
  • dak-pl-1: Adds 1rem (~16px) of padding to the left only
  • dak-pr-1: Adds 1rem (~16px) of padding to the right only

You can switch out the "p" with "m" and the "1" with any number from 1-7 as needed. These classes can be mixed to achieve uneven sides:

"dak-contain-sm dak-px-1 dak-pt-2 dak-pb-1"

Text

Leading Text

There may be instances where you'd like some text to be slightly larger than the standard text. For example, paired with the classes above for a hero-type feature, you'll be able to have the text in that section stand out just a little bit more than the rest of the text on the page.

  • dak-lead: Increases size slightly over the common text size
  • dak-lead-lg: Increases size a little more over the common text size
  • dak-lead-xl: Increases size a little more over the common text size

Headlines

The base styles for the headlines may be overridden on your website based on your design. However, you can also use these styles as a class. For example, hierarchically you need an h3, but you want it to visually appear like an h1, you can add a class of h1 to the element. '<h3 class="h1">Larger Header</h3>

The size pair on the left is the browser size at wider and smaller screens. The size pair on the right is the approximate font size in pixels based on our standard body size.

  • h1: 3.0rem {1.6rem} | ~48px {~26px}
  • h2: 2.5rem {1.5rem} | ~40px {~24px}
  • h3: 2.0rem {1.4rem} | ~32px {~23px}
  • h4: 1.6rem {1.3rem} | ~26px {~21px}
  • h5: 1.3rem {1.2rem} | ~21px {~19px}
  • h6: 1.15rem {1.2rem} | ~19px {~18px}

Display Headlines

There may be times when a header needs to be larger than it's usual default size. We have 6 additional display sizes that can be used to increase the size of headlines:

  • dak-display-a: 3.5rem {1.7rem} | ~56px {~27px}
  • dak-display-b: 4.0rem {1.8rem} | ~64px {~29px}
  • dak-display-c: 4.5rem {2.0rem} | ~72px {~32px}
  • dak-display-d: 5.0rem {2.3rem} | ~80px {~37px}
  • dak-display-e: 5.5rem {2.6rem} | ~88px {~42px}
  • dak-display-f: 6.0rem {3.0rem} | ~96px {~48px}

Quick Styles

These classes allow you to add quick styling to text without having to worry about what the specific CSS would be:

  • dak-primary-font: sets the text to use the body font family
  • dak-accent-font: sets the text to use the header font family
  • dak-main-text: sets the text to use the main colordak-accent-text`: sets the text to use the accent (light) color
  • dak-text-light: sets the text color to white. Use on a surrounding element to set all text to white quickly!
  • dak-text-center: align text to the center
  • dak-text-right: align text to the right
  • dak-text-left: align text to the left
  • dak-uppercase: make text all caps
  • dak-capitalize: capitalize each word
  • dak-lowercase: make text all lowercase
  • dak-small-caps: make text small caps
  • dak-text-shadow: add a small dark text shadow 
  • dak-text-shadow-light: add a small light text shadow

Separators

Horizontal rules (<hr>) are a quick way to separate content. We've added 3 styles for hr tags. All of these classes add some margin on the top and bottom to help add separation without adding extra empty elements.

  • dak-hr: sets the hr to a dark gray
  • dak-hr-light: sets the hr to white
  • dak-separator: no color but still has margin
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Need Additional Support?

Our team is here to help.

Contact Us
Powered by Zendesk