Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.
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 )
);
...