Customize elements without writing CSS
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:
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:
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>