CLOSE
St. Mary's Seminary & University

Style Guide

This page demonstrates the various styles and design elements in the 2023 website for St. Mary's Seminary & University. It is not a substitute for the official CMS manual created by the developers (which provides instruction for actually editing the website pages). This is simply a display and explanation page of the styling options used on the site or available to editors in certain cases.

As an online Style Guide webpage, this resource has been designed to help content editors understand the styles and conventions that are used in the SMSU 2023 website. By placing this page online, we hope to both explain/specify some of the styles being used and to demonstrate their presentation and behavior.

website displayed in different size screens/browser widthsWhat does that mean? Simply put, the website doesn’t look exactly the same in different clients with different screen sizes—nor should it. This website is mobile-first, mobile-friendly, and fully responsive to the browser being used to view it.

  • It is mobile-first because its style sheet has been written in such a way that the styling for smaller viewports (e.g., browsers in smartphones and portrait-style tablets) is set first and then changes are added for altering the presentation in wider clients (browsers in high resolution laptops and desktop monitors). This allows the site to appear quickly and cleanly on mobile devices where slower connections are often prevalent.
  • It is mobile-friendly because the styles are not just presented for mobile clients first, they are specifically designed to create the optimum presentation in the mobile browser. For example, font-sizes are large enough to see on mobile clients, but still smaller than those used for widescreen views where sizes and styles must be proportional to the viewport they are displayed in. It is also mobile-friendly in performance: elements never appear wider than the screen and often contain behaviors that will change their dimensions or presentations as needed for the mobile environment. Finally, spacing for links and buttons is optimized since mobile browsers primarily rely on touch rather than clicks.
  • It is responsive because it is a single website that serves all the various environments already mentioned, like desktop, tablets, and smartphones. It is not reasonable nor a good use of resources to maintain separate sites for desktop and mobile environments when good coding and styling can accomplish the responsiveness needed for the modern variety of browsing experiences. This website achieves such responsiveness; but that gift may also be a challenge for those who are used to adding/editing content in a static environment that favors only desktop displays.

Therefore, the information below—particularly the Site Block examples—are best viewed “dynamically.” For example, use a desktop browser but change the viewport width from widescreen to narrow and see how the various blocks change responsively. Or compare the parts of this page on different devices (e.g., a desktop computer, tablet, and/or smartphone) to see how they differ.

Happy content editing!


SITE TYPOGRAPHY

Fonts Throughout the Site

Garamond ATF Subhead
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight/Style Variations
Garamond ATF Subhead Regular
Garamond ATF Subhead Regular Italic
Garamond ATF Subhead Bold (weight 700)
Garamond ATF Subhead Bold (weight 700) Italic

Museo-Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight/Style Variations
Museo Sans weight: 500 (Regular)
Museo Sans weight: 500 (Regular) Italic
Museo Sans weight: 700 (Bold)
Museo Sans weight: 700 (Bold) Italic
Museo Sans weight: 300
Museo Sans weight: 300 Italic

Museo Sans weight: 900
Museo Sans weight: 900 Italic

 

Typographic Elements

All text is black except as noted. Brand colors can be applied in classes.

Certain aspects, like font-size or margins, change depending on the width of the browser (viewport). Those aspects are usually set for the base style and two “break-points” (when the change in browser width causes a change in style). The base style is the smallest width (“mobile-first” design: viewports up to 767 pixels wide). The first break-point is for some tablets and medium-width screens (viewports between 768 and 1249 pixels wide). The last break-point is for wide screens (viewports above 1250 pixels wide).

Heading 1 (only for Page Title; do not use for content)

  • Base (viewports up to 767px wide)
    • font-family: Garamond ATF Subhead/serif;
    • font-size: 36px (2.25rem);
    • margin-top: 0px;
    • margin-bottom: 12px;
  • Tablet/Medium screen (viewports from 768-1249px wide); same as above, except
    • font-size: 44px (2.75rem)
  • Wide Screen (viewports 1250px and higher); same as “Base” except
    • font-size: 52px (3.25rem);
    • margin-bottom: 16px;

Heading 2

  • Base (viewports up to 767px wide)
    • font-family: Garamond ATF Subhead/serif;
    • font-size: 30px (1.875rem);
    • margin-top: 24px;
    • margin-bottom: 12px;
  • Tablet/Medium screen (viewports from 768-1249px wide); same as above, except
    • font-size: 36px (2.25rem)
  • Wide Screen (viewports 1250px and higher); same as “Base” except
    • font-size: 44px (2.75rem);
    • margin-top: 30px;
    • margin-bottom: 16px;

Heading 3

  • Base (viewports up to 767px wide)
    • font-family: Garamond ATF Subhead/serif;
    • font-size: 24px (1.5rem);
    • margin-top: 24px;
    • margin-bottom: 12px;
    • color: Dark Blue Accent (#0E014C);
  • Tablet/Medium screen (viewports from 768-1249px wide); same as above, except
    • font-size: 30px (1.875rem)
  • Wide Screen (viewports 1250px and higher); same as “Base” except
    • font-size: 36px (2.25rem);
    • margin-top: 30px;
    • margin-bottom: 16px;

Heading 4

  • Base (viewports up to 767px wide)
    • font-family: Museo Sans/sans-serif;
    • font-size: 20px (1.25rem);
    • margin-top: 24px;
    • margin-bottom: 12px;
  • Tablet/Medium screen (viewports from 768-1249px wide); same as above, except
    • font-size: 26px (1.625rem)
  • Wide Screen (viewports 1250px and higher); same as “Base” except
    • font-size: 32px (2rem);
    • margin-top: 30px;
    • margin-bottom: 16px;
Heading 5
  • Base (viewports up to 767px wide)
    • font-family: Garamond ATF Subhead/serif;
    • font-size: 18px (1.25rem);
    • margin-top: 16px;
    • margin-bottom: 12px;
  • Tablet/Medium screen (viewports from 768-1249px wide); same as above, except
    • font-size: 24px (1.625rem)
  • Wide Screen (viewports 1250px and higher); same as “Base” except
    • font-size: 30px (2rem);
    • margin-top: 20px;
    • margin-bottom: 16px;
Heading 6
  • Base (viewports up to 767px wide)
    • font-family: Museo Sans/sans-serif;
    • font-size: 16px (1rem);
    • font-weight: 700;
    • margin-top: 16px;
    • margin-bottom: 12px;
  • Tablet/Medium screen (viewports from 768-1249px wide); same as above, except
    • font-size: 18px (1.125rem)
  • Wide Screen (viewports 1250px and higher); same as “Base” except
    • font-size: 20px (1.25rem);
    • margin-top: 20px;
    • margin-bottom: 16px;

Body copy (basic paragraph or <P> in HTML).

  • Base and Tablet/Medium (viewports up to 1024px wide)
    • font-family: Museo Sans/sans-serif;
    • font-size: 16px (1rem);
    • line-height: 1.33;
    • margin-top: 0px;
    • margin-bottom: 16px;
  • Wide Screen (viewports 1025px and higher); same as “Base” except
    • font-size: 18px (1.125rem);
    • line-height: 1.5
    • margin-top: 0px;
    • margin-bottom: 20px;

Links in body copy (e.g., St. Mary’s website)

  • All aspects as in body copy except
    • color: SMSU blue (#000C99);
    • text-decoration: underlined;

Ordered List (can choose convention, e.g., numerical, Uppercase alphabetical, Lowercase alphabetical, Roman numerals, etc.):

  1. Item 1
  2. Item 2
  3. Item 3

Unordered List (can choose convention, e.g., circle, disc, square):

  • Item 1
  • Item 2
  • Item 3

List items in both ordered and unordered lists inherit style from the body text (<P>) except

  • Base and Tablet/Medium (viewports up to 1024px wide)
    • font-size: 15px (0.9375rem);
    • line-height: 1.25;
    • margin-bottom: 8px (first level item), 0px (second level item)
  • Wide Screen (viewports 1025px and higher); same as “Base” except
    • font-size: 17px (1.0625rem);
    • line-height: 1.375
    • margin-bottom: 8px (first level item), 0px (second level item)

COLORS

Most of the color used on the website are preset style elements coded into the blocks and specific text. Some options for certain blocks give the editor color choices based on the colors below.

In rare cases, it is possible to assign color to text or elements that are not normally colored. This is only done through classes assigned within the HTML code (for example, using the WYSIWYG block).

SMSU Blue

SMSU Blue (#000C99) color box#000C99

The official blue in RGB (display screens) used in the St. Mary’s Seminary & University seal.

Can be used as background for the Quote blocks and a choice for the color stripe on internal page heroes. Also used as a number of website style elements; for example, the top border line on these Floating Card blocks.

SMSU Gold

SMSU Gold (#CC9933) color box#CC9933

The official gold in RGB (display screens) used in the St. Mary’s Seminary & University seal.

Can be used as a choice for the color stripe on internal page heroes. Also used as the color of the cross image on Banner Blocks and for CTA buttons on dark blue backgrounds.

Dark Blue Accent

SMSU Dark Blue (#0E014C) Accent color box#0E014C

A dark blue in RGB (display screens) created for the 2023 SMSU website. Background for the page footer and the homepage accordion elements. Used as background for the Banner block and a choice for the color stripe on internal page heroes. White text stands out well against it.

Burgundy Accent

SMSU Burgundy (#6C2125) Accent color box#6C2125

A burgundy (red) in RGB (display screens) created for the 2023 SMSU website. Used as background for the Video CTA block and a choice for the color stripe on internal page heroes.

Tan Accent

SMSU Tan (#F2EBE5) Accent color box#F2EBE5

A tan in RGB (display screens) created for the 2023 SMSU website. Can be used as background for the Background, Full Width. and Quote blocks as well as rows. Especially nice as the row within which Cards and Floating Cards are used.

Dark Grey Accent

SMSU Dark Grey (#1C1C1C) Body Text color box#1C1C1C

A very dark grey in RGB (display screens) created for the 2023 SMSU website. Used as color of body text.


SITE BLOCKS

The Basic WYSIWYG Block

The WYSIWYG Block is probably the most versatile block in the collection. It will likely be the most used block by content editors.

This is because the WYSIWYG block allows the editor to modify the content in the block in a number of ways, unlike the basic paragraph block which simply places text in the most basic paragraph style (not even allowing for bold [<strong>] or italic [<em>] text).

WYSIWYG blocks allow text with bold (strong) or italic (emphasis) characteristics.

Below are some possible text settings in the WYSIWYG block:

Headings (example set as h5)
Headings (example set as h6)

*Note: when using headings, keep in mind the overall semantic structure of the page (the hierarchy of page elements) Don’t use headings simply for their style. Use them because they are appropriate to the semantic structure of the content.

Ordered Lists:

  1. Sample List Item
  2. Sample List item

Unordered Lists:

  • Sample List Item
  • Sample List item

Change of text justification:

Example: Center justify

Example: Right justify

Links created in the text.

Anchors can be inserted for linking within the same page.

Tables can also be added in the WYSIWYG editor, but use them sparingly, being mindful of the mobile-friendly design that can make too-wide tables scroll off the page.

Special characters like em-dashes (—), foreign characters (ñ), or symbols like copyright (©) can be inserted.

Media can be inserted into the WYSIWYG editor, but classes may have to be applied in the HTML code to format them as desired.

Finally, the WYSIWYG environment gives the power editor, who is able to work with HTML code and CSS styles/classes, the ability to see the source code and add code such as a style class. This makes the WYSIWYG editor even more versatile.

 


 

A Basic Heading Block (set to H4)

Sample Heading: Level H4

 


 

A Basic Paragraph Block (one with a Title, Image, and Link; one with only Text)

An Optional “Title” Can Be Added to the Basic Paragraph

This is text inside the basic “Paragraph” block. The entered text is only rendered as basic body text, no lists or bold/italic formatting that would be available in a WYSIWYG block. Note that the image optional image being used in this example, though rectangular (1920×1080 pixels), renders as a square placed in the left of the text in both the wide and midscreen browser widths. in the smallest (smartphone) browser width, the image renders in a rectangular shape placed above the text.

This is a perfectly acceptable block to use for introductory paragraphs or simple body text following a Heading block.

Sample Link in a Paragraph Block

This is another paragraph block.

This is text inside the basic “Paragraph” block. The entered text is only rendered as basic body text, no lists or bold/italic formatting that would be available in a WYSIWYG block. In this example, no image was selected, nor title or link included. Only text has been entered.

This is a perfectly acceptable block to use for introductory paragraphs or simple body text following a Heading block.

 


 

A Full Width Block (in Tan, White, and Blue)

A Heading Can Be Used (Optional)

The Full Width block is a versatile element. It can have an optional heading if desired. It can use an image which is floated to the left of the text in widescreen views (viewports above 1600 pixels wide) but hidden on smaller widths. The text content editor uses a WYSIWYG environment so there are several formatting options. Finally, links can be added as a button style below the text content, but they are optional.

The Full Width block is a versatile element. It can have an optional heading if desired—in this example, the heading has been omitted. It can use an image which is floated to the left of the text in widescreen views (viewports above 1600 pixels wide) but hidden on smaller widths. The text content editor uses a WYSIWYG environment so there are several formatting options. Finally, links have been omitted in this example.

Optional Heading Again Used

The Full Width block is a versatile element. It can have an optional heading if desired. It can use an image which is floated to the left of the text in widescreen views (viewports above 1600 pixels wide) but hidden on smaller widths. The text content editor uses a WYSIWYG environment so there are several formatting options. Finally, links can be added as a button style below the text content, but they are optional.

 


 

A Background Block Containing a Paragraph Block

This is a standard WYSIWYG block inside the Background block. This Background block has a background color set to #f2ebe5. In place of a color, you can use a background image. 

This is a standard WYSIWYG block inside the Background block. This Background block is using an image background. In place of an image, you can set a background color.

 


 

Aside Container (in Dark Blue and Tan)

A Heading Set in the WYSIWYG Block

WYSIWYG container in the Aside container. Within the container, you can place any block, e.g., the WYSIWYG editor, a Multi-CTA, Full Width block, etc.

The Aside container provides the option to set the background as either blue (dark blue using white text) or tan (using black text).

In viewports above 1600 pixels wide, the Aside itself will float to the right of this content/container, flush to the right side of the page. In viewports below 1600 pixels wide, the Aside is positioned below the content of the container.

Aside Heading (Optional)

This is the content portion of the Aside itself. It uses the WYSIWYG style editor so options exist for various text elements. The Aside itself always has a blue background with white text. The link below is styled as a button.

Aside Link

A Heading Set in the WYSIWYG Block

WYSIWYG container in the Aside container. Within the container, you can place any block, e.g., the WYSIWYG editor, a Multi-CTA, Full Width block, etc.

The Aside container provides the option to set the background as either blue (dark blue using white text) or tan (using black text).

In viewports above 1600 pixels wide, the Aside itself will float to the right of this content/container, flush to the right side of the page. In viewports below 1600 pixels wide, the Aside is positioned below the content of the container.

Aside Heading (Optional)

This is the content portion of the Aside itself. It uses the WYSIWYG style editor so options exist for various text elements. The Aside itself always has a blue background with white text. The link below is styled as a button.

Aside Link

 


 

Quote Blocks (in Blue, Red, and Tan)

Content strategy is the practice of planning for the creation, publication, and governance of useful, usable content. Kristina Halvorson

Content strategy is the practice of planning for the creation, publication, and governance of useful, usable content. Kristina Halvorson

Content strategy is the practice of planning for the creation, publication, and governance of useful, usable content. Kristina Halvorson

 


 

A Row Block with Three Card Blocks Within

A Heading Can Be Set for the Row (optional)

Card 1

Use no more than four cards in the row, but three is optimal. If more cards are needed, create another row and then add cards within.

Card 2

The title, text, and link designs are preset. There is no ability to restyle them or add different types of text elements (subheadings, lists, etc.). If that capability is needed, use floating cards.

Card 3

Used only for short text. Text will truncate after 4 or 5 lines. Use a link to a page or post where you can place the full copy.

Optional Link for the Row

 


 

A Row Block with Two Floating Cards Within

A Heading Can Be Set for the Row (Optional)

Floating Card 1

Floating Cards are placed inside a row. Use a maximum of two floating cards in a row. If more are needed, add another row and place the new floating cards within.

Unlike “regular” cards, the floating cards content editor uses a WYSIWYG format, so there are more options for adding content to the floating cards.

A link can be included (optional)

Floating Card 2

Floating Cards are placed inside a row. Use a maximum of two floating cards in a row. If more are needed, add another row and place the new floating cards within.

Unlike “regular” cards, the floating cards content editor uses a WYSIWYG format, so there are more options for adding content to the floating cards.

Optional Link for the Row

 


 

A Banner Block

 


 

A Video CTA Block (Uses Either a Video or an Image)

A Heading Is Optional

This block can actually contain either a video or a single image. In this example, a video is used.  The text content editor is WYSIWYG so there are options in creating the text. A link below is also optional.

Optional Link

A Heading Is Optional

This block can actually contain either a video or a single image. In this example, an image is used.  The text content editor is WYSIWYG so there are options in creating the text. A link below is also optional.

Optional Link

 


 

A Carousel (for Image Display)

 


 

Multi-CTA Block (Full Width and Non-Full Width Options)

A Heading for the Multi-CTA (Optional)

The Multi-CTA block provides several options:

The Color Scheme can be Blue, Red (Burgundy), Tan, or White. This block is using the Tan option.

The Width can be Full-Width Style (which uses a wide image with content in an overlay box of the color selected) or Non-Full-Width Style (which uses a square image next to the content).

Heading Text is optional.

Link Buttons are optional. If used, a maximum of three (3) are allowed.

A Heading for the Multi-CTA (Optional)

The Multi-CTA block provides several options:

The Color Scheme can be Blue, Red (Burgundy), Tan, or White. This block is using the Red option.

The Width can be Full-Width Style (which uses a wide image with content in an overlay box of the color selected) or Non-Full-Width Style (which uses a square image next to the content).

Heading Text is optional.

Link Buttons are optional. If used, a maximum of three (3) are allowed.

 


 

Icon Text Block (placed within a row for side-by-side presentation)

Icon Text Block Heading

Much of the style of the Icon Text block is preset:

  • The Heading (if used) is h3.
  • Both the heading and text are presented in burgundy.
  • The link uses the standard blue link coloring.

The Icon must be an SVG graphic, loaded from the Media Library.

The entire block itself is approximately half-page width in a widescreen viewport. For that reason, a nice presentation is use two icon blocks within a row. When used that way, they will be presented side-by-side for viewports above 1600 pixels. Otherwise, they will be presented one after the other.

When used in a row, the usual row options abide:

  • a heading can be used.
  • the background color can be set to tan or white.
  • a link can be added right flush at the bottom of the row (beneath the blocks within).

The content editing environment, however, is a WYSIWYG presentation so content can be adjusted to include ordered or unordered lists (like this example), (sub)headings within the text, even additonal links.

 

Sample Link

Icon Text Block Heading

Much of the style of the Icon Text block is preset:

  • The Heading (if used) is h3.
  • Both the heading and text are presented in burgundy.
  • The link uses the standard blue link coloring.

The Icon must be an SVG graphic, loaded from the Media Library.

The entire block itself is approximately half-page width in a widescreen viewport. For that reason, a nice presentation is use two icon blocks within a row. When used that way, they will be presented side-by-side for viewports above 1600 pixels. Otherwise, they will be presented one after the other.

When used in a row, the usual row options abide:

  • a heading can be used.
  • the background color can be set to tan or white.
  • a link can be added right flush at the bottom of the row (beneath the blocks within).

The content editing environment, however, is a WYSIWYG presentation so content can be adjusted to include ordered or unordered lists (like this example), (sub)headings within the text, even additonal links.

 

Sample Link

 


 

Image Links Block (image plus icons with each link)

 


 

Video Block

This is block for easily adding a video by simply entering its URL. The video must be from either YouTube or Vimeo. Once added, the video will be presented widescreen (almost page width), but as the viewport is decreased (e.g., tablets and smartphones) the video is resized so that it still fits within the viewport.

 


 

Quick Links Block