Utilities

CodyFrame comes packed with a collection of utility classes.

In CodyFrame v4, you can set a custom prefix for all the utility classes:

// ↓ set a custom prefix in your style.scss
@use 'config' as * with (
  $util-prefix: 'cd-'
);

Utility Classes

1. Align Items
2. Align Content
3. Aspect Ratio
4. Backdrop-filter
5. Background
6. Border
7. Border Radius
8. Box Shadow
9. Color
10. Column Count
11. Cursor
12. Display
13. Flexbox
14. Float
15. Font Family
16. Font Size
17. Font Style
18. Font Weight
19. Gap
20. Height
21. Justify Content
22. Letter Spacing
23. Line Height
24. Margin
25. Max Height
26. Max Width
27. Min Height
28. Min Width
29. Mix-Blend-Mode
30. Object Fit
31. Opacity
32. Order
33. Overflow
34. Padding
35. Perspective
36. Pointer Events
37. Position
38. Scroll Behavior
39. SVG
40. Text Align
41. Text Decoration
42. Text Shadow
43. Text Transform
44. Timing Functions
45. Transform
46. Typography (Misc)
47. User Select
48. Vertical Align
49. Visibility
50. White Space
51. Width
52. Z-Index