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.

A grayscale variable for hover state of the BU Hub webfont. Not intended for editing.

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

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.

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

The default font for body copy.

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.

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.

Base styles and typography for all HTML elements.

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 creating aspect ratios. Apply this mixin to the container that should be scalable in size, such as a video wrapper or an image wrapper. This will ensure the targeted element scales in size relative to its parent's width. It then absolutely positions the immediate child of this element so it fills the aspect ratio container.

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.

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.

Controls base styles for all heading tags.

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.

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.

The container width for the medium (md) breakpoint.

The container width for the large (lg) breakpoint.

A base z-index to use for interactive content in the content area that isn't an overlay. Some examples are callouts that scale up on hover, or tooltip definitions. Use this variable for your default state. Use + or - with this variable to set z-index relative to the default state - plus for above, minus for below. Change this variable to change the stacking order for all states in the site.

A base z-index to use for content with multiple states. A good example of this content might be a form with multiple states stacked on one another that you animate. Use this variable for your default state. Use + or - with this variable to set z-index relative to the default state - plus for above, minus for below. Change this variable to change the stacking order for all states in the site.

A base z-index to use for panel-like content. Panel-like content can include panels that open and close, such as horizontal secondary navigation menus or filters, which push aside or overlap other content. Use this variable alone to set a default z-index which will play nicely with other types of interactive content on your site. Use + or - with it to set a z-index relative to all panels. Change this variable to change the default z-index for all panel-like content.

A base z-index to use for the primary navigation. By default, this sets a z-index which will put dropdown menus above content, but below overlays. Use this variable alone to set a default z-index which will play nicely with other types of interactive content on your site. Use + or - with it to set a z-index relative to the primary navigation. Change this variable to change the stacking order of the primary navigation.

A base z-index to use for overlays and lightboxes. This z-index will always be on top unless you are using $z-index-dev. Use this variable alone to set a default z-index which will play nicely with other types of interactive content on your site. Use + or - with it to set a z-index relative to the default overlay. Change this variable to change the stacking order of all overlays. (You may want to do this if you have a fixed sticky navigation so that the sticky navigation isn't always on top, even with lightboxes.)

A z-index that will override all other z-indexes for development and debugging purposes only. Avoid where possible and do not commit to production code.

General styles for all content banner positions.

Styles for the window-width content banner position. Sits outside of .content-container.

Styles for the page-width content banner position. Sits directly inside .content-container and just outside of .content-area.

Styles for the content-width content banner position. Sits directly inside .content-area.

Controls styling for all content, from the masthead to the site footer.

A wrapper to contain content to a certain size. Sits just below the window width banner and just above the footbar.

Styles for the content area (formerly styled by article[role=main]). Sits next to the sidebar.

The default class for styling sidebars.

Styles for the left sidebar location.

Styles for narrow content.

Controls styling for the footbar.

Controls styling for the footbar container and width of widgets inside. Often used to put a maximum width on the footbar without affecting the background.

Controls styling for the site footer - branding, address, and social links.

Styles the social media links menu in the footer based on the content around it.

Styles the container which holds branding assets in the site footer.

Styles the disclaimer, which shows in the site footer.

Styles the container which holds menus (footer links and social) in the site footer based on the content around it.

Styles the container which holds footer links based on the content around it.

Styles the container which holds footer information based on the content around it. Note: this is slated to be controlled by the branding plugin in a future release.

Controls all styling related to the masthead. This includes navigation, branding, and search.

A wrapper for items in the masthead. Often used to restrict the masthead to a certain width without interfering with the background.

Handles styling for narrow content container pages. Do not override this class. Instead, add or remove templates from the narrow content container PHP filter in your theme.

Handles styling for the 404 page.

Base margin for the table tag.

Base padding for the table.

Default border for tables.

Default color for table headings.

Default background for table headings.

Default padding for table captions.

Default color for table captions.

Default background for striped table backgrounds.

Controls the color of icons on collapsibles.

Controls the color of icons on collapsibles when you hover.

Controls the border between collapsibles.

Controls the border between course feed items.

The margin to use around anything floated in the content area.

The font to use for captions.

The color to use for captions.

The shadow to use in tables.

Controls the background color of the banner container. By default, this only affects the window width banner container.

Controls the padding on the banner container.

Controls the padding on the banner container when using the window-width layout.

Controls the background color of the content.

Controls the shape used in "back" links, such as the links you see at the bottom of the page when viewing a single profile. By default, this is an arrow.

Controls the color of the arrow in "back" links, such as the links you see at the bottom of the page when viewing a single profile.

Styles a collapsible item.

Styles the header on a collapsible item.

Controls the styling for a single course in a course feed.

Controls the styling for the course title in a course feed.

Controls the styling for the course id (college, department, and number) in a course feed. You may style each of these individually as well using .cf-course-college, .cf-course-dept, etc.

Controls the styling for course credits, availability, and prerequisites.

Controls the styling for the section table.

Controls the styling for the section title.

Controls the styling for the section start and end dates.

Conditional styling to label course availability. There isn't currently a way to do this in the course template reliably.

Conditional styling to label course prerequisites. There isn't currently a way to do this in the course template reliably.

BU Hub Indicator Wrapper

BU Hub Indicator Title

BU Hub Indicator Title Iconstyles

BU Hub Indicator Area

List

Base styles for the gallery shortcode in WordPress.

Styles for each supported number of columns in the WordPress gallery shortcode.

BU Slideshow styles.

General styles for labels.

Controls the font family used on dates in the calendar widget.

Controls the color of dates in the calendar widget.

Controls the size of the day when using the graphic style in the calendar widget.

Controls the color of the day when using the graphic style in the calendar widget.

Controls the size of the month when using the graphic style in the calendar widget.

Controls the color of the month when using the graphic style in the calendar widget.

Controls the color of links in widgets in the footbar.

Controls the color of links in widgets in the footbar when you hover.

Controls the style of border used on the content navigation list.

Controls the font family used in the content navigation widget.

Controls the font size used for items on the first level in the content navigation widget.

Controls the font size used for items below the first level in the content navigation widget.

Controls the color of nav items in the content navigation widget.

Controls the color of nav items when you hover in the content navigation widget.

Controls the active color of nav items in the content navigation widget.

Controls the color of the metadata in the BU posts widget.

Controls the spacing between widgets in the sidebar.

Controls the font family used for the widget title.

Controls the border style used on the widget title.

Controls the border width used on the widget title.

Controls the color of the widget title.

Controls the shape which shows after the widget title if it is a link. By default, this is set to be an arrow.

Controls the color of the shape which shows after the widget title if it is a link.

Controls the color of the shape which shows after the widget title when you hover.

Controls the font family used for headings in widget content.

Controls the color of links in the widget content.

Controls the color of links when you hover in the widget content.

Controls the style of border used between items in widgets which use a list format, such as content navigation and the calendar widget.

Styles events in the calendar widget. Affects all formats.

Styles links in the calendar widget. Affects all formats.

Styles dates in the calendar widget. Affects all formats.

Styles an event in the calendar widget default format.

Styles dates in the calendar widget default format.

Styles titles in the calendar widget default format.

Styles links in the calendar widget graphic format.

Styles dates in the calendar widget graphic format.

Styles the day of the month in the calendar widget graphic format.

Styles the month in the calendar widget graphic format.

Styles the title in the calendar widget graphic format.

Handles styling for content navigation widgets (BU Pages and Content Navigation, aka side nav).

Handles styling for posts in the BU Posts widget (news widget).

Handles styling for the post headline in the BU Posts widget (news widget).

Handles styling for metadata in the BU Posts widget (news widget).

Handles styling for the excerpt in the BU Posts widget (news widget).

Handles styling for the thumbnail in the BU Posts widget (news widget).

Handles styling for the thumbnail in the BU Posts widget (news widget) in the title and date format.

Handles global widget styling.

Handles title styles for all widgets.

Styles the blog list in the blogroll widget.

Handles styling for archive and link widgets.

Controls button styles globally. Extend this class for custom buttons or for elements whose HTML and CSS you don't have control over. May be used on both form element tags and regular links to make them look like buttons.

Controls button styles for input tags globally. Only to be used with form element tags.

Styles buttons in a "primary" way so as to look more important when there are multiple buttons near each other.

The general styles for forms.

The general styles for the fieldset element. Wraps around sets of controls within a form. See MDN on fieldset.

The general styles for the legend element, which holds a caption for the fieldset element. See MDN on legend.

The general styles for labels on form fields. See MDN on label.

The general styles for inputs which should look like buttons.

Styles form rows, if you are not using Gravity Forms. From Pure v0.5.0.

Styles form controls, if you are not using Gravity Forms. From Pure v0.5.0.

Styles required items, if you are not using Gravity Forms. From Pure v0.5.0.

Styles inputs and labels in the stacked and aligned layouts, if you are not using Gravity Forms. From Pure v0.5.0.

Styles Gravity Forms.

The basic style for a button. Preferred over the extend if you have control over HTML and do not need any styles for your button in particular.

The basic style for a primary and selected button. Preferred over the extend if you have control over HTML and do not need any styles for your button in particular.

Controls the border style between posts on post listing templates.

Controls the color of the separators between metadata.

Controls the shape of the separators between metadata. By default, this is set to a dot.

Controls the amount of spacing between comment threads on a post.

Controls the amount of spacing between comment threads on a post on mobile.

Controls the amount of spacing between comments within a thread on desktop. By default, there is no margin between comments on mobile.

Controls the amount of space a reply comment is indented from the parent.

Controls the amount of space a reply comment is indented from the parent on mobile.

Controls the border style between comments on a post.

Controls the border width between comments on a post.

Controls the amount of spacing within comments.

Controls the amount of spacing within comments on mobile.

Controls the font family used for comments on a post.

Controls the color of comments on a post.

Controls the color of replies to comments on a post.

Controls the color of the author name in a comment.

Controls the color of the "says" text after author name in a comment.

Controls the background color of the comment submission form.

Controls the border style on the comment submission form.

Controls the border width on the comment submission form.

The style of the border on comments and items using the card styles.

The width of the border on comments and items using the card styles.

The amount of rounding (border radius) to apply to the corners of comments.

The amount of padding to apply to comments.

The background of comments.

The left border color of comments.

Controls the padding of the metadata card at the bottom of news posts on the single post template.

Controls the border style on the metadata card at the bottom of news posts on the single post template.

Controls the border width on the metadata card at the bottom of news posts on the single post template.

Controls the amount of rounding applied to corners of the metadata card at the bottom of the single post template.

Controls the background of the metadata card at the bottom of the single post template.

Controls the color of the left border in the metadata card at the bottom of the single post template.

Handles the previous and next links at the bottom of post listings.

Handles the previous link at the bottom of post listings.

Handles the next link at the bottom of post listings.

Handles styling for posts in news listings and archive pages.

Handles styling for headlines in the post template partial, usually used on post listings and archive pages.

Handles styling for metadata in the post template partial, usually used on post listings and archive pages.

Handles styling for thumbnails in the post template partial, usually used on post listings and archive pages.

Controls styling for the comments section on posts.

Controls styling for comment threads on posts.

Controls styling for the comment container.

Controls styling for individual comments on posts.

Controls styling for the comment reply link.

Controls styling for the comment author.

Controls styling for the "says" text after comment author.

Controls styling for the date and time of comments. This was hidden in the past, but in emergency situations, comments are often used as a means of communication, both officially and unofficially. Readers need to know how recent the last reliable update was should this happen. Disable or hide only with great caution, only using the %visually-hidden placeholder.

Styles the container which holds the comment content.

Styles the comment form container.

Styles the comment form title.

Styles the container around the comment form submit button.

Styles "view guidelines" and other helper text in the comment form.

Styles the comment text area in the comments form.

Styles the comment form submit button.

Styles the cancel comment reply link. WordPress hides this on the comment form with an inline attribute when the comment is not a reply to another comment. To test this, hit the "Reply" link on any comment. You should be be able to see it.

Handles styling for the metadata card at the bottom of posts.

Handles styling for the title in the metadata card at the bottom of posts.

Handles styling for the byline in the metadata card at the bottom of posts.

Handles styling for categories and tags in the metadata card at the bottom of posts.

Handles styling for the archive (View all posts) link container.

Handles styling for the archive (View all posts) link.

Controls the color of the date range on the calendar listing template. By default, this is right after the topic.

Controls the color of links on the calendar listing template.

Controls the color of links on the calendar listing template when you hover.

Controls the border between events on the calendar listing template.

Controls the font used in the calendar picker in the sidebar of the calendar listing template.

Controls the color of the selected month in the calendar picker in the sidebar of the calendar listing template.

Controls the background of day cells in the calendar picker in the sidebar of the calendar listing template.

Controls the color of text in the day cells in the calendar picker in the sidebar of the calendar listing template.

Controls the spacing of day cells in the calendar picker in the sidebar of the calendar listing template.

Controls the font family of day cells in the calendar picker in the sidebar of the calendar listing template.

Controls the color of links in the calendar picker in the sidebar of the calendar listing template.

Controls the color of links when you hover in the calendar picker in the sidebar of the calendar listing template.

Controls the background of links in the calendar picker for days that are not in the current month (previous/next month) in the sidebar of the calendar listing template.

Controls the color of links in the calendar picker for days that are not in the current month (previous/next month) in the sidebar of the calendar listing template.

Controls the background of the current day's link in the calendar picker in the sidebar of the calendar listing template.

Controls the color of the current day's link in the calendar picker in the sidebar of the calendar listing template.

Controls the font used for labels in the sidebar of the single calendar event template.

Controls the font weight used for labels in the sidebar of the single calendar event template.

Controls the color of labels in the sidebar of the single calendar event template.

Handles styling for the calendar topic on the calendar listing page.

Handles styling for the selected date range in the calendar listing page.

Handles styling for groups of events on a given day in the calendar listing page.

Handles styling for an individual event on a given day in the calendar listing page.

Handles styling for the first event in a group of events at the same time in the calendar listing page.

Handles styling for an individual event on a given day in the calendar listing page.

Handles styling for the link to an individual event in the calendar listing page.

Styles the BU Calendar list page date picker.

Styles the BU Calendar list page topics widget.

Handles styling for the container around start and end times on a single calendar event.

Handles styling for the list of start and end times on a single calendar event.

Controls whether or not to make the event time into a sentence. By default, this is visually hidden so screen readers still read it as a sentence, but it is displayed as list information. You can override this with @extend %remove-visually-hidden.

Handles styling for start time in the schedule of a single calendar event.

Handles styling for end time in the schedule of a single calendar event.

Handles styling for all day events in the schedule of a single calendar event.

Handles styling for all single calendar labels, specifically the event fields.

Handles styling for additional details information in the single calendar event template (event field values).

Handles styling for times in the single calendar event schedule.

Handles styling for the event description in the single calendar event template.

Handles styling for additional details in the single calendar event template.

Handles styling for list items in the schedule of a single calendar event. Use if you need to add something to the calendar schedule.

Handles styling for all single calendar labels, specifically the event fields.

Handles styling for additional details information in the single calendar event template (event field values).

Controls the shape of the profile photo. By default, this is set to a circle.

Controls the color used for profile names in the profile listing template.

Controls the color used for profile titles in the profile listing template.

Controls the number of profiles in a row in the advanced format. Kicks in at the extra small breakpoint.

Controls the number of profiles in a row in the advanced format. Kicks in at the medium breakpoint.

Adjusts the size of the basic profile photo.

Adjusts the size of the default profile photo.

Controls the style of border used on profile callouts. By default, this applies to the basic and default formats only.

Controls the color of the border on the mini profile format in the profiles shortcode.

Controls the number of profiles in a row in the mini format. Kicks in at the small breakpoint.

Controls the color used for labels in the single profile listing template sidebar.

Styles for all profile listings.

Styles for all profile items in a listing.

Styles for all profile photos.

Styles for all profile names.

Styles for all profile titles.

Styles for all profile links. Since links are usually wrapped around the whole profile, we leave link styling to specific child elements to avoid visual chaos.

Styles the advanced profile format.

Styles an advanced profile item.

Styles an advanced profile item link.

Styles an advanced profile item photo.

Styles the basic profile format.

Styles a basic profile item.

Styles a basic profile photo.

Styles the default profile format.

Styles a default profile item.

Styles a default profile photo.

Styles the mini profile format.

Styles the mini profile photo.

Styles the mini profile details.

Styles the mini profile name.

Styles the mini profile email.

Styles the single profile name - typically the title of the page.

Styles the single profile title - typically the subtitle of the page.

Styles the single profile photo.

Styles the single profile details sidebar.

Styles the single profile details labels.

Styles the single profile details list.

Styles the single profile details items.

Returns WCAG-compliant text colors automatically, based on a desired background and foreground color, by lightening or darkening the text color until it meets compliance standards.

By default, the compliance method is set to AA, but you can pass an optional compliance method argument to support AAA.

The base padding to use for content sitewide.

The base padding to use for large spacing sitewide.

A variable which controls the color of overlays on photo hover in WordPress galleries.

A variable which controls the margin around photos in WordPress galleries.

Styles for captions in the WordPress gallery shortcode.

Controls the spacing at the bottom of the footer widget area.

Controls the background color of the footer widget area.

Controls the border style of the footer widget area.

Controls the background of the footer widget container.

Controls the padding of the site footer.

Controls the background color of the site footer.

Controls the color of text in the site footer.

Controls the color of links in the site footer.

Controls the color of links when you hover in the site footer.

Affects the site footer background color as well as any other areas which do not have a background color.

The minimum font size in pixels for headings to use on mobile. 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.

Base styles for all wrapper elements.

Base styles for all container elements. You may wish to extend this on a page where you can't use .content-container for some reason - such as on a landing page where you are overriding that class to use the full width of the screen.

Base styles for containers that hold grid elements. A negative margin is included to counteract the grid item margins.

Base styles for children of a row. Usually used for grid items.

Turns a number of extra classes on or off. This is really only for the tools partial - you shouldn't use it in a custom theme unless you're VERY sure you will never need it. Placeholders will still work when this is set to false. Affects friendly grid classes, utility classes,

The number of columns you would like in your grid. To use styles in burf-theme, you must set this to a number that is divisible by 2, 3, and 4.

The percentage you'd like a margin to take up on grid items, if you are using margins on grid items. By default, this will attempt to reproduce the default margin on a large screen in a full-width container. If you plan to use grids include a smaller container, you may need to adjust this.

Choose which breakpoints you want grid classes to support. Small (sm) and medium (md) are required, everything else is optional.

Determines which classes to calculate and print for the theme. By default, all are on so clients can freely use these in custom CSS. However, you may choose to only support the ones you like in a custom theme.

Choose whether or not to print the numeric grid classes (.col-sm-5). Optional. Note that friendly placeholders (.col-quarter, .col-sm-quarter) will always print. You may wish to disable these on custom themes.

The amount of padding to put on the content container.

The amount of padding to put on the content container on desktop.

The amount of padding to put on the content container on desktop.

Controls the margin on rows in the grid. By default, this will attempt to "pull" grid items out by the same amount as their margin, Boostrap-style.

Controls the margin on rows in the grid. By default, this will attempt to "pull" grid items out by the same amount as their margin, Boostrap-style.

Controls the padding on child items of the grid. On non-margin classes, this will act like a "margin", putting space between grid items, Boostrap-style. If you need to use the padding for something else, like if you have a background color on your grid item, use the margin classes.

Controls the padding on child items of the grid using the -margin class. Does not affect other margin classes.

Styles for parents of margin grid items. Also available in breakpoint flavors, just like the grid classes - for example, .col-md-margin-parent.

Choose whether or not to print CSS classes for icons in your stylesheet. By default, this option is false for child themes, and true for the framework. Set this to true when you want to give the client flexibility to choose their own icons using CSS and custom HTML.

The font family to use for icons across the site. Change this to use a different homegrown font family.

The font size to use for icons 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.

Choose whether or not to use BU Default icons for icons in your stylesheet. By default, this option is set to true. Set to false to load your own icon font family.

Controls the placement of icon content globally in placeholders and default icon classes.

The icons this site supports. All icons get a name and a UTF-8 value. It's unlikely you'll need to change these, and you probably shouldn't. However, if you're using your own icon font, you may want to add to it.

Provides base icon styles normalized across browsers and optimized for accessibility. A helper mixin for the main icon mixin and icon extends. You probably don't actually want to use this unless you're working on Responsive. Use the icon mixin instead.

A mixin to generate icons. Use any icon in $icon-supports. $use-extend will use the extends for performance purposes, but sacrifices your ability to use this inside a media query. Setting this to true is really only beneficial for generating the default placeholders.

Provides base icon styles normalized across browsers and optimized for accessibility. A helper placeholder for the main icon mixin and icon extends. You probably don't actually want to use this unless you're working on Responsive. Use the icon mixin instead.

Provides base icon styles normalized across browsers and optimized for accessibility. A helper placeholder for the main icon mixin and icon extends. You probably don't actually want to use this unless you're working on Responsive. Use the icon mixin instead.

A mixin to quickly add angles to an element. Uses before/after pseudo classes. Based on Jeremy Frank's work here: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

The height of the search field. Affects both search and search button.

The background color of the mega nav menu toggle.

The text color of the mega nav menu toggle.

The number of columns to use in the mega navigation menu. If there are fewer nav items than this number in the first row, they will stretch

The number of columns to use in the mega navigation menu on desktop. If there are fewer nav items than this in the first row, they will stretch

The point at which the mega navigation switches from showing the icon to the full menu and short menu combo. Accepts a breakpoint or pixel value.

The point at which the mega navigation switches from mobile to desktop layout. Accepts a breakpoint or pixel value.