Skip to content

Latest commit

 

History

History
67 lines (55 loc) · 1.7 KB

sass-setup.md

File metadata and controls

67 lines (55 loc) · 1.7 KB
Raw

SASS Configuration

The sass is built to be configurable per project, we do this by having a default properties map which we refer to as the "theme", it's located here: sass\variables\_theme.scss.

$default-theme-properties: (
  // Colors
  primaryColor: #999999,
  secondaryColor: #000000,
  tertiaryColor: #cccccc,
  backgroundColorLight: #ffffff,
  backgroundColorDark: #333333,
  textColorLight: #ffffff,
  textColorDark: #333333,

  // Fonts
  fontHeader: "Montserrat",
  fontText: "Roboto",
  fontIcon: "Font Awesome 5 Free",

  // Layout
  layoutSpace: 20px,
  layoutContainerWdth: 1366px,

  // Breakpoints
  breakpointDesktop: (
    desktop: 1366px
  ),
  breakpointResponsive: (
    desktopsmall: 1366px,
    tablet: 1024px,
    phone : 600px
  )
);

Furthermore, there are individual components that have their own property maps.

The theme and component properties can be completely overridden or added to in your project.

To override a theme or component property, define the override before you include the fw-bundle.scss in your project.

@import 'your-override-maps';
@import 'framewerk/sass/fw-bundle';

The following example updates the primary color of the site and defines a new breakpoint to be included:

$theme-properties:(
  primaryColor: #362636,
  breakpointResponsive: (
    tabletLarge: 2024px
  )
);

Components are also configurable, see a list of components

To retrieve a theme property in your sass getThemeProperty(PROPERTY); an example:

 color: getThemeProperty(textColor);

To retrieve a component property in your sass getThemeProperty(PROPERTY, MAP); an example:

getThemeProperty(textHoverColor, $component-button-properties);