Custom CSS can be used in your Kademi site to manage font sizes across break points, create custom classes, manage custom fonts and more. Before using custom CSS in your Kademi site, you should have a basic understanding of CSS.

Below are some video tutorials showing how to update the LESS file to use custom CSS. Please note, customising the LESS file will override the theme variables in your account, including the default fonts and colours.

Managing font sizes

Watch the video below to see how to update your LESS file to use different font sizes based on screen size. 

The CSS used in the video is below.

@media (max-width: @screen-xs-max) {    
    h1 {font-size: 35px;}
    h2 {font-size: 250px;}
    h3 {font-size: 16px;}
    .lead {font-size: 12px;}
    p {font-size: 10px;}
}

@media (min-width: @screen-sm-min) {    
    h1 {font-size: 40px;}
    h2 {font-size: 30px;}
    h3 {font-size: 20px;}
    .lead {font-size: 13px;}
    p {font-size: 12px;}   
}

@media (min-width: @screen-md-min) {    
    h1 {font-size: 50px;}
    h2 {font-size: 40px;}
    h3 {font-size: 30px;}
    .lead {font-size: 15px;}
    p {font-size: 14px;}
}

@media (min-width: @screen-lg-min) {    
    h1 {font-size: 60px;}
    h2 {font-size: 50px;}
    h3 {font-size: 40px;}
    .lead {font-size: 20px;}
    p {font-size: 15px;}
}

Creating custom classes

Applying variable padding and margins to containers can make a world of difference to the layout of a webpage at each screen break point. 

The LESS file can be updated with custom classes like the below:

.margintoplg {margin-top:100px;}
.marginbottomlg {margin-bottom:100px;}

When both of these classes are applied to a container, it will give the container a top and bottom margin of 100 pixels.

These types of classes then need to be applied to each Media Query, and adjusted so they scale accordingly.

Watch the video below to see how to update your LESS file to use custom classes.

The CSS used in the video is below.

@media (max-width: @screen-xs-max) {    
    h1 {font-size: 35px;}
    h2 {font-size: 250px;}
    h3 {font-size: 16px;}
    .lead {font-size: 12px;}
    p {font-size: 10px;}    
    
    .margintoplg {margin-top:10px;}
    .marginbottomlg {margin-bottom:10px;}
    
    .margintopsm {margin-top:10px;}
    .marginbottomsm {margin-bottom:10px;}
    
    .paddingtoplg {padding-top:10px;}
    .paddingbottomlg {padding-bottom:10px;}
}

@media (min-width: @screen-sm-min) {    
    h1 {font-size: 40px;}
    h2 {font-size: 30px;}
    h3 {font-size: 20px;}
    .lead {font-size: 13px;}
    p {font-size: 12px;}
    
    .margintoplg {margin-top:30px;}
    .marginbottomlg {margin-bottom:30px;}
    
    .margintopsm {margin-top:20px;}
    .marginbottomsm {margin-bottom:20px;}
    
    .paddingtoplg {padding-top:30px;}
    .paddingbottomlg {padding-bottom:30px;}    
}

@media (min-width: @screen-md-min) {    
    h1 {font-size: 50px;}
    h2 {font-size: 40px;}
    h3 {font-size: 30px;}
    .lead {font-size: 15px;}
    p {font-size: 14px;}    
    
    .margintoplg {margin-top:50px;}
    .marginbottomlg {margin-bottom:50px;}
    
    .margintopsm {margin-top:30px;}
    .marginbottomsm {margin-bottom:30px;}
    
    .paddingtoplg {padding-top:50px;}
    .paddingbottomlg {padding-bottom:50px;}
}

@media (min-width: @screen-lg-min) {    
    h1 {font-size: 60px;}
    h2 {font-size: 50px;}
    h3 {font-size: 40px;}
    .lead {font-size: 20px;}
    p {font-size: 15px;}
        
    .margintoplg {margin-top:100px;}
    .marginbottomlg {margin-bottom:100px;}
    
    .margintopsm {margin-top:50px;}
    .marginbottomsm {margin-bottom:50px;}
    
    .paddingtoplg {padding-top:100px;}
    .paddingbottomlg {padding-bottom:100px;}
}