Structure

The SCSS framework is broken down based on an “Atomic” schema and uses the following folder structure:

Components

• /source
• /scss
• /components

Components can be pulled into the primary style.scss file or, if they are to be scoped only to their respective component, they can pull in any other global style as needed.

UnCSS can be used to strip out unused css if the style is to only be component based.

Make sure to test your templates against your UnCSS’d file as modifiers that are added via JavaScript will need to be manually added as they are not located in your template and as such will not be included in your compressed file.

Elements

• /source
• /scss
• /elements

Elements are again broken into an atomic structure. Each element scss file contains defaults that can styless for the elements that belong to that group.

Example:

The _forms.scss file will contain all elements that are used when building a standard form such as input and select fields.

Most elements utilize the following files:

• /source
• /scss
• partials
• _grid.scss
• _variables.scss

Fontawesome

The font awesome fonts are packages with our framework by default. If these are unused they should be remarked out in the master style.scss file.

Remember to update the fontawesome _variables.scss file to set the proper font path.

Layouts

The layout folder contains scss files for specific pages. This allows for an easy and clean way to set proper page specific setting that are scoped accordingly.

Partials

The partials folder contains default files such as global variables, mixin as well as our grid system.

The _variables.scss file should be set to match the style guide. This will help in setting global defaults.

Regions

Regions are areas designated on a page for a specific purpose. This would include things such as the header, information area, left side, main content, right side, footer, etc.

Vendors

The vendors folder is used for any 3 party plugins that may be needed such as an image slider.