Tutorials
A collection of video-tutorials to help you get started with the CodyHouse UI Framework.
🔍 On this page:
- Getting Started
- Base Concepts
- Colors
- Grid
- Icons
- Spacing
- Typography
- Visibility
- Utility Classes
- Global Editors
Getting Started #
🎥 Download CodyFrame on Github
🕐 3:00
🎥 Import CodyFrame as npm module
🕐 5:10
🎥 Understanding 'Base' and 'Custom' style
🕐 2:39
🎥 How to integrate the Components
🕐 7:24
🎥 Understanding the Gulp configuration file
🕐 11:36
Base concepts #
🎥 Working with Em units
🕐 11:34
🎥 BEM and utility classes
🕐 8:03
🎥 Progressive enhancement (.js class)
🕐 1:55
Colors #
🎥 Colors overview
🏗 coming soon
🎥 Color themes
🏗 coming soon
Grid #
🎥 CodyFrame Grid System
🕐 25:03
🎥 Row-gap and column-gap utility classes
🕐 3:51
Icons #
🎥 How to include your icons
🏗 coming soon
Spacing #
🎥 Responsive spacing
🏗 coming soon
Typography #
🎥 Responsive typography
🏗 coming soon
🎥 The .text-component class
🏗 coming soon
🎥 Editing text size
🏗 coming soon
Visibility #
🎥 CodyFrame visibility classes
🕐 9:16
Utility Classes #
🎥 Flexbox
🏗 coming soon
🎥 Background
🏗 coming soon
🎥 Border
🏗 coming soon
🎥 Color
🏗 coming soon
🎥 Margin/Padding
🏗 coming soon
🎥 Media wrapper
🏗 coming soon
Global Editors #
🎥 How to use the Global Editors
🕐 2:18
🎥 Colors Editor
🕐 8:06
🎥 Typography Editor - Set basic typography rules
🕐 5:25
🎥 Typography Editor - Set a typography scale
🕐 6:06
🎥 Typography Editor - Line-height crop
🕐 5:17
🎥 Spacing Editor
🕐 7:24
🎥 Buttons Editor
🕐 13:33
🎥 Forms Editor
🕐 6:08
🎥 Shared-Styles Editor
🕐 5:46
A video is being shown