CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Shared Styles

The 📁 base/_shared-styles.scss file contains CSS Variables storing style rules that apply to multiple components.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

Radius Variables #

Variable Description
--radius-sm Equal to half the border radius base size.
--radius-md Equal to the border radius base size.
--radius-lg Equal to twice the border radius base size.

You can use these CSS variables to set the border-radius of your elements.

To modify the border radius base size, you can change the value of the --radius variable inside the 📁 custom-style/_shared-styles.scss file (default value is 0.25em). Changing the value of the --radius variable will automatically update the values of the --radius-{size} variables.

Here's an example of how to use a radius variable:

.component {
  border-radius: var(--radius-sm);
}

Box Shadow Variables #

Variable Description
--shadow-xs Used to create a lower depth effect.
--shadow-sm Used to create a low depth effect.
--shadow-md Used to create a medium depth effect.
--shadow-lg Used to create a high depth effect.
--shadow-xl Used to create a higher depth effect.

Here's an example of how to use a shadow variable:

.component {
  box-shadow: var(--shadow-md);
}

Timing Function Variables #

Variable Description
--bounce Used to create a bounce animation.
--ease-in-out Used to create an ease-in-out animation.
--ease-in Used to create an ease-in animation.
--ease-out Used to create an ease-out animation.

You can use this CSS Variables to set the timing-function property for a CSS Animation/Transition.

Here's an example of how to use a timing function variable:

.component {
  transition: transform 0.5s var(--ease-in-out);
}

Use the pen below to test the easing options:

 

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us