Using SASS To Customize WebWorks Reverb 2.0
WebWorks Reverb 2.0 makes use of SASS to produce a responsive HTML5 layout. These files are found in the Pages/sass folder of the Format. SASS file names end with the .scss extension. There are many files in this folder and all of the files have a specific purpose.
Of these files, they fall into two categories:
Template Files - These are identified by their filename. A Template File’s name will always begin with the underscore character. These files contain variables that hold values that can be changed by the user to affect areas of the layout without changing the implementation of the layout itself.Layout Files - These files have filenames that do not begin with the underscore character. These files contain the implementations of the variables defined in template files.For reference, refer to the below table for a summary of what each SASS file pertains to.
SASS Filename | Pertains To |
|---|---|
_borders.scss | Contains variables for border values to be applied across the layout. |
_colors.scss | Contains variables for color values to be applied across the layout. |
_fonts.scss | Contains variables for font values to be applied across the layout. |
_functions.scss | Contains definitions of custom SASS functions created by WebWorks for use in the layout. |
_icons.scss | Contains variables for icon values to be applied across the layout. |
_sizes.scss | Contains variables for size values to be applied across the layout. |
connect.scss | Contains the implementation for top-level structure and core behavior for the layout. |
menu_initial_closed.scss | Contains the menu configuration for when the menu is set to be closed upon first visit of the help set. |
menu_initial_open.scss | Contains the menu configuration for when the menu is set to be open upon first visit of the help set. |
print.scss | Contains style information for the presentation when a page is to be printed. |
search.scss | Contains style information for the presentation of the search page. |
skin.scss | Contains the aesthetic implementation for the layout. This file is where colors, fonts, borders, icons, and other visual style settings are implemented. This file also contains the various implementations for individual skins. |
social.scss | Contains style information for the social buttons in the page toolbar. |
webworks.scss | Contains default style information for tables, the Mini-TOC, and other various small items in the layout. This file is implemented last and works well for custom implementations as well. |
Last modified date: 11/29/2022