In this tutorial, we'll cover how to create a super minimal CSS framework to use on your WordPress website with Oxygen.
We'll start by creating a Hero layout in Oxygen and assign some classes to the elements using Emmet.
Next, we'll use the Stylesheets Editor to set up Hot Reload and Lock Stylesheets in Oxygen. This will allow us to work on our Stylesheets while Oxygen is open in another tab. After this is complete, we'll add classes and selectors to our stylesheet to create the basis of our framework.
We'll continue to expand upon the framework by adding additional classes, a CSS Grid class, a transition class, a few button classes, some CSS variables, and Oxygen's Global Colors in our stylesheet.
Finally, we'll use the classes from our framework with Emmet to build a two-column layout. By creating our frameworks and classes ahead of time, the content added with Emmet will already be formatted, and we'll only need to make some minor tweaks to get everything working as expected.
You can see some existing frameworks, including several Oxygen-compatible ones, below:
Video Chapters:
Additional Resources:
