Sufio document templates come with various mixins and style functions designed to simplify creating stylesheets of document templates. Use these to make your templates more flexible and adapt the layouts to work across all languages and use cases.
You can use these style mixins and functions when editing the styles.scss file in the template editor. In some cases, you can customize mixins and style functions with additional parameters.
These customizations are possible thanks to Sufio using a powerful library called Prince to create PDF documents with great support of the latest CSS styles.
Include these pre-built SCSS mixins in your templates to apply styles consistently. By using our ready-made mixins, you'll have your templates ready faster and ensure a cohesive look whether the documents are viewed online or downloaded as PDF documents.
To use these mixins in your styles.scss file, add @include mixin-name; and provide the parameters as detailed below.
@include document-defaults
Defines the default styles and layout rules for all document templates.
@include footer
Places the footer HTML element and its content at the bottom of the page. For PDF documents with multiple pages, the footer is placed at the bottom of the last page.
Apply this mixin to the root element (&), not to the footer element.
Create whitespace above the footer
@include footer($margin: string)
Use the margin parameter to add whitespace above the footer.
@include formatting-defaults
Defines the default styles for formatting tags, such as bold, to work consistently across the document templates.
Customize the bold style
@include document-defaults($bold: number, $bold-color: string)
Use the $bold parameter to customize the weight of the bold style or the $bold-color parameter to change the color of the bold style.
@include generate-columns($columns: list, $gutter: number)
Generates a layout with multiple columns in a document.
The $columns variable is a list of values that define the relative widths of the columns, totaling 100 percent. The $gutter value specifies the space between columns as a percentage of the total column width.
The mixin generates style classes for each column, such as col-1, col-2, and col-3 for a layout with three columns.
The mixin also generates style classes for column ranges, such as col-23 for columns 2 and 3 combined.
It also generates style classes for right-aligned columns when previous columns are omitted in a row, such as col-3-r.
Add a name to the column layout
@include generate-columns($columns: list, $gutter: number, $name: string)
Use the $name parameter to add a custom prefix to the style classes. For example, with $name: ‘footer’, the mixin generates classes such as col-footer-1, col-footer-23, and col-footer-2-r.
This is useful if you want to use different column configurations in the header, body, or footer of your document.
@include no-page-break
Determines that the element does not break across pages in the PDF version of the document. If the whole element does not fit on the page, it is moved to the next page.
@include pdf-document
Specifies styles that are applied only to the PDF versions of documents.
@include resizable($base-width: string)
Defines the default width for images that can be resized on the Design page, such as a logo or a stamp.
The base-width parameter specifies the image width at 100% zoom.
Align the image
@include resizable($base-width: string, $align: string)
Use the align parameter with the value left, center, or right to align the image accordingly.
@include selection-inverse
Ensures that the text selection (highlighting) styling is displayed in inverted colors. This is useful when a text is in a light color on a dark background.
Style functions take input parameters and return computed style values for your template stylesheet. Use them to create dynamic styles within your documents, or simplify complex calculations.
To use these functions in your styles.scss file, add function-name() and provide the parameters as detailed below.
complementary-grey($color: string)
Returns a grey color that complements a specified color.
This function is useful for creating harmonious designs where grey elements need to align aesthetically with a primary color.
Customize the luminance
complementary-grey($color: string, $min: number, $mid: number, $max: number)
Use the min and max parameters to specify the darkest and lightest shade. The default value for min is 0 (black) and for max is 1 (white).
Use the mid parameter to adjust how rapidly the output color shifts from dark to light based on the input color's brightness. The default value is 0.5.
Customize the tint and hue
complementary-grey($color: string, $tint: number, $hue: number)
Use the tint parameter to adjust how much color tint is added to the output color. The default value is 0 (no tint).
Use the hue parameter to specify the tint color. The default value is 30 (orange).
contrast-color($color: string)
Returns either black (#000) or white (#fff) color, selecting the one that provides the best contrast with the color specified in the $color parameter.
You can use this function to keep text readable when placed over different background colors.
Return custom contrast colors
contrast-color($color: string, primary: string, secondary: string)
Use the $primary and $secondary parameters to return colors other than black and white.
You can use this function to ensure text remains readable when the selected text color ($scheme-color) is too light against the background color.
if-ltr($if: value, $else: value)
Returns value based on the text direction of the document language.
For left-to-right languages, such as English or German, returns the $if value. For right-to-left languages, such as Arabic and Hebrew, returns the $else value.