Rivet Sass

Use Rivet's Sass source files in your project

Using Sass

Rivet’s CSS is built using the Sass (SCSS) CSS preprocessor.

Both the Rivet .zip download and the NPM package include the .scss source files that you can use in your Rivet project.

If you are using the Rivet npm package and have a build process in place for Sass already, you can import Rivet into your project directly:

@import "node_modules/rivet-uits/sass/rivet.scss"

Once you have imported rivet.scss into your project, you will be able to use the variables listed on this page in your own Sass stylesheets.

Typography

See the layout documentation to learn more about Rivet’s responsive type scale CSS classes.

Rivet type scale Sass variables
Variable	rem	px
`$ts-12`	.75rem	12px
`$ts-14`	.875rem	14px
`$ts-16`	1rem	16px
`$ts-18`	1.125rem	18px
`$ts-20`	1.25rem	20px
`$ts-23`	1.4375rem	23px
`$ts-26`	1.625rem	26px
`$ts-29`	1.8125rem	29px
`$ts-32`	2rem	32px
`$ts-36`	2.25rem	36px
`$ts-41`	2.5625rem	41px
`$ts-46`	2.875rem	46px
`$ts-52`	3.25rem	52px

Spacing

See the layout documentation to learn more about Rivet’s responsive spacing CSS classes.

Rivet spacing Sass variables
Variable	rem	px
`$xxs`	.25rem	4px
`$xs`	.5rem	8px
`$sm`	1rem	16px
`$md`	1.5rem	24px
`$lg`	2rem	32px
`$xl`	2.5rem	40px
`$xxl`	4rem	64px

Width

See the utilities documentation to learn more about Rivet’s responsive width CSS classes.

Rivet width Sass variables
Variable	rem	px
`$width-xxs`	4rem	64px
`$width-xs`	8rem	128px
`$width-sm`	12rem	192px
`$width-md`	16rem	256px
`$width-lg`	20rem	320px
`$width-xl`	24rem	384px
`$width-xxl`	32rem	512px

Color

We encourage you to modify Rivet to fit your needs, and sometimes that means adjusting the colors. We’ve included tints in Rivet to make it easier to adjust colors in a way that’s consistent with other Rivet applications and with IU’s brand guidelines.

Tints are colors mixed with different degrees of white. They offer flexibility and a greater range of color to draw attention to or indicate actions. (You’ll notice that we tint our secondary buttons to indicate a hover state, for example.)

Do use tints as accents in your custom components
Do make sure that color combinations meet WCAG 2.0 standards for contrast ratio. Use this tool to check combinations for compliance.
Do use tints sparingly
Don’t use tints to replace colors of existing components

Black

Rivet color variables
Variable	Hex	Sample
`$color-black`	#333333
`$color-black--050`	#fafafa
`$color-black--100`	#eeeeee
`$color-black--200`	#dddddd
`$color-black--300`	#cccccc
`$color-black--400`	#aaaaaa
`$color-black--500`	#999999
`$color-black--600`	#777777
`$color-black--700`	#666666
`$color-black--800`	#555555
`$color-black--900`	#444444

Blue

Rivet color variables
Variable	Hex	Sample
`$color-blue`	#006298
`$color-blue--050`	#edf1f6
`$color-blue--100`	#dce3ee
`$color-blue--200`	#b8c8dc
`$color-blue--300`	#95adcb
`$color-blue--400`	#7194ba
`$color-blue--500`	#497ba9
`$color-blue--600`	#006298
`$color-blue--700`	#134a71
`$color-blue--800`	#16324b
`$color-blue--900`	#121c28

Green

Rivet color variables
Variable	Hex	Sample
`$color-green`	#008a28
`$color-green--050`	#eaf3e8
`$color-green--100`	#d4e8d2
`$color-green--200`	#aad1a7
`$color-green--300`	#7eb97c
`$color-green--400`	#50a253
`$color-green--500`	#008a28
`$color-green--600`	#116d23
`$color-green--700`	#16521d
`$color-green--800`	#153717
`$color-green--900`	#111f0f

Yellow

Rivet color variables
Variable	Hex	Sample
`$color-yellow`	#f5bb17
`$color-yellow--050`	#ffeecd
`$color-yellow--100`	#ffdd9b
`$color-yellow--200`	#f5bb17
`$color-yellow--300`	#d6a31a
`$color-yellow--400`	#b58a1b
`$color-yellow--500`	#94721b
`$color-yellow--600`	#765a19
`$color-yellow--700`	#584416
`$color-yellow--800`	#3c2e13
`$color-yellow--900`	#221b0c

Orange

Rivet color variables
Variable	Hex	Sample
`$color-orange`	#df3603
`$color-orange--050`	#ffece5
`$color-orange--100`	#ffd9cc
`$color-orange--200`	#ffb49a
`$color-orange--300`	#fa8e6b
`$color-orange--400`	#ef663c
`$color-orange--500`	#df3603
`$color-orange--600`	#b02f0a
`$color-orange--700`	#82270d
`$color-orange--800`	#571e0c
`$color-orange--900`	#2f1407

Breakpoints

Rivet breakpoint Sass variables
Variable	rem	px
`$breakpoint-sm`	3rem	480px
`$breakpoint-md`	46.25rem	740px
`$breakpoint-lg`	67.5rem	1080px
`$breakpoint-xl`	78.75rem	1260px
`$breakpoint-xxl`	87.5rem	1400px

Shadows

// Standard shadow(s)

$shadow-base: 0 1px 3px 2px rgba(0, 0, 0, .07);