Table of Contents

CSS Customization

Learn about Swift's CSS structure, load order, markup and use of data-attributes

By understanding Swift’s structured approach to markup, its use of data- attributes, its CSS load order, and its Dynamicweb-generated variables, frontend developers can effectively target, style, and extend content elements while maintaining consistency and avoiding conflicts. This structure allows you to create dynamic and visually consistent designs tailored to any project’s needs.

CSS Structure and Load Order in Swift

Swift follows a structured CSS loading sequence that ensures consistent styling while allowing flexibility for frontend developers to customize the design. Understanding this load order is important for modifying or extending styles in a way that preserves Swift’s functionality and integrates with Dynamicweb’s generated CSS variables.

CSS Load Order

The CSS files are loaded in this sequence:

  1. Swift.css: Swift’s core stylesheet, built on Bootstrap. It maps Bootstrap variables to Dynamicweb’s --dw variables and adds Swift-specific --swift variables. This defines the baseline design system.
  2. Dynamicweb-generated CSS: Files generated automatically when admins configure styles in the backend:
    • Color Schemes (--dw-color-*)
    • Buttons (--dw-btn-*)
    • Typography (--dw-font-*)
      • These live in /Files/System/Styles/.
  3. Custom CSS: Your own custom.css, loaded after Swift.css and DW files. This is where you consume or override variables, or add entirely new rules.

Example load order in HTML:

<link rel="stylesheet" href="/Files/Templates/Designs/Swift-v2/Assets/css/swift.css">
<link rel="stylesheet" href="/Files/System/Styles/ColorSchemes/swift.css">
<link rel="stylesheet" href="/Files/System/Styles/Buttons/buttons.css">
<link rel="stylesheet" href="/Files/System/Styles/Typography/fonts.css">
<link rel="stylesheet" href="/Files/Templates/Designs/Swift-v2/Assets/css/custom.css">

Swift CSS Variables

Dynamicweb generates CSS variables for typography, buttons, and color schemes directly from the backend admin interface. These can be consumed (used in your custom CSS) or overridden (globally or in specific contexts).

Typography Variables (--dw-font-*)

/* Body text */
body {
  --dw-base-font-size: 16px;
  --dw-type-scale: 1.333;
  --dw-font-family: Inter;
  --dw-font-weight: 500;
  --dw-letter-spacing: 0;
  --dw-line-height: 1.5;
  --dw-text-transform: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.dw-h1, .dw-h2, .dw-h3, .dw-h4, .dw-h5, .dw-h6 {
  --dw-font-family: Inter;
  --dw-font-weight: 600;
  --dw-letter-spacing: -0.02;
  --dw-line-height: 1;
  --dw-text-transform: none;
}

/* Buttons */
[data-dw-button] {
  --dw-font-family: Inter;
  --dw-font-weight: 600;
  --dw-letter-spacing: 0;
  --dw-line-height: 1;
  --dw-text-transform: none;
}

Consume it

.my-card p {
  font-family: var(--dw-font-family);
  font-weight: var(--dw-font-weight);
  font-size: calc(var(--dw-base-font-size) * 1.125);
}

Override it

:root {
  --dw-base-font-size: 18px;
  --dw-type-scale: 1.25;
}

[data-dw-colorscheme="light"] h2 {
  --dw-letter-spacing: -0.03;
}

Typography: max line length

Swift sets a readable maximum line length for content text:

:where([data-swift-text]) {
  max-inline-size: var(--swift-text-width);
}

By default, --swift-text-width is 70ch. The ch unit equals the width of the “0” character, so 70ch lands in the classic readability range (roughly 45–75 characters per line).

Why 70ch?

Research and long-standing typographic practice converge on a sweet spot of ~45–75 characters per line. Inside this band, readers make fewer eye “return sweeps,” keep their place more easily, and comprehend better; lines that are much longer increase tracking effort, while much shorter lines cause excessive line breaks and choppy rhythm.

Picking ~70ch sits near the upper-middle of that optimal range, which works well across modern screens and variable fonts.

This way there is a better chance that readers will read what is on the website.

Override options (pure CSS)

Place your overrides after Swift’s CSS so they win via cascade.

1) Global (site-wide)

:root { --swift-text-width: 90ch; }

2) All content texts ([data-swift-text])

:where([data-swift-text]) { --swift-text-width: 90ch; }
/* or set the property directly
:where([data-swift-text]) { max-inline-size: 90ch; }
*/

3) A specific content type (Poster)

/* Affects only poster blocks */
[data-dw-itemtype="swift-v2_poster"] { --swift-text-width: 100ch; }

/* If you want to limit the change to text inside the poster */
[data-dw-itemtype="swift-v2_poster"] [data-swift-text] { --swift-text-width: 100ch; }

Use --swift-text-width for consistency, and adjust in ch so the measure scales naturally with the font.

Button Variables (--dw-btn-*)

.dw-button, [data-dw-button] {
  --dw-btn-padding-x: 2.5rem;
  --dw-btn-padding-y: 1rem;
  --dw-btn-border-radius: 50rem;
  --dw-btn-border-width: 1px;
}

Consume it

a.as-button {
  padding-inline: var(--dw-btn-padding-x);
  padding-block: var(--dw-btn-padding-y);
  border-radius: var(--dw-btn-border-radius);
  border: var(--dw-btn-border-width) solid currentColor;
}

Override it

:root {
  --dw-btn-border-radius: 0; /* make global square buttons */
}

[data-dw-colorscheme="dark"] [data-dw-button] {
  --dw-btn-padding-x: 3rem;
  --dw-btn-border-width: 2px;
}

Color Scheme Variables (--dw-color-*)

[data-dw-colorscheme="light"] {
  --dw-color-background: #FFFFFF;
  --dw-color-background-rgb: 255, 255, 255;
  --dw-color-foreground: #242424;
  --dw-color-foreground-rgb: 36, 36, 36;
  --dw-color-button-primary: #4d4d4d;
  --dw-color-button-primary-contrast: #fff;
  --dw-color-button-secondary: #ededed;
  --dw-color-button-secondary-contrast: #000;
}

Consume it

[data-swift-text] .dw-paragraph-1 {
  color: var(--dw-color-foreground);
}

Override it

/* Darken text in light rows */
[data-dw-colorscheme="light"] {
  --dw-color-foreground: #1a1a1a;
}

Custom colors Admins can add Custom colors in each scheme. A color named accent generates --dw-color-accent.

[data-swift-text] .dw-paragraph-1 {
  color: var(--dw-color-accent);
}

Swift attributes and their roles

Swift uses structured markup with data- attributes that make it easy to scope styles to specific sections, rows, columns, or content types.

Element Type Key Attributes Description
Section data-swift-gridrow, data-dw-colorscheme, data-dw-itemtype Controls background, spacing, and scheme for the whole section.
Row data-swift-container, data-dw-container-width, class="grid" Defines row width and column distribution.
Column data-swift-gridcolumn, id, data-dw-itemtype, data-dw-colorscheme Targets individual content blocks.
Content Elements data-swift-text, data-swift-poster, data-swift-slider, etc. Identifies specific content types.

Examples of using attributes (with variables)

Targeting entire rows

[data-swift-gridrow][data-dw-colorscheme="light"] {
  background-color: var(--dw-color-background);
}

Targeting rows with specific content

[data-dw-itemtype="swift-v2_row"] [data-swift-slider] {
  border: 2px solid var(--dw-color-button-primary);
}

Styling a specific column by ID

[data-swift-gridcolumn][id="20213"] {
  background-color: var(--dw-color-secondary);
  color: var(--dw-color-foreground);
}

Customizing content by item type

[data-dw-itemtype="swift-v2_text"] p {
  font-size: calc(var(--dw-base-font-size) * 1.2);
  color: var(--dw-color-accent);
}

[data-dw-itemtype="swift-v2_poster"] [data-dw-button="primary"] {
  background-color: var(--dw-color-button-primary);
  color: var(--dw-color-button-primary-contrast);
}

Combining selectors

[data-swift-gridrow][data-dw-colorscheme="light"] [data-dw-itemtype="swift-v2_text"] {
  margin-top: 2rem;
  color: var(--dw-color-foreground);
}

Best practices

  1. Use variables instead of hard-coded values → keeps styling consistent with backend configuration.
  2. Scope overrides carefully → use data-dw-colorscheme and data-dw-itemtype to keep changes predictable.
  3. Define brand accents as custom colors in the backend → consume them with --dw-color-<name>.
  4. Keep overrides in custom.css → never edit Swift.css or DW-generated files.

With this structure, you can safely extend Swift’s design system: consume or override variables, target precise elements with attributes, and align your customizations with Dynamicweb’s backend-controlled branding.

Improve this doc
To top