Interface

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-bs

Tables

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

Bootstrap 3.4 form examples:

Basic Example

Example block-level help text here.

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

Breadcrumbs

Pagination