District CMS Base Theme

Source: styles/scss/settings/_duk-settings.scss, line 1

11.1.1 #Settings.duk.buttons Buttons

$duk-base-button-settings: (
 'font-weight':    bold,
 'icon-size':      0.5rem,
);

$duk-base-button-sizes: (
 'small': 75%,
 'large': 130%,
);
Source: styles/scss/settings/_duk-settings.scss, line 252

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 specific
fonts. 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