11.1 #Settings.duk Duk Overrides
See scss/_settings.scss for all values.
Source:
styles/scss/settings/_duk-settings.scss
, line 1
11.1.2 #Settings.duk.colors Colors
Various color maps
$duk-colors: (
'valhalla': #261C54, // Dark purple.
'purple-heart': #5C21D8, // Mid purple.
'waterloo': #7d7798, // Light purple.
'purple-tint': #F4F3F3, // Very light purple.
'mango': #FFBE0B, // Yellow.
'mine-shaft': #333333, // Dark grey.
'op-dark-tint-1': rgba(#111, 0.2),
'op-dark-tint-2': rgba(#111, 0.1),
);
$duk-palette: (
'primary': map-get($duk-colors, 'valhalla'),
'primary-light': map-get($duk-colors, 'purple-heart'),
'secondary': map-get($duk-colors, 'mango'),
'tertiary': map-get($duk-colors, 'purple-tint'),
'body-text': map-get($duk-colors, 'mine-shaft'),
'tint': map-get($duk-colors, 'purple-tint'),
'white': #ffffff,
'op-dark-tint-1': map-get($duk-colors, 'op-dark-tint-1'),
'op-dark-tint-2': map-get($duk-colors, 'op-dark-tint-2'),
);
$duk-font-colors: map-merge($duk-palette, (
'body': map-get($duk-palette, 'body-text'),
'heading': map-get($duk-palette, 'primary'),
'highlght-heading': map-get($duk-palette, 'primary'),
'link': map-get($duk-palette, 'primary'),
'light-on-primary': map-get($duk-palette, 'tint'),
'lightest-on-primary': map-get($duk-palette, 'white'),
'nav': map-get($duk-palette, 'body-text'),
'nav-hover': map-get($duk-palette, 'primary-light'),
));
$duk-bg-colors: map-merge($duk-palette, (
'body': map-get($duk-palette, 'white'),
'tint': map-get($duk-palette, 'tint'),
'highlight': map-get($duk-palette, 'primary'),
'op-dark-tint-1': map-get($duk-palette, 'op-dark-tint-1'),
'op-dark-tint-2': map-get($duk-palette, 'op-dark-tint-2'),
));
$duk-button-colors: (
'primary': map-get($duk-palette, 'primary'),
'primary-text': map-get($duk-palette, 'white'),
'primary-icon': map-get($duk-palette, 'secondary'),
'secondary': map-get($duk-palette, 'secondary'),
'secondary-text': map-get($duk-palette, 'primary'),
'secondary-icon': map-get($duk-palette, 'primary'),
'tertiary': map-get($duk-palette, 'tertiary'),
'tertiary-text': map-get($duk-palette, 'primary'),
'tertiary-icon': map-get($duk-palette, 'primary'),
'light': map-get($duk-palette, 'white'),
'light-text': map-get($duk-palette, 'primary'),
'light-icon': map-get($duk-palette, 'secondary'),
'transparent': rgba(map-get($duk-palette, 'white'), 0.1),
'transparent-text': map-get($duk-palette, 'white'),
'transparent-icon': rgba(map-get($duk-palette, 'white'), 0.9),
);
$duk-border-colors: map-merge($duk-palette, ());
Source:
styles/scss/settings/_duk-settings.scss
, line 113
11.1.3 #Settings.duk.layouts Layouts
$duk-content-min-height: 600px;
$duk-base-containers: (
'x-small': 576px,
'small': 768px,
'medium': 992px,
'large': 1200px,
'x-large': 1440px,
'xx-large': 1680px,
'xxx-large': 1800px,
'max': 1920px,
);
$duk-base-breakpoints: (
'none': 0,
'x-small': 300px,
'small': 576px,
'medium': 768px,
'large': 992px,
'x-large': 1200px,
'xx-large': 1300px,
'xxx-large': 1590px,
'xxxx-large': 1800px,
);
$duk-base-breakpoint-states: (
'desktop-menu': x-large,
'no-horizontal-gutter': xx-large,
);
$duk-base-responsive-grids: (
'4-col': (medium: 2, x-large: 4),
);
Source:
styles/scss/settings/_duk-settings.scss
, line 277
11.1.4 #Settings.duk.spacing-unit Spacing unit
$duk-base-spacing-unit: 1rem;
$duk-half-spacing-unit: $duk-base-spacing-unit / 2;
$duk-quarter-spacing-unit: $duk-base-spacing-unit / 4;
$duk-one-n-half-spacing-unit: $duk-base-spacing-unit * 1.5;
$duk-double-spacing-unit: $duk-base-spacing-unit * 2;
$duk-triple-spacing-unit: $duk-base-spacing-unit * 3;
$duk-quad-spacing-unit: $duk-base-spacing-unit * 4;
Source:
styles/scss/settings/_duk-settings.scss
, line 7
11.1.5 #Settings.duk.typography Typography
$duk-base-font-family: 'tt_commons', sans-serif;
$duk-base-font-sizes: (
'h1': (size: 2.1em, height: 1.4),
'h2': (size: 2.0em, height: 1.4),
'h5': (size: 1.3em, height: 1.4),
'h4': (size: 1.2em, height: $duk-base-line-height),
);
$duk-base-font-weights: (
'regular': 400,
'medium': 600,
'bold': 700,
);
Loading Fonts
You can update `$duk-base-font-includes` per sub theme to load theme specificfonts. This can also be assigned a url for externally loaded fonts.
Set to false to disable this functionality all together.
$duk-base-font-includes: (
'tt_commons': (
path : '../../fonts/tt_commons',
formats: ('woff', 'woff2'),
variants: (
('tt_commons_regular-webfont', 400, normal),
('tt_commons_medium-webfont', 500, normal),
('tt_commons_demibold-webfont', 700, normal),
),
),
);
Source:
styles/scss/settings/_duk-settings.scss
, line 28
Source:
styles/scss/settings/_hero.scss
, line 1
11.2.1 #Settings.hero.basic Basic banner
Settings used for the smaller basic banner
$hero-basic--height--small: 150px;
$hero-basic--height--large: 300px;
Source:
styles/scss/settings/_hero.scss
, line 25
11.2.2 #Settings.hero.large Large banner
Settings used for the banner primarily used on the homepage.
$hero-banner-content-width--large: calc((100vw * 0.4) - (100vw - #{map-get($duk-base-containers, 'large')})/2);
$hero-banner-home--height--small: 500px;
$hero-banner-home--height--medium: 400px;
$hero-banner-home--height--large: 500px;
Source:
styles/scss/settings/_hero.scss
, line 5
Source:
styles/scss/settings/_icon.scss
, line 1
11.3.1 #Settings.icon.$duk-icon-mappings $duk-icon-mappings
Settings used for icon functions.
$duk-icon-mappings: (
font-family: 'Doghouse UIKit',
path: $duk-icon-font-path,
filename: 'icomoon',
codes: (
arrow-default-right: "\e900",
arrow-thin-right: "\e901",
instagram: "\e903",
asterisk: "\f069",
plus: "\f067",
question: "\f128",
minus: "\f068",
music: "\f001",
search: "\f002",
heart: "\f004",
star: "\f005",
star-o: "\f006",
user: "\f007",
film: "\f008",
th-large: "\f009",
th: "\f00a",
th-list: "\f00b",
check: "\f00c",
close: "\f00d",
remove: "\f00d",
times: "\f00d",
search-plus: "\f00e",
search-minus: "\f010",
power-off: "\f011",
signal: "\f012",
cog: "\f013",
gear: "\f013",
trash-o: "\f014",
home: "\f015",
file-o: "\f016",
clock-o: "\f017",
download: "\f019",
arrow-circle-o-down: "\f01a",
arrow-circle-o-up: "\f01b",
play-circle-o: "\f01d",
repeat: "\f01e",
rotate-right: "\f01e",
refresh: "\f021",
lock: "\f023",
flag: "\f024",
headphones: "\f025",
volume-off: "\f026",
volume-down: "\f027",
volume-up: "\f028",
tag: "\f02b",
tags: "\f02c",
book: "\f02d",
bookmark: "\f02e",
camera: "\f030",
font: "\f031",
bold: "\f032",
italic: "\f033",
text-height: "\f034",
text-width: "\f035",
align-left: "\f036",
align-center: "\f037",
align-right: "\f038",
align-justify: "\f039",
list: "\f03a",
dedent: "\f03b",
outdent: "\f03b",
indent: "\f03c",
video-camera: "\f03d",
image: "\f03e",
photo: "\f03e",
picture-o: "\f03e",
pencil: "\f040",
map-marker: "\f041",
adjust: "\f042",
tint: "\f043",
pause: "\f04c",
stop: "\f04d",
forward: "\f04e",
fast-forward: "\f050",
step-forward: "\f051",
eject: "\f052",
chevron-left: "\f053",
chevron-right: "\f054",
plus-circle: "\f055",
minus-circle: "\f056",
times-circle: "\f057",
check-circle: "\f058",
question-circle: "\f059",
info-circle: "\f05a",
arrow-right: "\f061",
arrow-up: "\f062",
arrow-down: "\f063",
mail-forward: "\f064",
share: "\f064",
expand: "\f065",
compress: "\f066",
exclamation-circle: "\f06a",
eye: "\f06e",
eye-slash: "\f070",
exclamation-triangle: "\f071",
warning: "\f071",
calendar: "\e904",
random: "\f074",
comment: "\f075",
chevron-up: "\f077",
chevron-down: "\f078",
retweet: "\f079",
shopping-cart: "\f07a",
folder: "\f07b",
folder-open: "\f07c",
twitter-square: "\f081",
facebook-square: "\f082",
camera-retro: "\f083",
thumbs-o-up: "\f087",
thumbs-o-down: "\f088",
sign-out: "\f08b",
linkedin-square: "\f08c",
twitter: "\f099",
facebook: "\f09a",
facebook-f: "\f09a",
github: "\f09b",
unlock: "\f09c",
credit-card: "\f09d",
feed: "\f09e",
rss: "\f09e",
hdd-o: "\f0a0",
bullhorn: "\f0a1",
bell-o: "\f0a2",
arrow-circle-left: "\f0a8",
arrow-circle-right: "\f0a9",
arrow-circle-up: "\f0aa",
arrow-circle-down: "\f0ab",
bars: "\f0c9",
navicon: "\f0c9",
reorder: "\f0c9",
list-ul: "\f0ca",
list-ol: "\f0cb",
pinterest: "\f0d2",
pinterest-square: "\f0d3",
google-plus-square: "\f0d4",
google-plus: "\f0d5",
caret-down: "\f0d7",
caret-up: "\f0d8",
caret-left: "\f0d9",
caret-right: "\f0da",
sort-desc: "\f0dd",
sort-down: "\f0dd",
sort-asc: "\f0de",
sort-up: "\f0de",
cloud-download: "\f0ed",
plus-square: "\f0fe",
angle-double-left: "\f100",
angle-double-right: "\f101",
angle-double-up: "\f102",
angle-double-down: "\f103",
angle-left: "\f104",
angle-right: "\f105",
angle-up: "\f106",
angle-down: "\f107",
quote-left: "\f10d",
quote-right: "\f10e",
spinner: "\f110",
circle: "\f111",
folder-open-o: "\f115",
smile-o: "\f118",
frown-o: "\f119",
meh-o: "\f11a",
gamepad: "\f11b",
code-fork: "\f126",
exclamation: "\f12a",
microphone: "\f130",
microphone-slash: "\f131",
chevron-circle-left: "\f137",
chevron-circle-right: "\f138",
chevron-circle-up: "\f139",
chevron-circle-down: "\f13a",
unlock-alt: "\f13e",
ellipsis-h: "\f141",
ellipsis-v: "\f142",
rss-square: "\f143",
play-circle: "\f144",
minus-square: "\f146",
minus-square-o: "\f147",
check-square: "\f14a",
pencil-square: "\f14b",
external-link-square: "\f14c",
share-square: "\f14d",
thumbs-up: "\f164",
thumbs-down: "\f165",
youtube: "\f16a",
dropbox: "\f16b",
bitbucket: "\f171",
tumblr-square: "\f174",
apple: "\f179",
windows: "\f17a",
android: "\f17b",
linux: "\f17c",
female: "\f182",
male: "\f183",
arrow-circle-o-right: "\f18e",
arrow-circle-o-left: "\f190",
plus-square-o: "\f196",
slack: "\f198",
google: "\f1a0",
drupal: "\f1a9",
child: "\f1ae",
automobile: "\f1b9",
car: "\f1b9",
file-pdf-o: "\f1c1",
file-word-o: "\f1c2",
file-excel-o: "\f1c3",
file-powerpoint-o: "\f1c4",
file-image-o: "\f1c5",
file-photo-o: "\f1c5",
file-picture-o: "\f1c5",
file-archive-o: "\f1c6",
file-zip-o: "\f1c6",
file-audio-o: "\f1c7",
file-sound-o: "\f1c7",
file-movie-o: "\f1c8",
file-video-o: "\f1c8",
file-code-o: "\f1c9",
qq: "\f1d6",
wechat: "\f1d7",
weixin: "\f1d7",
paper-plane: "\f1d8",
send: "\f1d8",
circle-thin: "\f1db",
cc-visa: "\f1f0",
cc-mastercard: "\f1f1",
cc-amex: "\f1f3",
cc-paypal: "\f1f4",
copyright: "\f1f9",
area-chart: "\f1fe",
pie-chart: "\f200",
line-chart: "\f201",
toggle-off: "\f204",
toggle-on: "\f205",
user-plus: "\f234",
user-times: "\f235",
bed: "\f236",
hotel: "\f236",
battery: "\f240",
battery-4: "\f240",
battery-full: "\f240",
clone: "\f24d",
industry: "\f275",
map-o: "\f278",
map: "\f279",
commenting: "\f27a",
pause-circle-o: "\f28c",
stop-circle-o: "\f28e",
question-circle-o: "\f29c",
times-rectangle: "\f2d3",
window-close: "\f2d3",
)
);
Source:
styles/scss/settings/_icon.scss
, line 266
Source:
styles/scss/settings/_jumbotron.scss
, line 1
11.4.1 #Settings.jumbotron.large Large banner
Settings used for the jumbotron primarily used on the homepage.
$jumbotron-content-width--large: calc((100vw * 0.4) - (100vw - #{map-get($duk-base-containers, 'large')})/2);
$jumbotron-home--height--small: 500px;
$jumbotron-home--height--medium: 400px;
$jumbotron-home--height--large: 500px;
Source:
styles/scss/settings/_jumbotron.scss
, line 5
11.5 #Settings.layouts Layouts
Settings used within various layouts.
Source:
styles/scss/settings/_layouts.scss
, line 1
11.5.1 #Settings.layouts.layout-multi-column Multi column layout
Settings used for the layout-multi-column layout documented here.
// Define the number of available columns in the layout
$layout-multi-column-cols: 2, 3, 4;
Source:
styles/scss/settings/_layouts.scss
, line 49
11.5.2 #Settings.layouts.link-cta Link CTA
Settings used for the link--cta
layout.
Settings can be retrieved using the link-cta-settings
function, documented here
$link-cta: () !default;
$link-cta: map-merge((
'bg-color': duk-get-palette-color('tint'),
'bg-color--hover': duk-get-palette-color('primary'),
'font-color': duk-get-palette-color('primary'),
'font-color--hover': duk-get-palette-color('tertiary'),
'radius': 3px,
'button-size': 24px,
'icon-bg-color': duk-get-palette-color('secondary'),
'icon-bg-color--hover': duk-get-palette-color('secondary'),
'icon-color': duk-get-palette-color('primary'),
'icon-color--hover': duk-get-palette-color('tint'),
'icon-name': 'arrow-default-right',
'icon-size': 0.5em,
'icon-radius': 3px,
), $link-cta);
Source:
styles/scss/settings/_layouts.scss
, line 7