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 Clamp
24. Line Height
25. List Style
26. Margin
27. Max Height
28. Max Width
29. Min Height
30. Min Width
31. Mix-Blend-Mode
32. Object Fit
33. Opacity
34. Order
35. Overflow
36. Padding
37. Perspective
38. Pointer Events
39. Position
40. Scroll Behavior
41. SVG
42. Text Align
43. Text Decoration
44. Text Indent
45. Text Shadow
46. Text Transform
47. Timing Functions
48. Transform
49. Typography (Misc)
50. User Select
51. Vertical Align
52. Visibility
53. White Space
54. Width
55. Z-Index