Styles
Theme development involves crafting a unified visual identity for websites or applications. Key components like mixins streamline CSS, functions enable dynamic styling, and color palettes maintain consistency. Elements such as buttons and forms are styled to ensure a cohesive user interface. By mastering these elements, developers create compelling themes that enhance user experience and brand recognition.
Mixins
flow($gap)
The flow() mixin manages the spacing between elements, allowing for consistent and visually appealing layouts. By specifying the $gap parameter, developers can control the distance between elements, ensuring optimal readability and alignment across different screen sizes.
.element {
@include flow(20px); // Set the gap between elements to 20 pixels
}
font-size($font-size-map)
With the font-size() mixin, developers can easily manage typography styles throughout their projects. By utilizing the $font-size-map parameter, font sizes can be adjusted dynamically based on predefined values, ensuring readability and consistency across various text elements.
.element {
@include font-size($font-size-body-small); // Apply small font size to the element
}
full-width-container()
The full-width-container() mixin enables the creation of container elements that span the entire width of their parent container. This ensures that content fills the available space, creating a visually engaging layout without the need for manual adjustments or additional styling.
.element {
@include full-width-container;
}
font-icon($content)
The font-icon() mixin simplifies the integration of icon fonts into web projects. By providing the $content parameter, developers can easily insert custom icons directly into their HTML using CSS, eliminating the need for external image files and enhancing scalability and performance.
.element::before {
@include font-icon("\e001"); // Apply 'fa-cat-space' Font Awesome icon
}
hideScrollbar()
The hideScrollbar() mixin allows developers to hide scrollbars within specific elements, providing a cleaner and more streamlined user interface. By removing scrollbars while still enabling scrolling functionality, developers can create a more polished and immersive user experience, particularly for interactive components or full-screen layouts.
.element {
@include hideScrollbar(); // Hide scrollbar within the element
}
Functions
escape-svg($string)
The escape-svg() function is designed to escape characters within SVG strings, ensuring compatibility and security in web applications. If the provided string contains SVG data, it iterates through each character, replacing potentially harmful characters with their encoded equivalents. This function is particularly useful for sanitizing SVG content to prevent cross-site scripting (XSS) attacks.
$svgString: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">...</svg>';
$escapedSvg: escape-svg($svgString);
rem-calc($values)
The rem-calc() function converts pixel values to their equivalent rem units, based on a specified base value. It accepts either a single pixel value or a list of pixel values and returns the corresponding rem values. This function simplifies the process of creating responsive designs by allowing developers to work with consistent units across different screen sizes.
$remValues: rem-calc(16); // 1rem
$remValues: rem-calc(16 24 32); // 1rem 1.5rem 2rem
str-replace($string, $search, $replace: '')
The str-replace() function replaces all occurrences of a specified substring within a string with another substring. It iterates through the string, replacing instances of the search string with the specified replacement string. This function is useful for manipulating strings, such as modifying URLs or sanitizing user input.
$newString: str-replace("Hello, World!", "World", "Universe"); // 'Hello, Universe!'
$newString: str-replace("https://example.com", "https", "http"); // http://example.com
Colors
Color Variables
| Variable Name | Description | Default Value |
|---|---|---|
--cs-color-action-primary | Primary action color | #36af84 |
--cs-color-action-primary-hover | Hover state color for primary actions | #73c1a6 |
--cs-color-action-secondary | Secondary action color | #222222 |
--cs-color-action-secondary-hover | Hover state color for secondary actions | #555555 |
--cs-color-action-link | Color for hyperlinks | #4096ef |
--cs-color-action-link-hover | Hover state color for hyperlinks | #3a87d7 |
--cs-color-action-hotspot | Color for clickable elements | #ffffff |
--cs-color-action-hotspot-hover | Hover state color for clickable elements | #ffffff66 |
--cs-color-border-dark | Dark border color | #999999 |
--cs-color-border-medium | Medium border color | #bebfc2 |
--cs-color-border-light | Light border color | #eaeaea |
--cs-color-background-primary | Primary background color | #ffffff |
--cs-color-background-secondary | Secondary background color | #f7fafd |
--cs-color-background-inverted | Inverted background color | #222222 |
--cs-color-background-muted | Muted background color | #999999 |
--cs-color-background-disabled | Disabled background color | #eaeaea |
--cs-color-background-tooltip | Background color for tooltips | #000000d9 |
--cs-color-background-backdrop | Background color for backdrop elements | #00000059 |
--cs-color-background-error | Background color for error messages | #fae9ed |
--cs-color-background-info | Background color for informational messages | #ecf5fe |
--cs-color-background-success | Background color for success messages | #ebf7f3 |
--cs-color-background-warning | Background color for warning messages | #fef2eb |
--cs-color-text-headings | Color for headings | #222222 |
--cs-color-text-body | Color for body text | #555555 |
--cs-color-text-muted | Muted text color | #999999 |
--cs-color-text-placeholder | Color for placeholder text | #bebfc2 |
--cs-color-text-white | White text color | #ffffff |
--cs-color-functional-default | Default functional color | #f7fafd |
--cs-color-functional-error | Error functional color | #c81a47 |
--cs-color-functional-info | Info functional color | #4096ef |
--cs-color-functional-success | Success functional color | #7aaf36 |
--cs-color-functional-warning | Warning functional color | #ef7733 |
--cs-color-functional-info-overlay | Info overlay functional color | #4096ef33 |
--cs-color-functional-error-hover | Hover state color for error messages | #c81a47cc |
--cs-color-functional-info-hover | Hover state color for info messages | #4096efcc |
--cs-color-functional-success-hover | Hover state color for success messages | #7aaf36cc |
--cs-color-functional-warning-hover | Hover state color for warning messages | #ef7733cc |
--cs-color-functional-review | Review functional color | #ecc030 |
--cs-color-functional-new | New functional color | #36af84 |
--cs-color-functional-sale | Sale functional color | #1c5f71 |
--cs-color-functional-bestseller | Bestseller functional color | #ef7733 |
--cs-color-functional-our-choice | Our choice functional color | #0d2f66 |
Shadow Variables
| Variable Name | Description | Default Value |
|---|---|---|
--cs-shadow-default | Default box shadow | 0 5px 10px 0 rgb(0 0 0 / 15%) |
--cs-shadow-down-small | Small downward shadow | 0 2px 3px 0 rgb(0 0 0 / 5%) |
--cs-shadow-up-small | Small upward shadow | 0 -2px 3px 0 rgb(0 0 0 / 5%) |
--cs-shadow-slide-in | Shadow for sliding-in effects | -10px 0 20px 0 rgb(0 0 0 / 15%) |
--cs-shadow-focus-primary | Focus shadow for primary actions | 0 0 4px 0 var(--cs-color-action-primary) |
--cs-shadow-focus-secondary | Focus shadow for secondary actions | 0 0 4px 0 var(--cs-color-action-secondary) |
--cs-shadow-focus-link | Focus shadow for hyperlinks | 0 0 4px 0 var(--cs-color-action-link) |
Spacing Variables
| Variable Name | Default Value |
|---|---|
--cs-spacing-00 | 1px |
--cs-spacing-01 | 2px |
--cs-spacing-02 | 3px |
--cs-spacing-03 | 4px |
--cs-spacing-04 | 5px |
--cs-spacing-05 | 10px |
--cs-spacing-06 | 15px |
--cs-spacing-07 | 20px |
--cs-spacing-08 | 30px |
--cs-spacing-09 | 40px |
--cs-spacing-10 | 50px |
--cs-spacing-11 | 60px |
--cs-spacing-12 | 75px |
--cs-spacing-13 | 100px |
If the spacing size you need does not exist in this list, you can use a static value by utilizing rem-calc.
.element {
padding: rem-calc(35); // 35px padding
margin: var(--cs-spacing-05); // 10px margin
}