# Skyline Configuration

# Global Imports

We recommend that all projects using Skyline include the following files in their main SCSS entrypoint.

# Resets

Skyline provides several files to help create consistency across projects using our styles.

Warning: Importing these files into projects with existing styles may cause unexpected behaviour! Proceed with caution and thorough testing.

Reset ensures core styles behave the same way across browsers before starting to styling them. This is strongly recommended to avoid browser inconsistencies.
Box sizing ensures that border-box is the default for all elements within the project. We do this because it's easier to predict and control element size (opens new window). But, all Skyline components will include this box-sizing within them to account for legacy implementations that cannot import globally.

How to

@import '~@skyline/scss/src/generic/generic.reset';
@import '~@skyline/scss/src/generic/generic.box-sizing';

# Theme

This file outputs the required styles for using the theme utilities and related Buttons. It’s a mandatory file for any project using the default Benevity theme.

Importing the file will use the Benevity default values for Brand and Action. You can combine it with the CSS custom properties variable to provide client-specified Brand and Action color values.

How to

@import '~@skyline/scss/src/theme/benevity';

# Variables

We use SCSS variables to configure several optional global settings.

These can be set in your main SCSS entry point. You can also set it in your webpack loader configuration by using something like style resource loader (opens new window). Here's an example of how we do this in Skyline (opens new window).

# CSS Custom Properties

$skyline-enable-css-custom-properties: true | false;

Lets you use CSS variables (opens new window) to control properties like Brand and Action colors-allows for simpler client-configured colors vs. fixed HEX codes.

When you enable this property, you'll be able to customize the default body font using the --body-font variable. For example:

:root {
  --body-font: Wingdings;
}

Requirements:

Browser support (opens new window) for CSS variables or the equivalent ponyfill (opens new window).
A method to provide the client-specified value to the :root (opens new window) of your HTML. Here's an example of this implementation on our settings page.