Jump to:
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Columns
Inspired by 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.
...
<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.
...
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.
...
<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-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.
...
<div class="sights-callout-box">...</div>
Will produce:
...
Remove external link icon
<div class="sights-no-icon">
...
<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.
...
<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>
...