Tutorial - Template for the future

Tutorials are probably a good way to learn about o-props. This templates includes the base components so I can create tutorials for you in the future.

Get ready to…

Learn about o-props CSS framework - Try all o-props feaetures in the browser
Create you own cutom CSS using the most modern tools - Create your custom elements using o-props

Prerequisites

You will need an existing WordPress weebsite with either Bricks or Oxygen installed, and o-props lates version installed and activated..

Test your knowledge

Adding o-props to my WordPress site…
1. Requires a lot of code to implement
2. Gives you out-of-the box styling for all your WordPress elements
3. Does not work with Oxygen
Which is not a benefit of o-props?
1. Sending a lot of JavaScript to the browser for client-side rendering
2. Supporting by default all user preferences like color scheme, prefers reduced motion, prefers reduced data, etc.
3. Giving you access to all the latest CSS features
The o-props framework…
1. Requires me to learn a new CSS syntax
2. Is not ready for production sites
3. Includes fallback behavior for browsers that do not yet fully support most modern CSS features

Builder Tabs are also available

This is how to perform a task in Bricks, and in Oxygen:

bricks
oxygen

Do this in Bricks

And puzzles

Try it yourself - Create a Card component

Create a custom class that will style your card component.

Show me the solution.

.c-card {
  background-color: var(--o-color-background);
  border-radius: var(--o-border-radius);
  box-shadow: var(--o-box-shadow);
  padding: var(--o-space-2);
  transition: var(--o-transition);
}

And spoilers

Try it yourself - Create a Card component

This is a descriptive text but part of it is hidden. Try to guess the answer and then click on the button to reveal it .