Aller au contenu

Tutorial - Template for the future

Ce contenu n’est pas encore disponible dans votre langue.

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.

Préparez-vous à…

  • 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

link 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

link Test your knowledge
  1. Adding o-props to my WordPress site…

  2. Which is not a benefit of o-props?

  3. The o-props framework…

Builder Tabs are also available

link Builder Tabs are also available

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

Do this in Bricks

And puzzles

link And puzzles

Try it yourself - Create a Card component

link Try it yourself - Create a Card component

Create a custom class that will style your card component.

Show me the solution.
.c-card
.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

link And spoilers

Try it yourself - Create a Card component

link Try it yourself - Create a Card component

This is a descriptive text but part of it is hidden. Try to and then .