Foundations
Spacing
KitFront starter kits include ready spacing for containers, sections, content, and reusable section headings. Choose the tab that matches your starter.
Container
Bootstrap container values are defined in assets/css/core.css and applied to .container and Bootstrap container variants.
| Item | Token / Class | Value |
|---|---|---|
| Max Width | --kf-container-width | 1600px |
| Large Screens | width | calc(100% - 140px) |
| Tablet | width | calc(100% - 80px) |
| Mobile | width | calc(100% - 16px) |
Section spacing
.kf-section uses responsive top and bottom padding variables.
| Item | Token / Class | Value |
|---|---|---|
| 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
Default heading and paragraph spacing comes from global margin variables.
| Item | Token / Class | Value |
|---|---|---|
| Heading Margin | --kf-heading-margin-bottom | 24px |
| Paragraph Margin | --kf-paragraph-margin-bottom | 24px |
Section heading layout
.kf-section-heading controls common section title spacing, alignment, and split heading layout.
| Item | Token / Class | Value |
|---|---|---|
| Max Width | max-width | 800px |
| Inner Gap | gap | 12px |
| Default Margin | margin-bottom | 80px |
| Less Margin | margin-bottom | 50px |
| Tablet Margin | margin-bottom | 60px |
| Mobile Margin | margin-bottom | 40px |
| Split Gap | gap | 80px |
| Split Description Offset | padding-top | 36px |
Customize spacing
Update the spacing variables and layout rules in assets/css/core.css. Sections using KitFront classes will follow those values.
Container
Tailwind container rules are defined in src/assets/css/input.css inside @layer utilities.
| Item | Token / Class | Value |
|---|---|---|
| Max Width | max-w-kf-container-width | 1600px |
| Large Screens | xl:w-[calc(100%-140px)] | calc(100% - 140px) |
| Tablet | md:w-[calc(100%-80px)] | calc(100% - 80px) |
| Mobile | w-[calc(100%-16px)] | calc(100% - 16px) |
| Inner Padding | px-3 | 12px |
Section spacing
.kf-section uses responsive Tailwind padding utilities.
| Item | Token / Class | Value |
|---|---|---|
| Mobile | py-12.5 | 50px |
| Tablet | md:py-16.25 | 65px |
| Desktop | lg:py-20 | 80px |
| Large Desktop | 2xl:py-25 | 100px |
Content spacing
Default heading and paragraph spacing is set in the base typography layer.
| Item | Token / Class | Value |
|---|---|---|
| Heading Margin | mb-6 | 24px |
| Paragraph Margin | mb-6 | 24px |
Section heading layout
.kf-section-heading uses Tailwind utilities for common heading width, spacing, and split layout.
| Item | Token / Class | Value |
|---|---|---|
| Max Width | max-w-200 | 800px |
| Inner Gap | gap-3 | 12px |
| Default Margin | mb-10 md:mb-15 lg:mb-20 | 40px / 60px / 80px |
| Less Margin | mb-10 md:mb-12.5 | 40px / 50px |
| Split Gap | gap-3 lg:gap-20 | 12px / 80px |
| Split Description Offset | lg:pt-9 | 36px |
Customize spacing
Update the utilities in src/assets/css/input.css, then run npm run watch to regenerate output.css.