CSS Classes

We recommend using these classes to style your designs. Not only are these classes implemented in the @freesewing/plugin-theme plugin, they are also properly styled in our own frontends. Furthermore, by using a common set of class names, anyone can adapt the styling to suit their own needs.

It is this styling that you will see below. What the various classes exactly look like will depend on the environment where you use FreeSewing, because in-browser styling or SVG/PDF styling is slightly different. But what doesn’t change is the names of the classes and their purpose.

Contextual colors

These are the main classes that you typically want to use. The will set either the stroke or fill property, depending on the element you set them on.

For example, when you use these classes on a path, they will set the stroke property. But if you use them on text, they will set the fill property. Which is typically what you want.

path.fabric text.fabric path.lining text.lining path.interfacing text.interfacing path.canvas text.canvas path.various text.various path.mark text.mark path.contrast text.contrast path.note text.note

Stroke colors

These classes set the stroke property explicitly.

path.stroke-fabric text.stroke-fabric path.stroke-lining text.stroke-lining path.stroke-interfacing text.stroke-interfacing path.stroke-canvas text.stroke-canvas path.stroke-various text.stroke-various path.stroke-mark text.stroke-mark path.stroke-contrast text.stroke-contrast path.stroke-note text.stroke-note

Fill colors

These classes set the stroke-fill property. Note that we’ve applied a background to ensure the text remains readable.

path.fill-fabric path.fill-fabric text.fill-fabric text.fill-fabric path.fill-lining path.fill-lining text.fill-lining text.fill-lining path.fill-interfacing path.fill-interfacing text.fill-interfacing text.fill-interfacing path.fill-canvas path.fill-canvas text.fill-canvas text.fill-canvas path.fill-various path.fill-various text.fill-various text.fill-various path.fill-mark path.fill-mark text.fill-mark text.fill-mark path.fill-contrast path.fill-contrast text.fill-contrast text.fill-contrast path.fill-note path.fill-note text.fill-note text.fill-note

Stroke styles

These classes set the stroke-dasharray property.

[default] .dotted .dashed .lashed .sa .help .hidden

Stroke widths

These classes set the stroke-width property. The default width is shown at the top.

[default] .stroke-xs .stroke-sm .stroke-lg .stroke-xl .stroke-2xl .stroke-3xl .stroke-4xl

Font size

These classes set the stroke-width property. The default width is shown at the top.

[default] .text-xs .text-sm .text-lg .text-xl .text-2xl .text-3xl .text-4xl

Text alignment

These classes set the text-anchor property. The default align is to the left (text-anchor: start;).

Default is left-aligned .center .right

Bold and italic text

Default text .bold .italic

Various:

  • .no-stroke: Do not stroke the element
  • .no-fill: Do not fill the element
Update a PersonCore API