Oxygen 6 Website Design Blueprint + CSS Framework [Videos 44:51]

Hey everyone, Fabrizio here and welcome to my official Oxygen 6 web design blueprint and CSS framework video (tutorials). After some time working on this, I think I’ve got it close to ‘perfect’, and so I’m really excited to be sharing this with you.

Before we start, there’s a few things I want to mention.

1. This is still a work in progress. I will update these videos as and when I have optimized my own Oxygen blueprint website.
2. The resources (JSON files, global settings JSON, and CSS framework snippet) at this time is only available to Van Marciano Pro members. However, you can still copy and paste the CSS below into your Oxygen stylesheet or favorite code snippet plugin. In the coming weeks, when we release our community platform, the entire resources will be available to community members.
3. My Oxygen 6 Mastery Course is in early development phase. I’ll have more news on this later in the Spring.

🔔 Oxygen Builder Course Offer: My Oxygen Builder Classic 4.9 Legacy Course is available here. When you purchase this course, you will automatically receive full access to my upcoming Oxygen 6 Mastery Course later this year. Once the course is released, however, this offer will end and the new course will be available separately.

OK, so what are we going to do over the course of these videos?

We’re going to build a complete website template with Oxygen 6 and the WPCodeBox plugin. The reason I use WPCodeBox is so I can add my variables and design tokens in a systemic way. Similar to how we created the Bricks Builder Blueprint website. What we can then do is replicate the entire site to use in future projects.

The videos

As always, you can follow along with this tutorial using the videos below, or read through the post notes. I recommend doing both.

Let’s start with understanding what a blueprint website is, although I’ve covered this many times before.

In short, A WordPress design blueprint is a site with pre-installed plugins, themes (sometimes), pre-configured settings, a CSS framework complete with color palettes, custom variables, utility classes or design tokens, and folders which can help you, as a designer, to keep your WordPress projects structured, organized and consistent.

Here’s a breakdown of the process we will take to complete the blueprint website –

1. Create a new WordPress project on LocalWP
2. Install Oxygen Builder 6 and add-on plugins
3. Install and configure other recommended plugins (See the list below)
4. Setting up WordPress pages, menu, CSS framework and more
5. Set up variables and utility classes inside Oxygen
6. Set up Variables and Selectors in Oxygen 6
7. Setting up global settings in Oxygen 6
8. Testing the blueprint and framework
9. Access the Oxygen 6 Asset Pack ZIP File (VMPro Members)
10. Saving the blueprint website in LocalWP and how to use the blueprint in future projects (Coming soon)

So now let’s dive in, step-by-step.

🔔 As a reminder, at the time of recording this tutorial, we are using the release candidate of Oxygen 6.0.0. and so this tutorial will help you create a fully functional blueprint for use in future Oxygen projects! As another reminder: VMPro Members can download the entire blueprint asset zip file below this post which includes JSON files for variables and selectors, global settings, and the CSS framework.

1. Create a new WordPress project in LocalWP (Part 1)

First thing we need to do is create a WordPress website on our local computer. We’ll use the LocalWP desktop app for this. If you don’t already have this on your computer, go ahead and download it from the LocalWP website and get it set up, it’s completely free.

If you don’t wish to use LocalWP, you can also create this blueprint on a domain through your web host provider.

Next, we’ll need to create the website. Click on the + icon to add a new site. Watch the video below to complete the steps.

Once you have the site set up, log into the WordPress dashboard using your new credentials to get started.

2. Install Oxygen Builder 6 and add-on plugins (Part 2)

Next we’re going to install Oxygen 6 and the Breakdance Elements for Oxygen Add-On plugin. If you don’t have these then go grab them here. I’ll assume you already have Oxygen 6, so go ahead and install both the builder and add-ons.

Watch Part 2 in step 3 to continue this tutorial.

3. Install and configure other WordPress plugins

The next step is to install some additional plugins that will help save time, and to improve your workflow and design consistency when working with Oxygen. Here are the plugins I personally use and recommend –

1. WPCodeBox or a similar code snippet plugin.
2. All-in-one WP Migration (For creating a copy of your blueprint website to install in a new project)
3. FileBird Lite (For managing media in WordPress)
4. SEO plugin of your choice.
5. ACF or MetaBox for adding custom post types and custom fields.

You may add any other plugins you think may be useful. Also, you can take some extra time to configure the settings of those plugins.

4. Setting up WordPress, pages, menu, and the CSS framework (Part 3)

In this step, we’re going to set up the pages for our blueprint website, plus create some default menus (header and footer), as well as set up our code snippet (CSS Framework) using WPCodeBox. This step will save you a lot of time when it comes to using your blueprint to create a new project.

🔔 Reminder: At this time, only paid members are able to access the asset zip file containing the JSON files for variables and utility selectors. You can still copy and paste the CSS framework snippet below if you wish. If you’re interested in joining our membership site, please check out our pricing page. Or you can subscribe to our email list here to get notified when we run special promotions.

/* ==CSS==
@name           Page Builder General
@version        1.1.0
@description    Oxygen 6 Framework
@author         Fabrizio Van Marciano
@updated        February 2026
==/CSS== */

/* CUSTOM VARIABLES TO BE ADDED TO VARIABLES FEATURE IN OXYGEN */

:root {
    /* MAIN PALETTE + TRANSPARENCY SHADES */
    --primary: rgb(252, 122, 102);
    --secondary: rgb(164, 79, 66);
    --tertiary: rgb(58, 58, 58);

    --primary-5: rgb(252, 122, 102, 0.05);
    --primary-10: rgba(252, 122, 102, 0.1);
    --primary-20: rgba(252, 122, 102, 0.2);
    --primary-30: rgba(252, 122, 102, 0.3);
    --primary-40: rgba(252, 122, 102, 0.4);
    --primary-50: rgba(252, 122, 102, 0.5);
    --primary-60: rgba(252, 122, 102, 0.6);
    --primary-70: rgba(252, 122, 102, 0.7);
    --primary-80: rgba(252, 122, 102, 0.8);
    --primary-90: rgba(252, 122, 102, 0.9);

    --secondary-5: rgba(164, 79, 66, 0.05);
    --secondary-10: rgba(164, 79, 66, 0.1);
    --secondary-20: rgba(164, 79, 66, 0.2);
    --secondary-30: rgba(164, 79, 66, 0.3);
    --secondary-40: rgba(164, 79, 66, 0.4);
    --secondary-50: rgba(164, 79, 66, 0.5);
    --secondary-60: rgba(164, 79, 66, 0.6);
    --secondary-70: rgba(164, 79, 66, 0.7);
    --secondary-80: rgba(164, 79, 66, 0.8);
    --secondary-90: rgba(164, 79, 66, 0.9);

    --bg-dark: rgb(0, 0, 0);
    --bg-dark-5: rgba(0, 0, 0, 0.05);
    --bg-dark-10: rgba(0, 0, 0, 0.1);
    --bg-dark-20: rgba(0, 0, 0, 0.2);
    --bg-dark-30: rgba(0, 0, 0, 0.3);
    --bg-dark-40: rgba(0, 0, 0, 0.4);
    --bg-dark-50: rgba(0, 0, 0, 0.5);
    --bg-dark-60: rgba(0, 0, 0, 0.6);
    --bg-dark-70: rgba(0, 0, 0, 0.7);
    --bg-dark-80: rgba(0, 0, 0, 0.8);
    --bg-dark-90: rgba(0, 0, 0, 0.9);

    --bg-light: rgb(0255, 255, 255);
    --bg-light-5: rgba(255, 255, 255, 0.05);
    --bg-light-10: rgba(255, 255, 255, 0.1);
    --bg-light-20: rgba(255, 255, 255, 0.2);
    --bg-light-30: rgba(255, 255, 255, 0.3);
    --bg-light-40: rgba(255, 255, 255, 0.4);
    --bg-light-50: rgba(255, 255, 255, 0.5);
    --bg-light-60: rgba(255, 255, 255, 0.6);
    --bg-light-70: rgba(255, 255, 255, 0.7);
    --bg-light-80: rgba(255, 255, 255, 0.8);
    --bg-light-90: rgba(255, 255, 255, 0.9);

    /* TYPOGRAPHY SHADES */
    --text-body-dark: rgb(25, 25, 25);
    --text-body-light: rgb(165, 165, 165);
    --text-heading-dark: rgb(25, 25, 25);
    --text-heading-light: rgb(241, 241, 241);
    --text-bold: rgb(255, 255, 255);
    --text-button: rgb(255, 255, 255);
    --text-link: rgb(255, 255, 255);

    /* FLUID SPACING */
    --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
    --space-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);

    /* FLUID GAPS */
    --gap-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
    --gap-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
    --gap-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
    --gap-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
    --gap-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
    --gap-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
    --gap-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);

    /* FLUID TYPOGRAPHY */
    --text-xs: clamp(1.26rem, calc(-0.23vw + 1.34rem), 1.01rem);
    --text-s: clamp(1.42rem, calc(-0.07vw + 1.44rem), 1.35rem);
    --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
    --text-l: clamp(1.8rem, calc(0.55vw + 1.62rem), 2.4rem);
    --text-xl: clamp(2.02rem, calc(1.09vw + 1.68rem), 3.2rem);
    --text-2xl: clamp(2.28rem, calc(1.84vw + 1.69rem), 4.26rem);
    --text-3xl: clamp(2.56rem, calc(2.89vw + 1.64rem), 5.68rem);
    --text-4xl: clamp(2.88rem, calc(4.34vw + 1.49rem), 7.58rem);

    /* FLUID BORDER RADIUS + BORDER */
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem);
    --radius-m: clamp(0.8rem, calc(-0.19vw + 1.06rem), 1rem);
    --radius-l: clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem);
    --radius-fl: clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem);
    --border-5: 5px;
    --border-10: 10px;
    --border-15: 15px;

    /* SCREEN CONTAINER WIDTHS */
    --min-screen-width: 320px;
    --max-screen-width: 1100px;
}

/* CUSTOM UTILITY CLASSES TO BE ADDED TO THE SELECTORS MANAGER FEATURE IN OXYGEN */

.row {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
}
.column {
    display: grid;
    grid-auto-flow: row;
    justify-items: start;
    align-content: start;
}
.columns-2 {
    /* used */
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.columns-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.columns-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.columns-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.columns-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.columns-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.columns-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
.columns-min-5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}
.columns-min-10 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.columns-min-20 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.columns-min-30 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}
.columns-min-40 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
}
.columns-min-50 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}
.columns-min-60 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
}
.columns-min-70 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70rem, 1fr));
}
@media (max-width: 1400px) {
    .column--on-xl {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-xl {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-xl {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-xl {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-xl {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-xl {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-xl {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 992px) {
    .column--on-l {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-l {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-l {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-l {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-l {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-l {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-l {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 768px) {
    .column--on-m {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-m {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-m {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-m {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-m {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-m {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-m {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 480px) {
    .column--on-s {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-s {
        grid-template-columns: 1fr;
        grid-auto-flow: column;
    }
    .columns-2--on-s {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-s {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-s {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-s {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-s {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* SPACING + DEMENSIONS
--------*/
.width--100 {
    width: 100% !important;
}
.width--90 {
    width: 90% !important;
}
.width--80 {
    width: 80% !important;
}
.width--70 {
    width: 70% !important;
}
.width--60 {
    width: 60% !important;
}
.width--50 {
    width: 50% !important;
}
.width--40 {
    width: 40% !important;
}
.width--30 {
    width: 30% !important;
}
.width--20 {
    width: 20% !important;
}
.width--10 {
    width: 10% !important;
}
.vh--80 {
    height: 80vh !important;
}
.vh--100 {
    height: 100vh !important;
}

@media only screen and (max-width: 768px) {
    .width--90,
    .width--80,
    .width--70,
    .width--60,
    .width--50,
    .width--40,
    .width--30,
    .width--20,
    .width--10 {
        width: 100% !important;
    }
}
@media only screen and (max-width: 768px) {
    .vh--80,
    .vh--100 {
        height: auto !important;
    }
}

5. Setting up variables and selectors inside of Oxygen (Part 4)

The next step in setting up our Oxygen Blueprint website is configuring some basic settings in WordPress, adding all the variables and selectors inside Oxygen, and more.

Again, doing these things upfront saves time when starting new projects, and it also allows us to import variables and selectors directly into the builder. Let’s go!

VMPro Members Below this post, you’ll find downloadable asset file which includes the JSON files that you can import into your Oxygen blueprint site (variables and utility classes). I recommend doing this on a staging or local WordPress environment.

7. Default Global Settings (Part 5)

OK, now that we have everything set up, the final step is to review the global settings in Oxygen and make a few more pre-configurations. Don’t worry about getting this perfect, each project is unique, and you can always tweak these settings later.

Here’s what we’ll look at –

1. Buttons (Primary + secondary)
2. Typography → Advanced → Body + Headings
3. Containers → Sections → Container width + paddings

8. Testing the blueprint framework

OK, so we’ve created our blueprint website with Oxygen, let’s just test a few things out –

1. Created fluid responsive headings with variables
2. Create bg-color utility classes, and a few others too 🙂

Continue this step by watching the short video below –

9. Accessing the asset ZIP file

This step is only available to Van Marciano Pro paid members and email subscribers. In the near future, we will include this complete tutorial with the resources to our Clique community members. If you are a paid member and logged into this site, you should see the download link for the resources asset Zip file, directly below this paragraph. The pack includes –

Summary

It’s a wrap! At least for the time being. As I said, this post is a work in progress, so check back soon for updates. Or subscribe to me email newsletter here to get notified when we update and publish new content on Van Marciano Pro.