Customization
Spacing & Layout
KitFront starter kits include spacing variables inside assets/css/core.css. These values control section padding and default content spacing across the website.
Section Spacing
Section spacing controls the top and bottom padding of .kf-section. KitFront uses different values for large desktop, desktop, tablet, and mobile screens.
Large Desktop
--kf-section-padding-large-desktop
100px
Desktop
--kf-section-padding-desktop
80px
Tablet
--kf-section-padding-tablet
65px
Mobile
--kf-section-padding-mobile
50px
Content Spacing
Content spacing controls the default margin below headings and paragraphs.
Heading Margin
--kf-heading-margin-bottom
24px
Paragraph Margin
--kf-paragraph-margin-bottom
24px
Using Your Own Spacing
You can update these values inside assets/css/core.css to match your project spacing. Once updated, all KitFront sections using these variables will follow the new spacing system.
If your project needs extra spacing utilities, you can add new variables or helper classes in the same file.