πŸ”₯ Black Friday Sale - Get all templates for just $59 πŸ”₯

Sass variables

Cruip CSS

Here is the structure of the settings folder which includes all the files that contain our Sass variables πŸ‘‡

settings/
β”‚
β”œβ”€β”€ base/
β”‚   β”œβ”€β”€ _colors.scss
β”‚   β”œβ”€β”€ _links.scss
β”‚   β”œβ”€β”€ _misc.scss
β”‚   β”œβ”€β”€ _scroll-reveal.scss
β”‚   β”œβ”€β”€ _typography.scss
β”‚   └── _widths-and-spacing.scss
β”‚
β”œβ”€β”€ elements/
β”‚   β”œβ”€β”€ _accordion.scss
β”‚   β”œβ”€β”€ _buttons-and-forms.scss
β”‚   β”œβ”€β”€ _carousel.scss
β”‚   └── _modal.scss
β”‚
β”œβ”€β”€ layout/
β”‚   β”œβ”€β”€ _footer.scss
β”‚   └── _header.scss
β”‚
β”œβ”€β”€ patterns/
β”‚   β”œβ”€β”€ _split.scss
β”‚   └── _tiles.scss
β”‚
β”œβ”€β”€ sections/
β”‚   β”œβ”€β”€ _clients.scss
β”‚   β”œβ”€β”€ _cta.scss
β”‚   β”œβ”€β”€ _features-split.scss
β”‚   β”œβ”€β”€ _features-tiles.scss
β”‚   β”œβ”€β”€ _hero.scss
β”‚   β”œβ”€β”€ _pricing.scss
β”‚   β”œβ”€β”€ _signin.scss
β”‚   β”œβ”€β”€ _team.scss
β”‚   └── _testimonials.scss
β”‚
└── _settings.scss

So if for example if you want to modify the color palette, just open the settings/base/_colors.scss file and replace the HEX values with your own πŸ‘‡

// The color palette
$palette: (
	light: (
		1: #FFFFFF,
		2: #F0F4FD,
		3: #D9E0F0
	),
	dark: (
		1: #2B2B52,
		2: #58678C,
		3: #95A1BC
	),
	primary: (
		1: #8E79FC,
		2: #B8ABFD,
		3: #6448FB,
		4: #E2DDFE
 	),
	secondary: (
		1: #6EB0FC,
		2: #A0CBFD,
		3: #3C95FB,
		4: #D2E6FE
	),
	alert: (
		error: #FF7272,
		warning: #FFBF77,
		success: #4ED3A1
	)
);

...

Or, in the case you want to make changes to the typographic scale settings/base/_typography.scss πŸ‘‡

...

// The typographic scale
$font--scale: (
	// key 		// font-size, line-height, kerning
	alpha:   	( 44px, 54px, null ),
	beta:    	( 38px, 48px, null ),
	gamma:   	( 32px, 42px, null ),
	delta:   	( 24px, 34px, -0.1px ),
	epsilon: 	( 20px, 30px, -0.1px ),
	zeta:    	( 18px, 28px, -0.1px ),
	eta:     	( 16px, 24px, -0.1px ),
	theta:   	( 14px, 22px, null )
);

...
Last updated on August 17, 2021