#NGEN Theme SASS Implementation

##General Notes

This README is to provide general guidance on how to implement variable overrides and custom styles. Please follow the conventions outlined here, as it keeps the code clean and readable.

Twitter Bootstrap 4 has been chosen as the UI framework of choice for this application.

Sass has been chosen as the CSS-compatible compilation technology choice. This allows us to use variables, nested rules, mixins, inline imports and more. Sass helps keep large stylesheets well-organized. When the application is built, the Sass files are compiled into css.

##Main Sass File

The ngen.scss file is the main sass file that will import the variable overrides, the Bootstrap framework, and any custom style classes. This will compile into one file that will get referenced by the frontend for all styling. Webpack tends to obscure this process.

##Overriding Variable Values

WARNING: You should NEVER alter the base Bootstrap scss files.

You can override any native Bootstrap theme variable value within the _ngenVariables.scss file. Keep in mind that any changes that you make to the variables in this file are global and will cascade throughout the theme.

When making changes to a variable value, please do it in-line and comment out the original value;

For example:

$brand-primary:             $ngen-blue !default; //#0275d8 !default;

If you have custom classes or components you should add their specific styles in the _ngenCustomStyles.scss file.

##Custom Styles and Classes

WARNING: You should NEVER alter the base Bootstrap scss files.

The _ngenCustomStyles.scss file is provided to add custom classes and styles. Please group you custom styles within a comment block with a description of what they apply to.

For example:

//Footer Styles Begin//

.footer-logo {
    color: white;
}

.footer-legal-info
{
    font-size: 0.5em;
}
//Footer Styles End//