SUPER-JSS-DEMO

click here to update theme
sjBreakpoints: {"xs":0,"sm":600,"md":900,"lg":1200,"xl":1536}

H1: Super JSS leaps

H2: Over lazy CSS colleagues

H3: No media query, thanks to TypeScript!

H4: Just xs || md || lg || xl, Yarn's got our back!

H5: Bold and bolder, Angular style!
H6: Roboto rocks in this project!
STRONG: SJSS wins with its responsive design!

P: Helvetica too, making our text look great!

SPAN: Flexing flex, for a flexible layout!

sj-primary

sj-primary
#3498DB
sj-primary-light
#5DADE2
sj-primary-dark
#1F618D
sj-primary-contrast
#FFFFFF

sj-secondary

sj-secondary
#E74C3C
sj-secondary-light
#EA6E5A
sj-secondary-dark
#AF2718
sj-secondary-contrast
#FFFFFF

sj-tertiary

sj-tertiary
#F39C12
sj-tertiary-light
#F7BC60
sj-tertiary-dark
#BA7810
sj-tertiary-contrast
#FFFFFF

sj-error

sj-error
#C0392B
sj-error-light
#D15B4A
sj-error-dark
#8D2917

sj-warning

sj-warning
#F1C40F
sj-warning-light
#F4D346
sj-warning-dark
#B7950B

sj-info

sj-info
#2980B9
sj-info-light
#4097C2
sj-info-dark
#1C5A8A

sj-success

sj-success
#27AE60
sj-success-light
#58C483
sj-success-dark
#1E7D43

sj-text-primary

sj-text-primary
sj-text-primary
sj-text-secondary
sj-text-secondary
sj-text-disabled
sj-text-disabled

sj-dark

sj-dark
#2C3E50
sj-dark-dark
#1A2836
sj-dark-light
#34495E

sj-light

sj-light
#ECF0F1
sj-light-light
#F7F9FA
sj-light-dark
#D0D3D4