Colour Selection
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus purus id feugiat facilisis. Donec nec iaculis magna.
H1 Heading small
H2 Heading small
H3 Heading small
H4 Heading small
H5 Heading small
H6 Heading small
Normal Text: Lorem ipsum dolor sit amet, 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.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| Val 1 | Val 2 | Val 3 |
| Val 1 | Val 2 | Val 3 |
| Foot 1 | Foot 2 | Foot 3 |
Buttons
Dialog element (small amount of Javascript)
The dialog will expand to accomodate the content. Use the "full-width" class to force a full width dialog.
https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
Details/Summary elements (accordion style) (no Javascript)
Multiple sections may be open at the same time. Javascript is required to enforce only one being open at a time. They may also be nested.
https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element
Automated Status: Operational
Velocity: 12m/s
Direction: North
Use a "Close" button if the section is taller than the normal screen heightFile Name & Extension: Pillar Magazine.pdf, Extension Hidden
Sub Pop-Opens
Sub Pop-Open 1
Sub pop-open 1
Sub Pop-Open 2
Sub pop-open 2
Sub Pop-Open 3
Sub pop-open 3
Form elements
Form with a specified form width (400px)
Pop-up Menu - button launched
Button(s) on Right
Fields with Datasets
Data Table
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Total 1 | Total 2 | Total 3 | Total 4 |
Auto-resizing Columns
Accessible Print
Sed ac ultricies sapien, eu bibendum felis. Pellentesque mattis ut mi eu dapibus. Donec malesuada elit est, vel feugiat dolor aliquet in.
An Easy Path
Aliquam a ex facilisis, pulvinar tellus et, vehicula felis. Proin ac lacus tellus. Aliquam interdum maximus pellentesque. Nunc at cursus justo.
Buttons List
Buttons Grid
Cards Grid
Card 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Alert Boxes
Yea, it worked!
Whoa! Something went wrong.
Uh, it may have worked. (I'm not sure)
Something happened somewhere, I think.
Badges
Responsive Image
Rounded Images
|
|
|
Spinners
Source: https://loading.io/css/ (more styles available)
Add desired spinner style to /includes/site.css. Curent site.css file has Ring spinner.
| Ring |
Roller Balls |
Ring of Balls |
Spinner Bars |
|---|
Button with Spinner
(uses the color of the button's text)Tabbed Pages
Description
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elementum neque, ac pharetra tortor. Vivamus ac vehicula augue. Curabitur pretium commodo nisi id pellentesque.
Statistics
Sed ut leo in turpis efficitur convallis at bibendum erat. Curabitur in egestas ex. Etiam efficitur sagittis molestie. Praesent condimentum elementum ipsum sit amet euismod. Sed vestibulum, leo ac iaculis fringilla, felis nulla placerat turpis, eu aliquam elit risus vel tellus.
Reviews
Donec non nunc ac augue ornare aliquam. Aenean sed volutpat arcu. Sed molestie lacus placerat nisl gravida condimentum.
Contact
1 Nullam nec condimentum lacus. Integer dapibus velit nec ipsum varius, a pharetra arcu imperdiet. Donec pretium libero a tincidunt vulputate. Mauris feugiat tempor lectus, quis placerat mi congue sit amet.
Popouts
Stuff on the left
Lorem ipsum dolor sit amet, 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.
Stuff on the right
Lorem ipsum dolor sit amet, 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.
Stuff at the top
Lorem ipsum dolor sit amet, 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.
Stuff at the botton
Lorem ipsum dolor sit amet, 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.
Carousel
Margin and Padding Utility Classes
The classes are named using the format {property}{sides}-{size} - similar to Bootstrap 5, but do not have breakpoints.
Where property is one of:
m - set margin
p - set padding
Where sides is one of:
blank - set a margin or padding on all 4 sides of the element, ex. m-3, p-3
x - set both *-left and *-right, ex. mx-3, px-3
y - set both *-top and *-bottom, ex. my-3, py-3
t - set *-top, ex. mt-3, pt-3
b - set *-bottom, ex. mb-3, pb-3
s - (start) set *-left in LTR, *-right in RTL, ex. ms-3, ps-3
l - left, set *-left, regardless of text direction, ex. ml-3, pl-3
e - (end) set *-right in LTR, *-left in RTL, ex. me-3, pe-3
r - right, set *-right, regardless of text direction, ex. mr-3, pr-3
Size as set in /includes/site.css is one of:
0 - eliminate the margin or padding by setting it to 0
1 - .25rem
2 - .5rem
3 - 1rem
4 - 1.5rem
5 - 2rem (Bootstrap = 3rem)
6 - 3rem (6 not in Bootstrap)
auto - set the margin to auto (not applicable to padding)
Text Alignment and Vertical Alignment Classes
Similar to Bootstrap 5, but do not have breakpoints.
.text-left { text-align: left; }
.text-start { text-align: start; } /* works for LTR or RTL */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-end { text-align: end; } /* works for LTR or RTL */
.text-justify { text-align: justify; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
