Basic Markup

Testing basic markup and WYSIWYG editor results within the system's most basic use of the grid.

Users Often Add Headings and Create Copy in Separate Content Blocks

Sitefinity 14.4 does not include a built-in CSS compiler. However, it supports the use of CSS preprocessors, such as Sass or Less, to enhance your development workflow. By default, Sitefinity 14.4 comes with the Bootstrap 5 resource package, which includes npm scripts for building and customizing styles. This setup allows you to compile your Sass or Less files into standard CSS using tools like npm scripts or other task runners.

— Progress

To incorporate your custom styles into Sitefinity, you can add them as content items or embedded resources. This approach enables you to manage and serve your CSS files effectively within the platform.

— Progress

For optimal performance and maintainability, it's recommended to follow best practices when working with CSS in Sitefinity. This includes creating reusable styles with CSS classes, using shorthand properties, employing a CSS reset stylesheet, and compressing your CSS for production. Additionally, utilizing a CSS preprocessor can streamline your development process.

— Progress

In summary, while Sitefinity 14.4 doesn't provide a built-in CSS compiler, it fully supports the integration of CSS preprocessors and modern build tools to compile and manage your styles efficiently.

Do the containers effect basic spacing?

Test markup that evaluates the base styling in our multi-site Sitefinity instance, using Bootstrap’s grid system, should provide meaningful content that highlights best practices for CSS development, especially within the context of Sitefinity and Bootstrap.

Each element should be tested against typical patterns of reasonable user content creation.

Many users divide content into separate Content Blocks to facilitate frequent edits.

Optimizing Typography with HTML Tags

Effective typography starts with understanding the role of HTML tags such as <strong> and <em>. Use strong to emphasize critical information and emphasize content that needs subtle attention. Ensure font styles for these tags are visually distinct but harmonious with the overall design.

Using Header Tags Hierarchically

A well-structured document employs h1 through h6 tags logically. This not only enhances readability but also supports accessibility and SEO. Ensure that each heading level has a clear size and weight difference to guide users visually.

Highlighting Accessibility Practices

Incorporating accessible design involves more than just using semantic tags. Consider color contrast ratios for text and background, ensuring a minimum ratio of 4.5:1 for standard text and 3:1 for large text. Additionally, define focus states for interactive elements to support keyboard navigation.

Testing Interactive and Inline Elements

Inline elements such as <a>, <span>, and <code> should have adequate padding, margin, and hover states. For example: Test Link, inline text, and code sample. Verify these elements in various contexts.

Remember, consistent spacing is critical for a polished layout. Tools like browser developer tools can help you inspect box models and ensure padding and margins are applied uniformly.

Note: Always document your styling guidelines and share them across your team to foster a unified approach to design.

Text is often entered without paragraph tags at the end of a content block.

Testing CSS in Sitefinity with Bootstrap

When developing and deploying CSS in Sitefinity, it is essential to follow best practices to maintain a scalable, maintainable, and visually appealing site. Using Bootstrap's grid system provides a solid foundation for responsive design. Start by:

Ensuring your custom styles are organized and separated into logical sections (e.g., base styles, components, and utilities).
Overriding Bootstrap styles thoughtfully—avoid directly editing Bootstrap files; instead, use custom classes or a separate stylesheet.
Testing with a variety of content scenarios, including text of varying lengths, media, and interactive elements, to ensure consistency.

In multi-site instances, create shared style guides and reusable components to reduce redundancy and maintain consistency across sites. Use Sitefinity’s widget templates and layout tools to structure content within Bootstrap’s grid system, ensuring your styles enhance rather than conflict.

Grid Usage Example

This text demonstrates how spacing issues can arise when padding or margins are incorrectly applied. Ensure that container classes (e.g., .container or .container-fluid) align with your layout needs.

Responsive Design

Test your site across various breakpoints. Bootstrap provides predefined classes for responsive layouts, but custom styles should be tested to verify they don’t override grid behavior.

Ensure that text and media adapt to the grid without breaking layout consistency.

A .container-fluid example, which stretches across the full width of the viewport. Use this to verify if rogue styles are affecting margins, padding, or overall spacing.

Additional HTML Elements

"Incorporate quotes and emphasized text to verify styling for typography elements and ensure visual consistency across text content."

        
            /* Sample CSS for testing */
            body {
                font-family: Arial, sans-serif;
            }

Testing Table Styling
Element	Description
`<table>`	Used to display tabular data.
`<thead>`	Defines the header row of a table.

Basic input markup added directly in the content block

Name:
Email:

Media Elements

Ensure images are responsive and test how captions or accompanying text align.

Audio and image control tags:

Deep Dive: Maintaining Consistent Styling Across Sitefinity Components

While working with Sitefinity, leveraging semantic HTML tags and adhering to CSS specificity principles can significantly improve styling consistency. This ensures that styles apply predictably across various components and minimizes the risk of unintentional overrides.

Emphasizing the Importance of CSS Variables

CSS variables, or custom properties, provide a powerful way to define reusable design tokens. For example, you can set a base color palette with variables like --primary-color and --secondary-color, making it easier to apply consistent branding throughout a multi-site instance.

Optimizing Typography with HTML Tags

Using Header Tags Hierarchically

Highlighting Accessibility Practices

Testing Interactive and Inline Elements

Remember, consistent spacing is critical for a polished layout. Tools like browser developer tools can help you inspect box models and ensure padding and margins are applied uniformly.

Note: Always document your styling guidelines and share them across your team to foster a unified approach to design.

WYSIWYG Full Markup Test

Exploring Advanced Sitefinity WYSIWYG Features

Small Primary Button

Medium Secondary Button

Large Tertiary Button

Understanding the practical uses of buttons and media elements in Sitefinity helps teams design engaging and user-friendly content layouts.

"Well-structured quotes bring emphasis to important statements while maintaining visual clarity."

Bold text highlights critical concepts. Meanwhile, italic text provides subtle emphasis.

Lists in Action

Unordered List

CSS best practices
Typography consistency
- Heading hierarchy
- Font pairings
Accessibility improvements

Ordered List

Assess current styling
Identify inconsistencies
1. Spacing
2. Color contrast
Develop a roadmap

External Link Example

Tables for Structured Data

Feature	Details
Buttons	Available in multiple styles and sizes
Media	Images, videos, and embedded elements
Typography	Customizable through CSS variables

Centered Text Example

Right-Aligned Text Example

Superscript example: H²O

Subscript example: CO₂

Horizontal rules are great for separating sections.

Downloadable Document Example

Embedded elements like YouTube videos enhance content interactivity.

There are currently three button sizes with 2 alignment options each that can be chosen from the WYSIWYG editor.

A Button

Here is an image placed within a content block

Further Exploring Nested Unordered List Styling:

Item one
Item two
Item three
- Indented item one (nested once)
- indented item two
  - Indented item three (double nested)
- indented item three (backed out)
Item four (fully backed out of the nests)
Item five
Item six

Exploring The Same in an Ordered List

item one
item two
item thee
item four
1. nested item one
2. nested item two
  1. nested nested item one
item five

A table made with WYSIWYG

one	two	three	four	five
yes	no	yes	no	yes
1	2	3	4	5

Some like strong H3 headlines.

Some do not.

BWT UI-2025 docx Test File