Tutorial: Building A Super Minimal CSS Framework With Oxygen

Join Elijah in this video tutorial as he covers how to create a super minimal CSS framework for your WordPress website with Oxygen.

You’ll learn to use Oxygen’s Stylesheets Editor to create, edit, and sustain a customizable CSS framework that expands alongside your design. While making the framework, you’ll learn how to develop and utilize CSS grids, transitions, CSS variables, buttons, and Oxygen’s Global Colors in your Stylesheets.

You’ll also discover how to use Emmet to create Oxygen elements that use classes from our minimal CSS framework automatically to your design to increase workflow efficiency.

Here are some existing frameworks, including several Oxygen-compatible ones:

• Various Types of CSS Frameworks: https://github.com/troxler/awesome-css-frameworks.
• Oxygen-compatible CSS Frameworks:
  • AutomaticCSS: https://automaticcss.com/.
  • Editocss: https://editocss.com/.
  • OxyBlock: https://oxyblock.xyz/.
  • OxyMade: https://oxymade.com/framework/.
  • OxyNinja: https://oxyninja.com/core.
  • OxyProps: https://oxyprops.com/.
  • Winden: https://dplugins.com/products/winden/.
  • WPExplorers: https://wpexplorers.com/wpexplorers-css-framework/.

Video Chapters: 

• 00:00 Introduction
• 03:13 Creating the first layout
• 06:00 Framework preparations
• 06:44 Building the framework with Stylesheets
• 11:42 Using and growing the framework
• 17:37 Adding a CSS grid
• 20:13 Implementing transition and button classes
• 23:09 Using Oxygen’s Global Colors in Stylesheets
• 24:06 Designing a layout in Oxygen using the framework and Emmet
• 28:33 Final thoughts

Additional Resources: 

• Smooth Shadows: https://shadows.brumm.af/.
• CSS Grids: https://css-tricks.com/snippets/css/complete-guide-grid/.
• CSS Transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions.
• CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties.