A custom Boostrap 3.4 framework and Strata Three stylesheets form the interface's appearance.
The Strata
Wrap Bootstrap's containers in a Strata Three color class to apply styles for full-width layers. Full-width layers may use .s3-scored to apply an additional effect. Please refer to the S3 Class column in the Colors Table.
Basic Usage
<div class="s3-name">
<div class="container">
...
</div>
</div>
Nested Usage
<div class="s3-bg-name">
<div class="container">
...
<div class="s3-name">
...
</div>
...
</div>
</div">
Lorum Ipsum Dolor Sit Amet
By: Lady Seminole | Published: July 1, 2024 | 1:00 p.m. | Share:
Humo consequat vulputate saluto vicis nulla class. Valde suspendisse NONUMMY eleifend ne litora aliquip. Velit suscipere saepius vitae rusticus sodales. Tellus blandit pretium gravis cogo etiam. Morbi jugis ommoveo minim lenis ingenium PELLENTESQUE.
Eum ratis sagaciter nisl ymo refero sed. Fere adsum aliquam dolus interdico. Comis hendrerit inhibeo illum nobis verto. Saluto quibus os loquor nullus erat qui loquor sagaciter bene. Antehabeo reprobo ullamcorper iaceo wisi typicus damnum ea. Jus demoveo ea suscipit magna tristique dolore delenit molior.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Consectetur Adipiscing Elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This division has the added class of .s3-scored which adds a top and bottom border. When combined with adjacent divisions containing the .s3-scored class, it creates an edge effect.
Floats
Content may be floated left or right with at half, third, and fourth the width of its container. Combine either .s3-left / .alignleft or .s3-right / .alignright with .s3-half, .s3-third, or .s3-fourth / .s3-quarter to achieve the desired result. Mobile (x-small) displays may utilize .s3-full-xs to expand images to full width.
| Class | Properties |
|---|---|
.alignleft.s3-left |
Floats left with adjusted margin |
.alignright.s3-right |
Floats right with adjusted margin |
.s3-full-xs |
100% width of container for x-small display |
.s3-half |
50% width of container |
.s3-third |
33% width of container |
.s3-fourth |
25% width of container |
.s3-quarter |
25% width of container |
Spacing
| EMs | 0.133 | 0.240 | 0.320 | 0.420 | 0.550 | 0.750 | 1.000 | 1.333 | 1.777 | 2.400 | 3.200 | 4.200 | 5.500 | 7.500 | 10.000 |
| Pixels | 2 | 4 | 5 | 7 | 9 | 12 | 16 | 21 | 28 | 38 | 51 | 67 | 88 | 120 | 160 |
Padding
Strata Three padding classes are primarily used to apply space around block content (refer to Design Patterns for examples). Convenience classes are also available for removing padding.
| Class | Padding | Note |
|---|---|---|
.s3-p-1 |
0.133em | |
.s3-p-2 |
0.240em | |
.s3-p-3 |
0.320em | |
.s3-p-4 |
0.420em | |
.s3-p-5 |
0.550em | |
.s3-p-6 |
0.750em | |
.s3-p-7 |
1.000em | Equal to standard font size |
.s3-p-8 |
1.333em | |
.s3-p-9 |
1.777em | |
.s3-p-10 |
2.400em | |
.s3-p-11 |
3.200em | |
.s3-p-12 |
4.200em | |
.s3-p-13 |
5.500em | |
.s3-p-14 |
7.500em | |
.s3-p-15 |
10.000em | Largest specified padding in Strata Three |
.s3-p-0 |
0 | Removes all padding |
.s3-p-t0 |
0 | Removes top padding |
.s3-p-r0 |
0 | Removes right padding |
.s3-p-b0 |
0 | Removes bottom padding |
.s3-p-l0 |
0 | Removes left padding |
Padding classes should not be applied to Bootstrap's grid classes, e.g., .container, .row, and .col-xs-12. Padded content should be nested within the column classes.
Margins
Strata Three margin classes are primarily used to modify top and bottom space between elements. Convenience classes are also available for removing margins. Classes s3-m-x affects top and bottom margins. Classes s3-mt-x affects top margins. Classes s3-mb-x affects bottom margins.
| Class | Margin | Note |
|---|---|---|
.s3-m-1, .s3-mt-1, .s3-mb-1 |
0.133em | |
.s3-m-2, .s3-mt-2, .s3-mb-2 |
0.240em | |
.s3-m-3, .s3-mt-3, .s3-mb-3 |
0.320em | |
.s3-m-4, .s3-mt-4, .s3-mb-4 |
0.420em | |
.s3-m-5, .s3-mt-5, .s3-mb-5 |
0.550em | |
.s3-m-6, .s3-mt-6, .s3-mb-6 |
0.750em | |
.s3-m-7, .s3-mt-7, .s3-mb-7 |
1.000em | Equal to standard font size |
.s3-m-8, .s3-mt-8, .s3-mb-8 |
1.333em | Recommended for a compact .container |
.s3-m-9, .s3-mt-9, .s3-mb-9 |
1.777em | |
.s3-m-10, .s3-mt-10, .s3-mb-10 |
2.400em | Recommended default .container margin |
.s3-m-11, .s3-mt-11, .s3-mb-11 |
3.200em | |
.s3-m-12, .s3-mt-12, .s3-mb-12 |
4.200em | |
.s3-m-13, .s3-mt-13, .s3-mb-13 |
5.500em | |
.s3-m-14, .s3-mt-14, .s3-mb-14 |
7.500em | |
.s3-m-15, .s3-mt-15, .s3-mb-15 |
10.000em | Largest specified margin in Strata Three |
.s3-m-0 |
0 | Removes all margin |
.s3-m-t0 |
0 | Removes top margin |
.s3-m-r0 |
0 | Removes right margin |
.s3-m-b0 |
0 | Removes bottom margin |
.s3-m-l0 |
0 | Removes left margin |
Margin classes should not be applied to Bootstrap's column classes, e.g., .col-xs-12.
Shadows
Box Shadows
Subtle shadows may be added to block-level elements by applying the .s3-bs class. Effect is dependent upon its parent .s3-name class.
.s3-bs.s3-bs.s3-bs.s3-bs.s3-bs.s3-bsTables
| Curabitur sodales | Sed dignissim | |
|---|---|---|
| Curabitur tortor | $6,507 | $21,673 |
| Pellentesque nibh | $6,480 | $6,480 |
| Aenean quam | $4,196 | $4,196 |
| Maecenas mattis | $1,000 | $1,000 |
| Fusce ac turpis | $18,183 | $33,349 |
Standard Responsive Table
Classes applied:
.table
| Curabitur sodales | Sed dignissim | |
|---|---|---|
| Curabitur tortor | $6,507 | $21,673 |
| Pellentesque nibh | $6,480 | $6,480 |
| Aenean quam | $4,196 | $4,196 |
| Maecenas mattis | $1,000 | $1,000 |
| Fusce ac turpis | $18,183 | $33,349 |
Responsive Table
Classes applied:
div.table-responsive.table.table-condensed.table-striped
Forms
Basic Example
Inline Example
Horizontal Example
Buttons
| .btn-lg | .btn-md | .btn-sm | .btn-xs | .btn-go | .btn-go-alt .btn-full | ||
|---|---|---|---|---|---|---|---|
| .s3-gt | |||||||
| .s3-gd | |||||||
| .s3-gd1c | |||||||
| .s3-gd2c | |||||||
| .s3-gd3c | |||||||
| .s3-c | |||||||
| .s3-w | |||||||
| .s3-n2w | |||||||
| .s3-n1w | |||||||
| .s3-n | |||||||
| .s3-n2s | |||||||
| .s3-s | |||||||
| .s3-k | |||||||