Whether or not to print media queries in your stylesheet. If you set this to false, it will print media queries in the order they are declared so that desktop styles will always override mobile styles, regardless of screen size. This is mostly useful for browsers which do not support media queries.

The window width at which extra small styles will begin. By default, this is set to target most large phones.

The window width at which small styles will begin. By default, this is set to target most small tablets and iPads in vertical orientation.

The window width at which medium styles will begin. By default, this is set to target older desktops and iPads in horizontal orientation.

The window width at which large styles will begin. By default, this is set to target most laptops.

The window width at which extra large styles will begin. By default, this is set to target most modern desktops.

The window width to target for IE8 and below. Because older versions of IE don't support media queries, we use this width to target the most likely browser width an older IE user will be viewing the site in.

The base margin to use sitewide. All margins are based on this number. Larger margins will be a multiple of this, smaller margins will be a fraction of this, except in cases of UI or typography where margin should be related to font size.

The base margin to use for content sitewide. This affects floated content in the WordPress editor, and would be good for any sort of floated content you may add in a custom theme, like a floated callout.

The base margin to use for large spacing sitewide. This affects elements like the banner, section tags, and any other larger elements.

The base padding to use sitewide. All padding is based on this number. Larger padding will be a multiple of this, smaller padding will be a fraction of this.

A padding variable for situations where you need a smaller amount of padding.

A padding variable for situations where you need a larger amount of padding.

A color to tint your grays with. Affects grayscale variables. Try cool colors, like blues. Accepts any valid color.

The amount to tint your grays, from 0-100%. This will affect the maximum saturation of your tint.

A grayscale variable that takes advantage of the tint system. Produces a plain black. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a very dark gray suitable for text. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a very dark gray suitable for text. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a dark gray suitable for text or backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a dark gray suitable for backgrounds or metadata. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a dark gray suitable for backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a middle gray suitable for backgrounds or large typography. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a middle gray suitable for backgrounds or large typography. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a middle gray suitable for backgrounds or large typography. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a middle gray suitable for backgrounds or large typography. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a middle gray suitable for backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a light gray suitable for backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a light gray suitable for backgrounds, borders, and metadata. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a light gray suitable for backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a light gray suitable for backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a near-white gray suitable for backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a near-white gray suitable for backgrounds. Overriding this variable is not supported.

A grayscale variable that takes advantage of the tint system. Produces a plain white. Overriding this variable is not supported.

The default border style.

Controls the font family used in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the border on the legend in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the margin on the legend in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the padding on the legend in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the border on fieldsets in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the margin on the fieldset in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the padding on the fieldset in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the margin on labels in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the margin on rows in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the margin on inputs in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the padding on inputs in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the border on inputs in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the inner shadow on inputs in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the border radius on inputs in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the shadow on focused inputs. This is important for accessibility. Always test with a keyboard if you change this style to ensure it is still clear which item is keyboard focused afterwards. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the border on focused inputs. This is important for accessibility. Always test with a keyboard if you change this style to ensure it is still clear which item is keyboard focused afterwards. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the font used on all buttons and things that looks like buttons across the site.

Controls the font size used on all buttons and things that looks like buttons across the site.

Controls the background color used on default buttons and things that looks like buttons across the site.

Controls the text color used on default buttons and things that looks like buttons across the site.

Controls the background color used on primary buttons and things that looks like buttons across the site.

Controls the text color used on primary buttons and things that looks like buttons across the site.

Controls the margin on buttons in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the margin on buttons in forms. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the border on buttons.

Controls the rounding of edges on buttons. Note: this style may not apply to Gravity Forms due to overly specific plugin CSS.

Controls the default font used across the site. Affects body text and anything else that isn't specifically overridden.

Controls the default font size used across the site. Affects body text and anything else that isn't specifically overridden.

Controls the default line height used across the site. Affects body text and anything else that isn't specifically overridden.

Controls the default color used for text across the site. Affects body text and anything else that isn't specifically overridden.

Base margin for the section tag.

The default font for body copy.

A serif font to use. This variable is not used by default.

The minimum font size in pixels for headings to use. Unless you're a designer and you know what you're doing, leave this at $font-size-base. Anything lower means you'll need to compensate with other design elements to preserve the visual hierarchy - think uppercasing, color, stuff like that. This directly affects the <h6> tag. It indirectly affects all other heading font sizes as well by serving as the lower limit to our scale.

The maximum font size in pixels for headings to use. This directly affects <h1> headings within content. Do not use a larger value, such as those you might find on a landing page or in a homepage slider, to determine this value. Be sure to test it against deeply nested pages, which tend to have longer page titles. It indirectly affects all other heading font sizes as well by serving as the upper limit to our scale.

The maximum font size in pixels for headings to use on mobile. This directly affects <h1> headings within content. Do not use a larger value, such as those you might find on a landing page or in a homepage slider, to determine this value. Be sure to test it against deeply nested pages, which tend to have longer page titles. It indirectly affects all other heading font sizes as well by serving as the upper limit to our scale.

The minimum line height ratio for headings to use. Do not use any units with this value. This value directly affects the <h1> tag and indirectly affects all other heading font sizes as well by serving as the lower limit to our scale. In typography, the relationship between font-size and line-height is that larger font-sizes demand lower line-height values to preserve vertical rhythm.

The maximum line height ratio for headings to use. Do not use any units with this value. This value directly affects the <h6> tag and indirectly affects all other heading font sizes as well by serving as the upper limit to our scale. Because we set the <h6> tag to be the same size as our body copy by default, it also gets the same line-height ratio by default.

Holds values for font-size and line-height for all font styles. Two special case scenarios, font-size-secondary and font-size-minimum, have pixel values. Secondary is used for information in a theme that is secondary to main content, such as widgets, asides, footbars, and shortcodes, and resets the base value which headings and paragraph text uses. font-size-minimum is the lowest allowable font size in pixels - it never gets scaled, because it should never be smaller than that amount. Other values, such as those used for headings (font-size-1 for <h1>, font-size-2 for <h2>, etc) are dynamically added after we generate the headings scale. These values are used to build the font-size placeholders. You can override invidividual values and create your own custom values and placeholders by redeclaring values you want to override and adding new values in your own $font-styles-theme map.

The default icon size to use across the site.

The color to use for icons across the site. By default, this will inherit the color of the text in the container the icon lives in. Setting this will keep the color of the icons consistent everywhere.

A tinting helper function for grayscale variables. If you're adding your own grays and want to take advantage of tinting, you can use this function to tint your grays. The actual tint is dependent on two variables: $tint-hue, which is the color to use as a tint, and $tint-saturation, which is the maximum saturation of that tint. More saturation happens with dark colors, less or none with very light colors.

Calculates the multiplier needed for growth between a minimum and maximum value based on a given rate of growth.

Calculates a size, relative to a base size. By default, we use $font-size-base to assist with calculating the ratio for ems. However, you can pass your own base for using with your own unit standard. You can also choose not to scale by passing 'true' to 'scaled'. You might choose to do this if your minimums and maximums are already scaled units, such as with line-height, or if you specify your min and max font-sizes in ems.

Base styles and typography for all HTML elements.

Controls spacing between section tags.

Controls base styling for tables.

Adds stripes to tables.

Adds both horizontal and vertical borders.

Switches the border on tables from vertical to horizontal.

Controls base styling for all links.

Clears floats on a container. Use when an element contains floated items and isn't getting the correct height because it doesn't recognize the height of the floated child items. Based on Nicolas Gallagher's micro clearfix. More info: http://nicolasgallagher.com/micro-clearfix-hack/

Hides text in an element visually, but preserves width and height and screen reader visibility. Use this placeholder to hide text when you need a visual representation of the screen reader text, but the text itself isn't desirable to have in your design, such as in a logo. For example, this placeholder is used to hide the text on the BU masterplate and BUMC logo in the footer. In cases where there is no visual component to worry about, %visually-hidden is preferred because it supports right-to-left languages and will be safer if a site is ever translated. More info on this technique: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Hides entire elements visually, but preserves visibility for screen readers. Use this placeholder when an element is only for screen readers and needs no visual representation on the site. This is the preferred method of hiding items visually as it works with right-to-left languages, making it a safer choice if a site is ever translated. More info on this technique: http://a11yproject.com/posts/how-to-hide-content/

Reverses %visually-hidden. Helpful if you want to unhide a previously hidden label.

A placeholder for responsive video styles. Use this placeholder if you need something to support responsive video, but you need a separate, unique class from responsive-video. You may also use this to enable responsive behavior on other types of embedded media that don't have a video aspect ratio by extending this to a unique class, and adjusting the padding-bottom value on that class to match the aspect ratio you're looking for.

A placeholder which controls responsive styling for tables. You may want to extend this if you can't use the responsive-table class for some reason, or if you need to make significant overrides and want to leave the base styles intact. You must wrap the class this uses around a table for it to work. It will not work if you just put it on the table.

A placeholder to mimic the styles of the "Back" link on archive pages.

Controls card-like styles used throughout Foundation. By default, this controls single profile info styling in the sidebar, the metadata styling at the bottom of single posts, and the date summary.

A mixin for border-radius. Takes care of browser prefixes for you. You should always use this mixin when writing border-radius rules to ensure you're compatible with the browsers we support. Accepts arguments in the same syntax as standard CSS. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

A mixin for box-shadow. Takes care of browser prefixes for you. You should always use this mixin when writing box-shadow rules to ensure you're compatible with the browsers we support. Supports multiple shadows, just use the same syntax as you would CSS. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

A mixin for linear gradients. Takes care of browser prefixes for you. You should always use this mixin when writing linear gradients rules to ensure you're compatible with the browsers we support. Always to supply a backup background color as well for browsers that do not support gradients. Does not support multiple gradients - you're on your own for that.

A mixin for opacity. Takes care of browser prefixes for you. You should always use this mixin when writing opacity rules to ensure you're compatible with the browsers we support. Accepts arguments in the same syntax as standard CSS. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

A mixin for transition. Takes care of browser prefixes for you. You should always use this mixin when writing transition rules to ensure you're compatible with the browsers we support. Supports multiple transitions, just use the same syntax as you would CSS. Please note: you should avoid trasition all, as it can become a significant performance issue on older devices. The cheapest properties to animate performance-wise are transform, opacity, and filter - if you're not sure what you're doing, it's best to stick to those where possible. Learn how to test animation performance: https://www.sitepoint.com/check-css-animation-performance-with-the-browsers-dev-tools/ Syntax info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

A mixin for transform. Takes care of browser prefixes for you. You should always use this mixin when writing transform rules to ensure you're compatible with the browsers we support. Supports multiple transforms, just use the same syntax as you would CSS. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

A shorthand mixin for rotate. Takes care of browser prefixes for you. You could use transform as well. Accepts an amount of degrees to rotate by. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

A shorthand mixin for scale. Takes care of browser prefixes for you. You could use transform as well. Accepts an amount of degrees to rotate by. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

A shorthand mixin for translate. Takes care of browser prefixes for you. You could use transform as well. Accepts two arguments: an amount to translate X by, and an amount to translate Y by. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

A mixin for transform-origin. Takes care of browser prefixes for you. You should always use this mixin when writing transform-origin rules to ensure you're compatible with the browsers we support. Use with transform, rotate, scale, or translate to tell the browser where the transform should start from. Accepts any valid CSS value for transform-origin. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

A mixin for keyframes. Takes care of browser prefixes for you. You should always use this mixin when writing keyframe rules to ensure you're compatible with the browsers we support. Use with animation to build complex animations that transition isn't capable of alone and to tightly control timing. Accepts any valid CSS value for keyframes. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

A mixin for animation. Takes care of browser prefixes for you. You should always use this mixin when writing animation rules to ensure you're compatible with the browsers we support. Use with keyframes to build complex animations that transition isn't capable of alone and to tightly control timing. Accepts any valid CSS value for animation, including multiple animation declarations. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

A mixin for vertically and horizontally centering all children in modern browsers using flexbox. Use this mixin when centering isn't critical to usability. Older browsers will gracefully degrade and not center. This mixin should be used on the parent of the elements you want to center. By default, this is set to work as-is for most use cases, but you may be interested in tweaking the parameters if you want flexbox-specific functionality.

A safe way to including responsive styles on old browers which do not fully support media queries, such as IE8. All media queries using this mixin are mobile-first (min-width). This mixin will take all reponsive styles up to a certain point and print them in the order they're written in the ie.css stylesheet, up until the default screen width you set to support in IE8 and below. In most cases, you won't have to change this from $lg, but you can always check Google Analytics to see what the most used screen size is for your site's older IE users if you like, and set it to that. This mixin no longer supports custom media queries like max-width as of 2.0, because those styles do not generally need to be included for old IE to be usable. Instead, you should use a plain CSS media query, which will not interfere with older browsers and degrade gracefully. By default, you'll use this mixin for all your responsive styles, and should only have a few very minor exceptions in media queries.

Outputs a sass map neatly in CSS for debugging purposes. Sends output to terminal on compile. From https://www.sitepoint.com/debugging-sass-maps/

A shortcut media query for retina devices. Handy for including separate retina images. Accepts blocks of CSS or Sass.

Generates backwards-compatible RGBA color CSS by calculating a solid color that looks the same as what a user sees for IE8 and below.

The default class which enables responsive video. Wrap this around any video or iframe which is not supported by oEmbed, or if you are manually putting in HTML for a video for some reason.

The class WordPress generates when you align something right in the visual editor.

The class WordPress generates when you align something left in the visual editor.

The class WordPress generates when you center something in the visual editor.

The class WordPress generates for caption text on images in the visual editor.

A class for responsive styling on tables. This class will make the table scrollable below the medium breakpoint. You must wrap the table in a div with this class. It will not work if you put it directly on the table.

For code within the WordPress content area.

Controls the styles of the "Back" link on archive pages. Use this class to only style CSS with the back link. Use the placeholder to style anything that looks like a back link.

Controls the styling for messages.

The action icon.

The ban icon.

The bookmark icon.

The close icon.

The delete icon.

The download icon.

The downloadbox icon.

The like icon.

The like alt icon.

The dislike icon.

The menu icon.

The plus icon.

The hyphen icon.

The print icon.

The redirect icon.

The refresh icon.

The replay icon.

The share icon.

The search icon.

The settings icon.

The sync icon.

The star icon.

The tag icon.

The upload icon.

The upload to cloud icon.

The contract icon.

The expand icon.

The scaledown icon.

The scaleup icon.

The up icon.

The right icon.

The down icon.

The left icon.

The directup icon.

The directright icon.

The dropdown icon.

The directleft icon.

The navigateup icon.

The navigateright icon.

The navigatedown icon.

The navigateleft icon.

Provides base icon styles normalized across browsers and optimized for accessibility. Use this placeholder if you are loading your own font library and can't use the built-in icons because the content is different. This should go on your base element. The complimentary placeholder, %icon, needs to go on a :before or :after underneath.

Provides base icon styles normalized across browsers and optimized for accessibility. Use this placeholder on :before or :after if you are loading your own font library and can't use the built-in icons because the content is different. You will also need the %icon-base placeholder on your hoverable element if you need compatibility before IE9.

The calculator icon.

The barchart icon.

The piechart icon.

The stock icon.

The envelope icon.

The phone icon.

The rss icon.

The rss alt icon.

The rotaryphone icon.

The link icon.

The link alt icon.

The file icon.

The files icon.

The folder icon.

The index icon.

The storagebox icon.

The burst icon.

The cart icon.

The emptycart icon.

The compose icon.

The grid icon.

The layers icon.

The layout icon.

The list icon.

The flag icon.

The reply icon.

The thumbnails icon.

The write icon.

The compass icon.

The crosshair icon.

The globe icon.

The location icon.

The map icon.

The navigate icon.

The signpost icon.

The play icon.

The pause icon.

The stop icon.

The rewind icon.

The fastforward icon.

The skipback icon.

The skipforward icon.

The record icon.

The volume icon.

The camera icon.

The headphones icon.

The mic icon.

The music icon.

The picture icon.

The video icon.

The book icon.

The box icon.

The briefcase icon.

The bug icon.

The chat icon.

The clipboard icon.

The code icon.

The contacts icon.

The dashboard icon.

The flask icon.

The heart icon.

The home icon.

The key icon.

The lightbulb icon.

The lightning icon.

The lock icon.

The unlock icon.

The notebook icon.

The notifications icon.

The pin icon.

The pinboard icon.

The planet icon.

The poo icon.

The puzzle icon.

The screwdriver icon.

The thermometer icon.

The toolbox icon.

The user icon.

The users icon.

The utensils icon.

The view icon.

The wrench icon.

The dropbox icon.

The dropbox alt icon.

The facebook icon.

The facebook alt icon.

The flickr icon.

The flickr alt icon.

The foursquare icon.

The icon alt icon.

The github icon.

The github alt icon.

The googleplus icon.

The icon alt icon.

The instagram icon.

The instagram alt icon.

The kickstarter icon.

The icon alt icon.

The linkedin icon.

The linkedin alt icon.

The paypal icon.

The paypal alt icon.

The pinterest icon.

The pinterest alt icon.

The pocket icon.

The pocket alt icon.

The reddit icon.

The reddit alt icon.

The renren icon.

The retweet icon.

The soundcloud icon.

The icon alt icon.

The spotify icon.

The stackexchange icon.

The icon alt icon.

The stackoverflow icon.

The icon alt icon.

The stumbleupon icon.

The icon alt icon.

The twitter icon.

The twitter alt icon.

The tumblr icon.

The tumblr alt icon.

The vimeo icon.

The alt alt icon.

The vine icon.

The alt alt icon.

The weibo icon.

The alt alt icon.

The wordpress icon.

The youtube icon.

The youtube alt icon.

The alert icon.

The check icon.

The info icon.

The megaphone icon.

The android icon.

The appleinc icon.

The desktop icon.

The cloud icon.

The laptop icon.

The tablet icon.

The smartphone icon.

The tv icon.

The wifi icon.

The calendar icon.

The clock icon.

The watch icon.

The infinity icon.

The bike icon.

The car icon.

The plane icon.

A sans-serif font to use sitewide. By default, this affects the site footer and label text in profiles.

A monospace font to use sitewide. By default, this affects the <code> and <pre> elements.

A font to use for headings. Affects <h1>, <h2>, etc.

A color to use for headings. Affects <h1>, <h2>, etc.

A font to use for small tags within headings.

Base margin for HTML tags. Primarily affects <p>.

Base color for links.

Base color for visited links. Must be different from $color-link for accessibility reasons.

Base color for active links. Must be different from $color-link for accessibility reasons.

Base padding for the <code> tag.

Base margin for the <code> tag.

Text color to use for the <code> tag.

Background color to use for the <code> tag.

Base border for the <code> tag.

Base margin for the <blockquote> tag.

Base margin for <ul> and <ol> tags.

Base padding for <ul> and <ol> tags.

Base margin for <dd> tags.

Controls base styles for all heading tags.

Styles for all h1 tags.

Styles for all h2 tags.

Styles for all h3 tags.

Styles for all h4 tags.

Styles for all h5 tags.

Styles for all h6 tags.

Styles for all blockquotes.

Styles for all paragraphs and preformatted content.

Styles for all preformatted and code content.

Styles for all lists and list-like content.

Styles for definition stuff.

Styles menus and lists.

Styles for navigation.

Styles for code element.

Styles for the code wrapper class. Adding this class around a code element enables scrolling on mobile devices.

The number of columns you would like to use in your layout. This controls the width of the content area vs. the sidebar. By default, setting this to 3 will make the sidebar take up 1 column, and the content area 2 columns. If you were to set this to 4, the sidebar would take up 1/4 of the space, while the content area would take up 3/4 of the space. By default, the number of supported widgets in your footer will match this number.

Sets the margin width for content and footbar widgets.

The amount of padding to add to columns on mobile.

The amount of padding to add to columns on desktop.

The amount of padding to add to the sidebar. Calculated based on the number of columns by default.

Sets the number of supported widgets in the footbar. Matches the number of columns in the theme by default.

The width of the side nav, if you are using the left hand layout.

The style of border to use on the masthead. This shows directly below navigation or brand depending on the layout you've chosen for your site.

The background color of the masthead. Bright colors are not recommended.

The style of border used on primary navigation. By default, this border shows above primary navigation on mobile only.

The width of border used on primary navigation at desktop sizes.

The color of border used on primary navigation.

The font used in primary navigation.

The color to use behind primary navigation.

The color of links in primary navigation.

The color of links when you hover in primary navigation.

The color of an active link in primary navigation - in other words, the color that a link will be when you are on that link's page.

The color to use behind dropdown menus. Only affects non-mobile devices. This variable is not used in the left hand navigation layout as dropdowns are not supported.

The color of links in dropdown menus.

The color of links in dropdown menus when you hover over them.

The width and style of border used in the utility navigation.

The font size used in the utility navigation.

The color of links in the utility navigation.

The color of links when you hover in the utility navigation.

The color of links in the utility navigation on mobile. The placement of utility navigation on mobile usually means the utility navigation will be on a different background color, so it's important to double check that this is set correctly.

The color of links in the utility navigation when you hover on mobile.

Controls the color of toggles in the navigation at mobile sizes. By default, this affects both the menu and search toggles.

Controls the color of toggles in the navigation at mobile sizes on hover.

Controls the color of toggles in the navigation at desktop sizes. By default, this affects both the menu and search toggles.

Controls the color of toggles in the navigation at desktop sizes on hover.

Controls the width of the border used on the search pane.

Controls the color of the border used on the search form.

Controls how much rounding is applied to the search form field corners.

Controls how much rounding is applied to the search form submit button.

Controls the width of the border used on the search field.

Controls the background color of the search field.

Controls the color of the text in the search field.

The default breakpoint to switch to the desktop view in navigation.

Adjusts the size of the search and nav toggles in the main navigation. Also affects the top/bottom spacing around main navigation items in the nav bar.

Adjusts the size of border on the nav toggle icon in the main navigation. Also affects spacing of borders in this icon.

The breakpoint to switch to the desktop view in the left navigation layout.

The breakpoint to switch to the desktop view in the top navigation layout.

The breakpoint to switch to the desktop view in the no navigation layout.

The font to use for branding. You may not change this unless you have permission from Marketing & Communications.

The font family to use for the sponsored branding type.

The font family to use for the unbranded branding type.

The height of the branding area.

The color used for the site name when a site is using BU branding.

The color used for the site name when a site is not using BU branding.

The image used for the BU Masterplate. Do not change this without permission from Marketing & Communications.

The image used for the BU Masterplate on retina devices. Do not change this without permission from Marketing & Communications.

The image used for the BU plate in the Signature style. Do not change this without permission from Marketing & Communications.

The image used for the BU plate in the Signature style on retina devices. Do not change this without permission from Marketing & Communications.

The image used for the BUMC logo. Do not change this without permission from Marketing & Communications.

The image used for the BUMC logo on retina devices. Do not change this without permission from Marketing & Communications.

Controls styling for elements in the branding area, including the logo and site description.

Controls styling for the logo container.

Controls styling for the signature brand style.

Controls styling for the unbranded brand style.

Controls styling for the logotype brand part.

Controls styling for the site name brand part.

Controls styling for the parent entity brand part.

Controls styling for the subparent entity brand part.

Controls styling for the site description.

Controls styling for the masterplate.

Controls styling for the BUMC logo.

The container width for the small (sm) breakpoint.