Utility Styles – Dakno Support

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

Constrained Width

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.

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

Expanding Height

There may be times that you want a container to take up at least the entire height (viewport) of a screen/device at all or specific screen width. The following classes will allow you to take advantage of the vertical height of a device. Keep in mind that this may not be appropriate for every screen, or you may only want it the full height on most screens but not small ones (eg. phones).

dak-full-height: height will be at least the height of the screen/device.
dak-full-height-lg-shrink: height will be at least the height of the screen/device at 992px or larger.
dak-full-height-md-shrink: height will be at least the height of the screen/device at 768px or larger.

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
dak-font-sm: Decreases size to roughly 14px
dak-forn-normal: Sets the size to roughly 16px

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 color
dak-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
dak-undecoration: remove decoration on text (like underline on a link)

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. (May be white for many websites).
dak-light-bg: Sets the background color to a light gray
dak-dark-bg: Sets the background color to very dark (#2c2c2c)
dak-dark-medium-bg: Sets the background color to a dark gray (#555)
dak-white-bg: Sets the background color to 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 via lazyloading. To do this you'll get the URL of the image, and add dak-bg-image and lazyload as classes, then set an attribute of data-bg equal to the image URL:

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

When putting text on top of a background image, if the image is too busy, or doesn't contrast enough with the text, it may be difficult to read the 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%
dak-overlay-main: Adds a 40% overlay in site's main color
dak-overlay-main-subtle: Adds a 15% overlay in site's main color
dak-overlay-main-heavy: Adds a 60% overlay in site's main color
dak-overlay-alt: Adds a 40% overlay in site's alternate color
dak-overlay-alt-subtle: Adds a 15% overlay in site's alternate color
dak-overlay-alt-heavy: Adds a 60% overlay in site's alternate color

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.

Overlay Hovers

dak-overlay-to-main
dak-overlay-to-main-full / subtle / heavy
dak-overlay-to-light
dak-overlay-to-light-full / subtle / heavy
dak-overlay-to-dark
dak-overlay-to-dark-full / subtle / heavy

Bottom Arrows

A cut-out arrow on the bottom of a div helps lead into the next section. These are intended to go on an element with an image background. Elements with overlays also work. This adds a 40px tall cut-out arrow on the bottom of the div where you can see the image through the arrow and there is a solid color to the right/left of the cut out.

dak-e-arrow-bottom: White (shown above)
dak-e-arrow-bottom-main: Main color of site
dak-e-arrow-bottom-alt: Alternate color of site
dak-e-arrow-bottom-accent: Accent color of site
dak-e-arrow-bottom-light: A light gray color
dak-e-arrow-bottom-dark: Almost black gray
dak-e-arrow-bottom-dark-medium: Dark gray

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

List Styles

You can place these classes directly on an ordered or unordered list. List items will display from Left to Right, then wrap to the next row.

Use

Change dak-list-2 to 3 depending on how many columns you need.

Example: 2 columns

<ul class="dak-flex-list dak-flex-list-2"> <li>Content</li> <li>Content</li> <li>Content</li> </ul>

Advanced Styles

dak-block: Sets display: block
dak-inline-block: Sets display: inline-block
dak-position-rel: Sets a position of relative
dak-overflow-hidden: Hides overflow
dak-bg-parallax: Creates a parallax effect on a background image
dak-bg-fit: Used on a div with an image inside to create the illusion of a background image