Variables & Mixins Interactive Style comes with a set of variables and mixins you can use to keep your projects consistent. Import vars into each SCSS file and use any of them. See Colors if you're looking for color variables.
Import
@ import "~@politico/interactive-style/vars.scss" ;
Fonts $din 'din-2014', 'Helvetica Neue', Helvetica, Arial, sans-serif $georgia Georgia, Times, 'Times New Roman', serif $jubilat 'Jubilat', Georgia, Times, 'Times New Roman', serif $fancy-serif "Old Standard TT", serif $monospace "SFMono-Regular", "Menlo", "Monaco", "Consolas","Liberation Mono","Courier New", monospace
Breakpoints $min-width-xs 350px $min-width-sm 576px $min-width-md 768px $min-width-lg 992px $min-width-xl 1200px $min-width-extra-small 350px $min-min-width-sm 576px $min-min-width-md 768px $min-width-large 992px $min-width-extra-large 1200px
Other Variables $paragraph-width 575px $box-shadow-lightest 0 1px 2px rgba(218, 218, 218, 0.10), 0 1px 2px rgba(204, 201, 201, 0.20) $box-shadow-light 0 1px 2px rgba(218, 218, 218, 0.16), 0 1px 2px rgba(204, 201, 201, 0.23) $box-shadow-medium 0 7px 6px rgba(230, 230, 230, 0.25), 0 4px 7px rgba(0,0,0,0.22) $box-shadow-heavy 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
Layout Mixins paragraph-width Sets max width to $paragraph-width content-small Sets max width to 400px content-fit Alias for paragraph-width content-large Sets max width to 800px content-extra-large Sets max width to 800px content-full-width Sets max width to 100%
Typography Mixins heading-margins Margin and paragraph widths for headings h1 Base styles for h1 h1-xl XL breakpoint styles for h1 h1-lg LG breakpoint styles for h1 h1-md MD breakpoint styles for h1 h1-sm SM breakpoint styles for h1 h1-xs XS breakpoint styles for h1 h1-margins Margins for h1 h1-all Combines all h1 mixins at set breakpoints h2 Base styles for h2 h2-bolder Bolder additions for h2 variant h2-xs XS breakpoint styles for h2 h2-all Combines all h2 mixins at set breakpoints h3 Base styles for h3 h3-lighter Lighter additions for h3 variant h3-xs XS breakpoint styles for h3 h3-all Combines all h3 mixins at set breakpoints h4 Base styles for h4 h4-lighter Lighter additions for h4 variant h5 Base styles for h5 h5-bolder Bolder additions for h5 variant h5-xs XS breakpoint styles for h5 h5-all Combines all h5 mixins at set breakpoints h6 Base styles for h6 h6-bolder Bolder additions for h6 variant body-text Base styles for body text body-text-sans Style additions for sans-serif body variant body-margins Margin and paragraph widths for body text anchor-tag Base styles for links code-text Base styles for in-line code text
Other Mixins clearfix Clear any floats at the end of this element center-clear Clear center margin-auto Explicity set margin-left and margin-right to auto header-padding Padding for header elements