CSS Demo test style class

main.css + auto.css (theme-name.css)

Theme test:

top:

var(--brand)
var(--brand2)
var(--red)
var(--red2)
var(--orange)
var(--orange2)
var(--yellow)
var(--yellow2)
var(--green)
var(--green2)
var(--blue)
var(--blue2)
var(--indigo)
var(--indigo2)
var(--violet)
var(--violet2)
var(--c)
var(--c2)
var(--c3)
var(--c4)
var(--bg)
var(--l)
var(--l2)
var(--l3)
var(--l4)
var(--d)
var(--d2)
var(--d3)
var(--d4)

h1 Text

.h1 Text

h2 Text

.h2 Text

h3 Text

.h3 Text

h4 Text

.h4 Text
h5 Text
.h5 Text
h6 Text
.h6 Text
.xxxLarge Text text Text text Text text .xxLarge Text text Text text Text text .xLarge Text text Text text Text text .larger Text text Text text Text text .larger Text text Text text Text text .large Text text Text text Text text .medim Text text Text text Text text .unset Text text Text text Text text .small Text text Text text Text text .smaller Text text Text text Text text .xSmall Text text Text text Text text .xxSmall Text text Text text Text text font-size - CSS: Cascading Style Sheets | MDN
text algin:
.tLeft Text text Text
.tCenter Text text Text
.tRight Text text Text
links links links .brand

Text text Text text Text text Text text Text text Text text mark tag .highlight Text text .highlight2
pre Text text Text text Text text 
			test
Text text Text text Text text
.pre Text text Text text Text text test Text text Text text Text text

Test colors:

no class .brand .brand2 .red .red2 .orange .orange2 .yellow .yellow2 .green .green2 .blue .blue2 .indigo .indigo2 .violet .violet2
no class .brand .brand2 .red .red2 .orange .orange2 .yellow .yellow2 .green .green2 .blue .blue2 .indigo .indigo2 .violet .violet2
class: Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
.light Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
.light2 Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
.light3 Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
.light4 Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum .op Lorem Ipsum .op2
.post .bgList .borderList
.postFooter:
.postTagList .left .brand .tag .light .border2 .brand tag tag tag tag tag tag .postTime
.post .bgList .borderList
.postFooter:
.postTagList .left .brand .tag .light .border2 .brand tag tag tag tag tag tag .postTime

wrapper:

.wrapper
.wrapper2
.wrapper3
.wrapper4
.wrapperTv
.wrapperL

Padding, margin:

.padding
.padding2
.padding3
.paddingList
.padding2List
.padding3List
.margin
.margin2
.margin3
.marginList
.margin2List
.margin3List

Border:

.border
.border2
.border3
.border4
.shadow
.shadow2
.borderRadius
.borderRadius2
.borderRadius3
.borderRadius4
.borderList
.borderList
.borderList
.border2List
.border2List
.border2List
.border3List
.border3List
.border3List
.border4List
.border4List
.border4List

tag list

.tagList
.border .tag .light .red .border2 .tag .light .red tag tag tag tag tag tag tag tag tag tag tag .tag .highlight .tag .highlight2 tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag tag
download link

Center

.block .tCenter - text center
.center with div as wrapper
.center2 with div as wrapper
.center3 with div as wrapper
.center4 with div as wrapper
.block
.flex
.inline
.inlineBlock
.inlineFlex

Content

.content - full height page
.contentCenter - full height page, content in the center
An example of a page structure: navigation .content .wrapper (content: h1 text text text) footer navigation h1 .contentCenter .wrapper (content: text text text) footer