SSIS Documentation - Style Guide

CSS Style Guide for SSIS Documentation

This document outlines the CSS styling conventions and best practices for the SQL Server Integration Services (SSIS) documentation website. Adhering to these guidelines ensures a consistent, readable, and aesthetically pleasing user experience across all pages.

General Principles

Readability: Prioritize clear and legible text.
Consistency: Maintain a uniform look and feel throughout the documentation.
Accessibility: Ensure sufficient color contrast and logical structure.
Responsiveness: The layout should adapt gracefully to various screen sizes.

Color Palette

The primary color scheme is based on Microsoft's brand colors, adapted for documentation:

Primary: #0078d4 (Microsoft Blue) - Used for headings, links, buttons, and primary UI elements.
Secondary: #f3f3f3 (Light Gray) - Used for backgrounds of sidebars and code blocks.
Accent: #7fba00 (Microsoft Green) - Used for emphasis, tips, and important callouts.
Text: #333 (Dark Gray) - Primary text color for body content.
Heading: #1e395f (Deep Blue) - Used for main headings to create hierarchy.

Typography

We utilize standard web-safe fonts for optimal performance and consistency:

Sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif - The default font for body text and general UI elements.
Monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace - Used exclusively for code snippets and inline code.

Font Sizing and Line Height

A standard typographic scale ensures visual harmony:

Body text: 16px with a line-height of 1.6.
Headings (h1, h2, h3, h4) follow a decreasing scale for clear hierarchy.
Code font size is slightly smaller for distinction.

Layout and Structure

The page layout is designed for efficient navigation and content consumption:

Header: Contains the site title and a brief description.
Main Content Area: Divided into a sidebar for navigation and the main article area for content.
Sidebar: Provides a persistent navigation menu, with the active page highlighted.
Article: Houses the primary documentation content, structured with headings and paragraphs.
Footer: Includes copyright information and links.

Responsive Design

A media query adjusts the layout for smaller screens, stacking the sidebar above the main content to improve usability on mobile devices.

Code Styling

Code examples are styled to be easily distinguishable and readable:


/* Example of SSIS Control Flow Task */
SELECT
    TaskName,
    TaskType,
    Description
FROM
    SSIS_Metadata.dbo.ControlFlowTasks;

Inline code uses <code> tags.
Block code uses <pre><code> tags with a distinct background.
Code elements have a specific color treatment and font family.

Callout Boxes

Specialized boxes are used to highlight important information:

Note: This is an important note regarding data transformation.

Tip: Consider using the Script Task for complex custom logic.

Warning: Dropping the staging table might lead to data loss.

.note for general informational points.
.tip for helpful suggestions and best practices.
.warning for critical information or potential issues.

Tables

Tables are used for presenting structured data and configurations:

Parameter	Description	Default Value
`BufferSize`	Specifies the buffer size for data flow.	`10000`
`MaxErrorCount`	Maximum number of errors before stopping execution.	`0`

Tables have a clean, bordered appearance.
Header rows are distinct.
Zebra striping is applied for improved row readability.

Interactivity

Links in the sidebar and within the content should provide visual feedback on hover and when active.

Ensure all interactive elements are clearly identifiable and provide state changes (e.g., hover effects for links and buttons).