This is a subheading that complements the main heading.
``` -------------------------------- ### Webflow REM Calculation Example Source: https://developers.webflow.com/flowkit/v2.0.0/getting-started/units Webflow allows for direct REM-based mathematical calculations within its input fields. This example shows how to input a division to achieve a REM value, such as converting pixels to REM. ```Webflow 64/16REM ``` -------------------------------- ### Heading Styles with Variables Source: https://developers.webflow.com/flowkit/v2.0.0/variables/typography Illustrates how heading tags and classes utilize variables for consistent styling across different breakpoints. Includes an example for `heading_h1`. ```CSS /* Heading Styles */ .heading_h1, h1 { font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); margin-bottom: var(--h1-margin-bottom); } /* Example for responsive variables */ @media (min-width: 768px) { .heading_h1, h1 { font-size: var(--h1-font-size-md); } } ``` -------------------------------- ### Text Color Utility Classes Source: https://developers.webflow.com/flowkit/v2.0.0/variables/typography Provides examples of utility classes for modifying text colors in FlowKit. ```CSS /* Text Color Modifiers */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-danger { color: var(--color-danger); } ``` -------------------------------- ### T-Shirt Sizing Scale Examples Source: https://developers.webflow.com/flowkit/v2.0.0/getting-started/intro FlowKit utilizes a t-shirt sizing scale (xxsmall to xxlarge) for consistent naming of size-related classes. This scale applies to various properties including spacing, borders, text, icons, and layout. ```HTML...
```
--------------------------------
### FlowKit CSS Framework v2 Grid System Classes
Source: https://developers.webflow.com/flowkit/v2.0.0/changelog
This snippet outlines the basic grid classes and responsive column modifiers introduced in FlowKit v2. These classes enable the creation of flexible and responsive grid layouts.
```CSS
.grid
.grid-1-col
.grid-2-col
.grid-3-col
.grid-4-col
.grid-5-col
.grid-6-col
.grid-7-col
.grid-8-col
.grid-9-col
.grid-10-col
.grid-11-col
.grid-12-col
/* Responsive modifiers */
.tablet-grid-1-col
.mobile-l-grid-2-col
.mobile-grid-3-col
```
--------------------------------
### Height and Min-Height Control with FlowKit
Source: https://developers.webflow.com/flowkit/v2.0.0/reference/utilities
Manages element height and minimum height behavior across various breakpoints, including viewport-based units.
```CSS
/* Desktop */
.height_100percent { height: 100%; }
.height_100dvh { height: 100dvh; }
.min-height_100percent { min-height: 100%; }
.min-height_100dvh { min-height: 100dvh; }
.height_50vh { height: 50vh; }
.height_100vh { height: 100vh; }
/* Tablet */
.height_auto_tablet { height: auto; }
.min-height_auto_tablet { min-height: auto; }
```
--------------------------------
### FlowKit Spacing Variables (Size)
Source: https://developers.webflow.com/flowkit/v2.0.0/foundation/spacing
Defines foundational REM-based spacing variables for margins, paddings, and gaps. The 'x' denotes a multiplier of the base unit (1rem = 16px), ensuring consistent rhythm and layout behavior.
```CSS
--spacing-0_25x: 0.25rem;
--spacing-0_5x: 0.5rem;
--spacing-0_75x: 0.75rem;
--spacing-1x: 1rem;
--spacing-1_25x: 1.25rem;
--spacing-1_5x: 1.5rem;
--spacing-1_75x: 1.75rem;
--spacing-2x: 2rem;
--spacing-3x: 3rem;
--spacing-4x: 4rem;
--spacing-5x: 5rem;
--spacing-6x: 6rem;
--spacing-7x: 7rem;
--spacing-8x: 8rem;
```
--------------------------------
### FlowKit CSS Variables Overview
Source: https://developers.webflow.com/flowkit/v2.0.0/variables/overview
Flowkit Framework utilizes variables to ensure consistent, scalable, and manageable design styling across Webflow sites. These variables act as design tokens, defining core values for colors, spacing, and typography, which are then reused in classes for efficient site-wide updates.
```CSS
/* Flowkit Framework uses variables to ensure consistent, scalable, and easily manageable design styling across Webflow sites. Variables in Flowkit are like design tokens: they define core values (such as colors, spacing, or typography) and are reused throughout classes. */
/* If something needs to change — like a brand color or font size — you only update it in one place. */
/* Each variable has a meaningful, descriptive name following a structured naming convention. */
/* Categories:
Colors | The foundational palette used across the system
Sizes | Spacing, radius, sizing scales, and layout metrics
Typography | Font families, base font sizes, and type styles */
```
--------------------------------
### FlowKit Button Class Naming
Source: https://developers.webflow.com/flowkit/v2.0.0/components/buttons
Demonstrates the class naming convention for FlowKit buttons, including base class, size, type, and surface modifiers for various background contexts.
```CSS
/* Base button */
.button {
/* ... */
}
/* Size modifiers */
.button.is-small {
/* ... */
}
.button.is-large {
/* ... */
}
/* Type modifiers */
.button.is-secondary {
/* ... */
}
/* Surface modifiers: On Accent */
.button.on-accent-primary {
/* ... */
}
.button.is-secondary.on-accent-primary {
/* ... */
}
.button.on-accent-secondary {
/* ... */
}
.button.is-secondary.on-accent-secondary {
/* ... */
}
.button.on-accent-tertiary {
/* ... */
}
.button.is-secondary.on-accent-tertiary {
/* ... */
}
/* Surface modifiers: On Inverse */
.button.on-inverse {
/* ... */
}
.button.is-secondary.on-inverse {
/* ... */
}
```
--------------------------------
### FlowKit Container Width Variations
Source: https://developers.webflow.com/flowkit/v2.0.0/structure/page-structure
Illustrates the 'container' class for centering content and its combo classes for adjusting the maximum width of the content area.
```CSS
.container { /* Default max width */ }
.container.is-full-width { /* Stretches full width */ }
.container.is-large { /* Larger max width */ }
.container.is-small { /* Smaller max width */ }
.padding-horizontal_none { /* Removes side padding */ }
```
--------------------------------
### Accordion Component Structure
Source: https://developers.webflow.com/flowkit/v2.0.0/components/accordion
Defines the essential HTML structure and CSS classes for the Accordion component. It includes the main wrapper, the toggle button, and the collapsible content area, designed for use with Webflow's dropdown.
```html
Accordion content goes here...