Ver 1.0 - 03 02 2019
colors
h1 heading
h1.clr-1
h1.clr-2
h1.clr-3
hr
bkg-1
bkg-2
bkg-2
div.bkg-1
.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.
div.bkg-2
.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.
div.bkg-3
.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.
div.bkg-1.ptrn
.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.
div.bkg-2.ptrn
.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.
div.bkg-3.ptrn
.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.
Typography
p Lorem ipsum dolor sit amet, EM consectetur STRONG adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.
Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)Steve Jobs
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.
p.lead headFusce dictum elit leo, non convallis felis placerat eu. In placerat ex at imperdiet ullamcorper.
p Lorem ipsum dolor sit amet, EM consectetur STRONG adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.
.light p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.
.light blockquote Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)Steve Jobs
.light p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.
.light p.lead headFusce dictum elit leo, non convallis felis placerat eu. In placerat ex at imperdiet ullamcorper.
h1, .h1 Heading
h2, .h2 Heading
h3, .h3 Heading
h4, .h4 Heading
h5, .h5 Heading
h6, .h6 Heading
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-2
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Heading .head-3
Lists
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ul li
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ul.lead
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- .light ul li
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- .light ul.lead
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ol li
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ol.lead
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- .light ol li
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- .light ol.lead
- Replenish Muscles
- Anti-Oxidants(Anti-Aging)
- Good Source of Fiber
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ol.num-list
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ol.lead.num-list
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ol.lead.num-list
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.
- ol.lead.num-list
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
- Curabitur id fringilla diam, eget finibus magna
Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.
Buttons
Fields & CF7 Forms
Your message was sent successfully. Thanks.
Validation errors occurred. Please confirm the fields and submit it again.
Your message was sent successfully. Thanks.
Validation errors occurred. Please confirm the fields and submit it again.
Icons Using Font Awesome
Pseudo Icons Using Font Awesome
- Login
- TPS Reports
Helpers
Spacing Helpers
Grid Content Width
Standard Max Width 1440px
.gcw
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.
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.
100% Width
.gcw-fluid
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.
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.
Max Width 1200px @ Large Only Screen, Max Width 1440px @ Extra Large Screen
.gcw-l
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.
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.
Max Width 1000px
.gcw-m
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.
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.
Max Width 800px
.gcw-s
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.
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.
Margin Removers
No Margin Removal. Last elements margin creates padding effect.
no class
PARAGRAPH Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PARAGRAPH Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
PARAGRAPH Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Container last inner element removal
.smb0
PARAGRAPH Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PARAGRAPH Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
PARAGRAPH Has no bottom margin Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Removing margin of any elemnt. Add to desired elelemnt
.mb0
PARAGRAPH Has no bottom margin Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PARAGRAPH Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
PARAGRAPH Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section Padding Helpers
Padding Basic
General container padding for quick spacing. Add to parent element
Padding Horizontal
.sph
Padding Vertical
.spv
Padding Top
.spt
Padding Bottom
.spb
Padding All
.spv .sph
Padding rim
When items need a little rim padding. Add to container element
Padding Horizontal
.sph-rim
Padding Vertical
.spv-rim
Padding Top
.spt-rim
Padding Bottom
.spb-rim
Padding All
.spv-rim .sph-rim
Padding Feature
When something needs to fee extra special. Add to container element
Padding Horizontal
.sph-feat
Padding Vertical
.spv-feat
Padding Top
.spt-feat
Padding Bottom
.spb-feat
Padding All
.spv-feat .sph-feat
Image Helper
Image Cover
Basic Imag no helpers
no class
Quickly set PICTURE tag as cover. Container has set height
.img-cover -> picture -> img
Quickly set IMG tag as cover. Container has set height
.img-cover.picture-cover -> img
Overlay Effects
Overlay over image
.img-cover.relavite -> .box-over
Overlay over image padding example
.img-cover.relavite -> .box-over.spv.sph -> .h100
Overlay made with setting PICTURE as absolute. Height is defined by the childs padding
Overlay made with setting PICTURE as absolute. Height is defined by the childs padding