Advanced CSS Class Styling Framework

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:

a three column layout. column a is the smallest, b is a little larger, and c is the largest

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:

a 12 column layout, each column is equal width

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:

layout with three columns and three rows

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:

examples of layout using the 5 margin utility classes

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:

examples of a layout using the 5 padding utility classes

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):

Two column layout on a desktop screen. The columns are side by side.

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:

A two column layout, the left-most column appears vertically centered next to the larger right column.

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>

Panels with the various colors, showing the text and link contrast.

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:

a callout box with a teal background applied

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.

an example of the media object layout

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