How can I further customize my UMBC Sites website with advanced CSS class styling?

Jump to:

Columns

Inspired by bootstrap columns.

It uses a 12-column layout.

The built-in columns are fairly simple, but more complex layouts can be achieved by customizing your column widths & nesting columns.

Example:

^{<div class="sights-row">     <div class="sights-col-3">Content A</div>     <div class="sights-col-4">Content B</div>     <div class="sights-col-5">Content C</div> </div>}

Would achieve a layout like this:

Open

As long as the numbers in a row add up to 12, any combination is fine.

For example:

^{<div class="sights-row"> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> <div class="sights-col-1">...</div> </div>}

Will produce:

Open

To make something approximating a table layout, you can use multiple rows.

For example:

^{<div class="sights-row"> <div class="sights-col-2">...</div> <div class="sights-col-5">...</div> <div class="sights-col-5">...</div> </div> <div class="sights-row"> <div class="sights-col-2">...</div> <div class="sights-col-5">...</div> <div class="sights-col-5">...</div> </div> <div class="sights-row"> <div class="sights-col-2">...</div> <div class="sights-col-5">...</div> <div class="sights-col-5">...</div> </div>}

Will produce:

Margin and Padding Utilities

Mix and match these. You can go from 1-5 for each.

Margin

Margin applies to the outside of an element.

For example:

<div class="sights-m-1">sights-m-1-content</div> — 0.5rem (8px) margin on all sides

<div class="sights-m-2">sights-m-2-content</div> — 1rem (16px) margin on all sides

<div class="sights-m-3">sights-m-3-content</div> — 1.5rem (24px) margin on all sides

<div class="sights-m-4">sights-m-4-content</div> — 2rem (32px) margin on all sides

<div class="sights-m-5">sights-m-5-content</div> — 2.5rem (40px) margin on all sides

Will produce:

Margin on particular sides

You can also use the same syntax to apply margin to just one side of the element.

For example:

<div class="sights-mt-1">...</div> — 0.5rem (8px) margin on top

<div class="sights-mr-1">...</div> — 0.5rem (8px) margin on right

<div class="sights-mb-1">...</div> — 0.5rem (8px) margin on bottom

<div class="sights-ml-1">...</div> — 0.5rem (8px) margin on left

You can increase the space using the same scale as the all-sides margins, with a number 1-5.

Padding

Padding applies to the inside of an element.

For example:

<div class="sights-p-1">...</div> — 0.5rem (8px) padding on all sides

<div class="sights-p-2">...</div> — 1rem (16px) padding on all sides

<div class="sights-p-3">...</div> — 1.5rem (24px) padding on all sides

<div class="sights-p-4">...</div> — 2rem (32px) padding on all sides

<div class="sights-p-5">...</div> — 2.5rem (40px) padding on all sides

Will produce:

Padding on particular sides

Same as the margin, you can apply padding to a particular side, using a number from 1-5.

<div class="sights-pt-1">...</div> — 0.5rem (8px) padding on top

<div class="sights-pr-1">...</div> — 0.5rem (8px) padding on right

<div class="sights-pb-1">...</div> — 0.5rem (8px) padding on bottom

<div class="sights-pl-1">...</div> — 0.5rem (8px) padding on left

Responsive Columns

When applied to the columns or the media object, the column or media object will stack the contents of the columns on top of each other, when on a small sized screen. This is applied to the columns & the media object by default.

For example:

^{<div class="sights-row sights-responsive"> <div class="sights-col-6 sights-p-1"> Column #1 </div> <div class="sights-col-6 sights-p-1"> Column #2 </div> </div>}

Will produce, on a large screen (desktop):

Small screen (mobile phone):

Callout Box

Just a simple box. Defaults to a gray background. Best used with the padding classes and the background color classes.

For example:

<div class="sights-callout-box">...</div>

Will produce:

Remove external link icon

<div class="sights-no-icon">

  <a href="https://www.umbc.edu" target="_blank>...</a>

</div>

- OR -

<a class="sights-no-icon" href="https://www.umbc.edu" target="_blank>...</a>

This is an override for when you have a link that is set to open in a new window. It can be applied to any containing element (a <div> would work) or the <a> tag itself.

For example:

<a href="https://www.umbc.edu" target="_blank" rel="noopener">UMBC</a>

<a class="sights-no-icon" href="https://www.umbc.edu" target="_blank" rel="noopener">UMBC</a>

Will produce:

Vertical Centering

This is for the columns & media object.

Adding this class to the outermost <div class="sights-row"> will cause all the items inside to be vertically centered.

For example:

^{<div class="sights-row sights-responsive sights-vertical-center"> <div class="sights-col-6 sights-p-1"> Column #1 </div> <div class="sights-col-6 sights-p-1"> <div class="sights-callout-box sights-p-4"> Our UMBC community is committed to helping you achieve excellence as a student and beyond. Whether breaking boundaries in the classroom and the lab, or stretching your limits on stage or the playing field, Retrievers are in it #UMBCTogether. </div> </div> </div>}

Will produce:

Background Colors

1-5, getting darker as it goes. The text color and link color will automatically be selected to be color contrast compliant.

For example:

^{<div class="sights-bg-teal-1">...</div> <div class="sights-bg-teal-2">...</div> <div class="sights-bg-teal-3">...</div> <div class="sights-bg-teal-4">...</div>
<div class="sights-bg-gold-1">...</div> <div class="sights-bg-gold-2">...</div> <div class="sights-bg-gold-3">...</div> <div class="sights-bg-gold-4">...</div>
<div class="sights-bg-red-1">...</div> <div class="sights-bg-red-2">...</div> <div class="sights-bg-red-3">...</div> <div class="sights-bg-red-4">...</div>
<div class="sights-bg-gray-1">...</div> <div class="sights-bg-gray-2">...</div> <div class="sights-bg-gray-3">...</div> <div class="sights-bg-gray-4">...</div>}

This is primarily meant to be used with the callout boxes.

For example:

^{<div class="sights-callout-box sights-p-5 sights-bg-teal-2">...</div>}

Will produce:

Media object

Similar to a two-column layout, but ultimately designed for an image + text. The image can be any width, and the text column will take up the remaining room.

^{<div class="sights-media-object"> <div class="sights-media-wrapper"> Media goes here </div> <div class="sights-media-body"> Media body </div> </div>}