Styling

Stylesheets

For MEG QMS, we are using 2 formats for

• Static styles (megforms.css, print.css, fields-list.css, etc)

• SCSS compiled stylesheets (application.css, etc)

Note

There also other stylesheets used as part of the bootstrap library but they should not be edited.

Compiling stylesheets

When editing scss stylesheets, it is necessary to compile css files using the method below, and commit the changes together with css changes.

Build SASS script

Install libsass - should be already installed as a part of requirements-dev.txt, but can be installed manually with pip install libsass

Run the following command to build css files from stylesheets

sh/build-sass.sh

If you need css to keep re-compiling while you’re working on it, use the following snippet

while true; do sh/build-sass.sh; sleep 1; done

Alternatively, you can use a tool such as Watchman to automatically re-build css whenever changes are made to source sass files.

Other compilers

Other tools for compiling sass are available, such as Koala, but their output may be different and trigger lint errors therefore it is not recommended.

If you are using different compiler, make sure you set the following options to make the output compatible:

Option	Value
OUTPUT STYLE	Expanded
AUTO COMPILE	True
COMPASS MODE	False
SOURCE MAP	False
LINE COMMENTS	False
DEBUG INFO	False

SCSS Stylesheets

Sass files are located in meg_forms/megforms/static/sass/. The styles are broken into the following files:

mixins.scss

These contain the variables and common mixins used throughout the other styles.

fonts.scss

Font import, base styles

buttons.scss

Custom button styles.

dropdowns.scss

Custom dropdowns and overwrites.

forms.scss

custom form elements.

global.scss

All common and global styles

components.scss

All individual components styles

tables.scss

Custom table attributes here

bootstrap4injections.scss

For two-factor custom styles

responsive.scss

Responsive styles for all above styles.