Tailwind CSS VS OxyProps, Bricks Builder "Dark Mode", replacing WP Rocket with FlyingPress

Introduction

In this video, the speaker introduces a new style of video that he plans to put out more regularly on his channel. He will be going through his most recent comments on YouTube and providing his thoughts and opinions on some of the questions asked by viewers.

Going Through Recent Comments

The speaker goes through recent comments on YouTube and provides his thoughts and opinions on some of the questions asked by viewers.

Oxyprops vs Tailwind

• The speaker compares Oxyprops and Tailwind CSS frameworks.

• He has used both frameworks but prefers Oxyprops.

• He gives an example of how each framework works inside Bricks Builder.

• Riaz asks if Oxyprops is part of the speaker's stack and if he has abandoned Tailwind in favor of Oxyprops.

• The speaker thanks Riaz for leaving a comment and expresses happiness that viewers are enjoying his videos.

Using Tailwind in Bricks Builder

In this section, the speaker demonstrates how to use Tailwind in Bricks Builder and introduces Swiss Knife for Bricks as a tool that can make the process easier.

Using Tailwind in Bricks Builder

• To style an element using Tailwind in Bricks Builder, one has to apply CSS classes by exiting out of the current class and entering a new one.

• This process can be tedious when applied across multiple elements on a website or for multiple clients.

• Swiss Knife for Bricks is introduced as a tool that can make this process easier.

• After activating Swiss Knife for Bricks, multi-select and plain classes are enabled under settings.

• Multi-select allows users to select multiple elements and apply CSS classes from one text field.

Using Oxyprops vs Tailwind in Bricks Builder

In this section, the speaker discusses the differences between using Oxyprops and Tailwind in Bricks Builder.

Focusing on Oxyprops

• The speaker is currently focusing on using Oxyprops instead of Tailwind in Bricks Builder.

• The speaker believes that even with solutions like Tailwind, Oxyprops is a cleaner solution for creating a website in a page builder like Bricks.

Benefits of Swiss Knife for Bricks

• There are still benefits to using Swiss Knife for Bricks even if you're not using Tailwind.

• Being able to multi-select things and then apply CSS classes is valuable.

Rebuilding the Hero Section with Oxyprops

• To rebuild the hero section on their home page, the speaker will be using Oxyprops.

• The plugin used is called Brix props, which is exactly the same as Oxyprops but renamed based on what page builder you're using.

Steps to Rebuild Hero Section with Oxyprops

1. Start by creating a CSS class called "hero". If it already exists, add something unique to differentiate it.

2. Under style, set the background color to blue.

3. Center text by adding "text-align: center" under typography.

4. Add a basic text element called "bubble" above the heading.

5. Set its class to "hero header bubble".

6. Under style, set its background color to white.

7. Change text content as desired.

Editing CSS Classes

In this section, the speaker demonstrates how to edit CSS classes using Oxyprops. They show how to adjust the size, border radius, font weight, color and alignment of a hero header class.

Adjusting Size and Border Radius

• To adjust the size of an element in Oxyprops, select it and go to "style" then "layout".

• To adjust the border radius of an element, right-click on "border" and select "radius".

• The options presented when right-clicking are contextual based on what is being edited. For example, if editing border radius, the options will be related to that property.

Assigning Custom CSS Properties

• Oxyprops allows users to create custom CSS classes by assigning properties through right-clicking inside fields.

• Users can assign colors by right-clicking inside the color field.

• Users can assign widths using CH units or choose from preset options.

Adjusting Font Weight and Color

• To adjust font weight in Oxyprops, go to "typography" then "font weight".

• To change text color in Oxyprops, right-click on "color" and select a desired color.

Aligning Elements

• To align elements within a container in Oxyprops, select the container and go to "content", then choose an alignment option.

Setting Max Width for Images

• To set a maximum width for an image in Oxyprops, add a new CSS class with a name such as hero_header_image.

• Go to style > layout > max width.

• Choose from preset options or use CH units.

Adding Text Content

In this section, the speaker demonstrates how to add text content to a hero header class in Oxyprops. They show how to adjust font size and spacing.

Adding Text Content

• To add text content in Oxyprops, select the element where you want to add the text.

• Copy and paste the desired text into the element.

Adjusting Font Size and Spacing

• To adjust font size in Oxyprops, go to "typography" then "font size".

• To add spacing between elements in Oxyprops, select an element and go to "style", then choose a margin or padding option.

Building a Website with Oxyprops

In this section, the speaker demonstrates how to use Oxyprops to build a website. They cover topics such as choosing sizes for elements, adding rounded corners and shadows, and creating a grid layout.

Choosing Element Sizes

• The speaker recommends using fluent sizes but notes that fixed sizes can also be used.

• At smaller breakpoints, different fixed sizes can be chosen to make elements smaller.

Adding Rounded Corners

• The speaker demonstrates two options for adding rounded corners:

• Adding it directly to the CSS class of an element

• Creating a separate utility class called "rounded" and applying it to any element that needs rounded corners.

• The speaker notes that they eventually stopped using the "rounded" utility class and just applied rounded corners directly to images on their website.

Adding Shadows

• To add a shadow effect, the speaker uses the box-shadow property in Oxyprops.

• They set the x-offset and y-offset values to zero, blur radius to 100px, and color to a light brand color.

• The speaker scales down the shadow effect by setting its size to 20.

Creating Grid Layouts

• The speaker demonstrates how to create a grid layout using Oxyprops.

• They create a container element with child elements inside it.

• Each child element is given its own class name so that it can be styled separately from other elements in the grid.

• The speaker shows how padding, row gap, text alignment, and background colors can be added using Oxyprops.

Adding Classes to Website Services Item

In this section, the speaker demonstrates how to add a class to all website services items.

Adding Class to Website Services Item

• Add class to website service item by clicking into it and entering the desired class name.

• Repeat the process for all other website services items.

Creating Rounded Corners with Brix Builder

In this section, the speaker shows how to create rounded corners using Brix Builder.

Creating Rounded Corners

• Set border property in Brix Builder.

• Ensure that rounded corners are applied on all sides.

• Use duplicate icon in newest version of Brix Builder to quickly duplicate elements.

• To make elements into a grid, create a utility class or write specific classes for each element type.

Creating Grid Layout with Fluid Gap

In this section, the speaker demonstrates how to create a grid layout with fluid gap using Brix Builder.

Creating Grid Layout

• Create utility class or specific classes for each element type.

• Set display property in content tab of Brix Builder.

• Set number of columns for desktop and mobile devices.

• Add fluid gap by right-clicking on Gap and setting size as fluid of three.

Editing Classes in Brix Builder

In this section, the speaker shows how easy it is to edit classes in Brix Builder.

Editing Classes

• Edit classes by clicking onto them and choosing from available options.

• Apply oxyprop styles by right-clicking on properties and selecting from available options.

Using Brix Props for Dark Mode

In this section, the speaker explains how to use Brix Props for dark mode.

Using Brix Props

• Install oxyprops and toggle between light and dark modes.

• Edit classes to change specific styles for each mode.

Changing Box Shadow in Brix Builder

In this section, the speaker demonstrates how to change box shadow in Brix Builder.

Changing Box Shadow

• Click on class and go to style tab.

• Open box shadow tab and make desired changes.

Understanding Dark Mode in OxiProps

In this section, the speaker explains how to customize dark mode in OxiProps and how the framework works.

Customizing Dark Mode

• The top two elements change between light and dark mode, while others don't.

• To make a surface color consistent between light and dark modes, select it as a surface 4 color.

• To change an element's color for dark mode only, create a CSS rule that targets HTML with "color scheme equals dark."

Using Root Feature and Custom Properties

• Use the root feature to replace the word "root" with the CSS class at runtime.

• Use custom properties from the OxiProps CSS framework by starting with VAR and selecting a color.

Testing Dark Mode

• Click on the up arrow to test how your website looks in dark mode.

• A fail-safe is to choose elements that don't change their values between light and dark modes.

Understanding Dark Mode and Brand Hover Color

In this section, the speaker explains how accent color changes in dark mode and how brand hover color can change its value between light and dark mode.

Accent Color Changes in Dark Mode

• The accent color changes when it switches to dark mode.

• Changing the accent color to brand hover color will change its value between light and dark mode.

Insight on Flying Press Plugin

In this section, the speaker talks about his experience with Flying Press plugin and why he chose it over WP Rocket.

Experience with Flying Press Plugin

• The creator of Flying Press solved every issue that the speaker was having with WP Rocket.

• Clearing cache is easier with Flying Press than WP Rocket.

• Remove unused CSS feature works faster with Flying Press than WP Rocket.

• Positive experiences from other users in the Facebook group led him to purchase the plugin.

• The creator's involvement and activity in developing the plugin convinced him to use it.

Using Text and Images for YouTube Posts

In this section, the speaker talks about posting directly to his YouTube channel using text and images.

Posting Directly to YouTube Channel

• The speaker posts things throughout the week that are valuable but don't require a separate video.

• He recently posted about how he sped up his Brix Builder website by leaving WP Rocket for Flying Press.

Introduction to Creator of Flying Press Plugin

In this section, the speaker introduces G Joe, creator of Flying Press plugin, and expresses gratitude for making such a simple yet effective plugin.

Introduction to G Joe

• The creator of Flying Press is G Joe.

• The speaker loves the plugin because it just works out of the box.

• Every issue he had with WP Rocket was solved by Flying Press.

Comparison Between WP Rocket and Flying Press

In this section, the speaker compares WP Rocket and Flying Press plugins.

Comparison Between Plugins

• Clearing cache is easier with Flying Press than WP Rocket.

• Remove unused CSS feature works faster with Flying Press than WP Rocket.

• Positive experiences from other users in the Facebook group led him to purchase the plugin.

• The creator's involvement and activity in developing the plugin convinced him to use it.

Benefits of Using Flying CDN

In this section, the speaker talks about using Flying CDN along with Flying Press plugin.

Benefits of Using Flying CDN

• Cost-effective alternative to BunnyCDN at $3 per 100 gigabytes.

• Can be activated under your account inside a flying press after purchasing the plugin for $60 a year.

Five Essential WordPress Plugins

In this section, the speaker talks about five essential WordPress plugins that every website needs to have.

Five Essential WordPress Plugins

• The five essential plugins are:

• Flying Press

• Vacation CRM

• Funnel Kit Automations

• Funnel Kit

• Brix Builder

Using Bunny CDN and Bunny Stream

In this section, the speaker discusses why he chose to use Bunny CDN and Bunny Stream for his website.

Reasons for using Bunny CDN

• The speaker wanted more control over where his data was being pushed to and how much bandwidth he was using.

• He likes the detailed stats that he can get from Bunny CDN directly, such as the amount of data downloaded through the CDN and the case hit rate.

• He appreciates being able to see all the locations around the world that his data is getting stored in.

Reasons for using Bunny Stream

• The speaker uses Bunny Stream to upload videos that he embeds in his blog posts.

• He likes getting more data from Bunny Stream and finds it convenient since he is already logging in there.

Saving Form Submissions with Brix Builder

In this section, the speaker discusses concerns about not being able to save form submissions to a database when using Brix Builder.

Concerns about not saving form submissions

• The speaker acknowledges that not saving form submissions to a database could be problematic if an email contact notification fails or something else goes wrong.

• He notes that many users have requested this feature on the Brix idea board, but it is not currently being worked on.

Why Use Gutenberg Instead of Bricks Builder for Contact Page?

In this section, the speaker explains why he prefers to use Gutenberg instead of Bricks Builder for his contact page.

Using Gutenberg for Content

• The speaker prefers to write most of the content inside of Gutenberg.

• He likes to start writing a page and focus on the content in one column.

• Most pages on his website are just one column because he is writing so much content inside of Gutenberg.

Consistency Across Pages

• The speaker has custom blocks that he built using Bricks Builder, such as pros and cons lists.

• When he uses these custom blocks in Gutenberg, it keeps his content across pages looking consistent and matching all his blog posts.

Designing Pages

• When designing using Bricks Builder, the speaker tends to over-design the page.

• He finds that sometimes a page doesn't need to be designed; it just needs to be simple like his contact page.

• Most pages on his website are using Gutenberg because he is comfortable with it.

Using Gutenberg for Pages

In this section, the speaker explains why they are using Gutenberg for their pages and how it benefits their business.

Benefits of Using Gutenberg

• The speaker uses Gutenberg because it allows them to create custom blocks specific to their business.

• They also use it for other pages besides blog posts.

• The blocks in Gutenberg make it easy to create visually appealing pages.

Building a Form with Brix Builder

In this section, the speaker explains why they used Brix Builder to build a form on their contact page.

Reasoning Behind Using Brix Builder

• The speaker chose Brix Builder because of its excellent form builder.

• This allowed them to easily create a functional and visually appealing form on their contact page.

Feedback Requested

In this section, the speaker requests feedback from viewers about the usefulness of the video and potential improvements.

Request for Feedback

• The speaker asks viewers to leave feedback in the comments below.

• They may consider splitting this video into separate videos based on feedback received.

Conclusion

In this section, the speaker concludes the video and thanks viewers for watching.

Final Thoughts

• The speaker hopes that viewers found the content useful.

• They thank viewers for watching and invite them to check out future videos.