- 64
- 77 121
OxyProps
France
เข้าร่วมเมื่อ 14 เม.ย. 2022
Welcome to OxyProps! Our channel is your one-stop-shop for tutorials on OxyProps, Oxygen, and Bricks. We're here to help you get the most out of your favorite page builder, whether you're a beginner or advanced user. From setting up the plugin to advanced techniques, we cover everything you need to know.
Our tutorials are easy to follow, with step-by-step instructions and clear demonstrations. We cover a wide range of topics including UX/UI, Accessibility, CSS, Javascript, and PHP. Our goal is to provide you with the latest features and techniques to stay ahead of the curve.
Join our community of 700+ subscribers and subscribe to our channel to start mastering OxyProps today. Whether you're a creative professional or just starting out, OxyProps is the perfect tool for you. So why wait? Let's get started!
Our tutorials are easy to follow, with step-by-step instructions and clear demonstrations. We cover a wide range of topics including UX/UI, Accessibility, CSS, Javascript, and PHP. Our goal is to provide you with the latest features and techniques to stay ahead of the curve.
Join our community of 700+ subscribers and subscribe to our channel to start mastering OxyProps today. Whether you're a creative professional or just starting out, OxyProps is the perfect tool for you. So why wait? Let's get started!
Building a Dynamic Stock Image Repository with Bricks | PixaBricks Tutorial
Caution: The way we store and use the API key in this video is not secure. This is for educational purposes only in a test environment. When using your APi in production, make sure it is never exposed client side.
Learn how to create your own dynamic stock image repository using Bricks in this comprehensive tutorial. Using Structeezy, OxyProps, and Alpine.js, we'll build a Pixabay clone where you can search and display stock images directly on your website. Follow along as we cover everything from setting up the application to querying the Pixabay API and displaying images dynamically. Whether you're a beginner or an experienced developer, this tutorial will guide you through the process step by step. Don't forget to like, subscribe, and leave a comment if you found this tutorial helpful!
🎉 Get the plugins while they are on LTD !
OxyProps: oxyprops.com
Structeezy: structeezy.com
🔗 Links
Resources: docs.structeezy.com/tutorials/pixabricks/
Pixabay API Documentation: pixabay.com/api/docs/
Alpine.js Documentation: alpinejs.dev/
Structeezy Documentation: docs.structeezy.com/
OxyProps Documentation: docs.oxyprops.com/
⌚ Timestamps
00:00 - Introduction and Overview
02:12 - Setting Up WordPress and Required Tools
03:43 - Initializing Alpine.js and Fetching Pixabay API
08:57 - Styling the Hero Section
13:07 - Creating a Grid for Displaying Images
17:54 - Styling and Adding Effects to Images
20:05 - Handling Image Clicks and Opening Modals
24:50- Adding Search Functionality
36:36 -Conclusion and Closing Remarks
#bricksbuilder #oxyprops #structeezy
___
Come hang out with other users in our Facebook Community
💬 groups/oxyprops
___
My editor:
VS Code - code.visualstudio.com/
My Terminal:
Hyper: hyper.is/
My Terminal Enhancements:
OhMyZSH: ohmyz.sh/
Powerlevel10k: github.com/romkatv/powerlevel10k
___
Find me on the internet :
Github: github.com/cbontems
Bluesky: @cedric.bontems.me
twitter: @cedricbontems
___
Learn how to create your own dynamic stock image repository using Bricks in this comprehensive tutorial. Using Structeezy, OxyProps, and Alpine.js, we'll build a Pixabay clone where you can search and display stock images directly on your website. Follow along as we cover everything from setting up the application to querying the Pixabay API and displaying images dynamically. Whether you're a beginner or an experienced developer, this tutorial will guide you through the process step by step. Don't forget to like, subscribe, and leave a comment if you found this tutorial helpful!
🎉 Get the plugins while they are on LTD !
OxyProps: oxyprops.com
Structeezy: structeezy.com
🔗 Links
Resources: docs.structeezy.com/tutorials/pixabricks/
Pixabay API Documentation: pixabay.com/api/docs/
Alpine.js Documentation: alpinejs.dev/
Structeezy Documentation: docs.structeezy.com/
OxyProps Documentation: docs.oxyprops.com/
⌚ Timestamps
00:00 - Introduction and Overview
02:12 - Setting Up WordPress and Required Tools
03:43 - Initializing Alpine.js and Fetching Pixabay API
08:57 - Styling the Hero Section
13:07 - Creating a Grid for Displaying Images
17:54 - Styling and Adding Effects to Images
20:05 - Handling Image Clicks and Opening Modals
24:50- Adding Search Functionality
36:36 -Conclusion and Closing Remarks
#bricksbuilder #oxyprops #structeezy
___
Come hang out with other users in our Facebook Community
💬 groups/oxyprops
___
My editor:
VS Code - code.visualstudio.com/
My Terminal:
Hyper: hyper.is/
My Terminal Enhancements:
OhMyZSH: ohmyz.sh/
Powerlevel10k: github.com/romkatv/powerlevel10k
___
Find me on the internet :
Github: github.com/cbontems
Bluesky: @cedric.bontems.me
twitter: @cedricbontems
___
มุมมอง: 773
วีดีโอ
Turn Bricks elements into Alpine.js reactive components with Structeezy v1.7
มุมมอง 1.1K7 หลายเดือนก่อน
Structeezy v1.7 brings several improvement, and mainly support for Alpine.js, the lightweight Javascript Framework. In this video, we see the most basic principles: create a component, read from state, write to state, toggle elements visibility, znd even query posts from the WP rest API. 🎉 Get the plugins while they are on LTD ! OxyProps: oxyprops.com Structeezy: structeezy.com 🔗 Links Alpine.j...
Easily create accessible and nice looking Scientific formulas
มุมมอง 2709 หลายเดือนก่อน
With version 1.6, Structeezy integrates MathML (Mathematical Markup Language) allowing to create simple to complex scientific formulas and equations rigth into your Bricks editor. Let's take a tour of MathML and the role of the various elements in this video. 🎉 Get the plugins while they are on LTD ! OxyProps: oxyprops.com Structeezy: structeezy.com 🔗 Links MathML on MDN: developer.mozilla.org/...
Why Auto-BEM is not a good idea. BEM block__element--modifier
มุมมอง 9019 หลายเดือนก่อน
Hey, Cedric, BEM is becoming mainstream (?), why don't you develop a auto BEM feature for OxyProps and Structeezy? Well, because in my opinion, as a developer, it is your responsibility to define how to structure your project and components. Let's discuss why in this video. 🎉 Get the plugins while they are on LTD ! OxyProps: oxyprops.com Structeezy: structeezy.com 🔗 Links BEM: en.bem.info/metho...
Reproduce GUI Challenges COMPARE component in your Page Builder
มุมมอง 3589 หลายเดือนก่อน
In his latest episode of GUI Challenges (link below), Adam Argyle created an awesome Compare component using html, css and javascript in a smart way. In this episode, let's see how to recreate this component in our page builder. I will be using Bricks, but you could do the same in Oxygen, Breakdance, of another advanced page builder. 🔗 Links GUI Challenges - Thinking on ways to solve COMPARE co...
Save time by managing WordPress with the command line
มุมมอง 1.1K10 หลายเดือนก่อน
A few days ago, I published Updates for OxyProps and Structeezy introducing specific wp cli comands for the plugins. From discusisons in our FB group, I noticed that only 1/3 of users know and use wp cli. Lack of knowledge and information seems to be the first barrier. So in this video, we get you started using wp cli. And after that, I bet you won't get back 🎉 Get the plugins while they are on...
Learn BRXTML for Bricks users, or how to create stunning page layouts in no time.
มุมมอง 2.4K10 หลายเดือนก่อน
In this video, we discover how Structeezy does convert brxtml, a hybrid syntax mixing html and Bricks elements, into complete Bricks elements Structure Trees ! 🎉 Get Structeezy while it is on LTD ! Structeezy: structeezy.com 🔗 Links Emmet syntax for Bricks: docs.structeezy.com/reference/emmet-syntax-for-bricks/ Structeezy Dynamic Fields for Bricks: docs.structeezy.com/reference/structeezy-dynam...
Let's build Airbnbricks, using Bricks and Structeezy! Part 1
มุมมอง 2.4K10 หลายเดือนก่อน
In this video, we are building Airbnbricks, the next generation home listings site made with Bricks! 🎉 Get Structeezy while it is on LTD ! Structeezy: structeezy.com 🔗 Links docs.structeezy.com/tutorials/airbnbricks/ ⌚ Timestamps Not yet... #structurebuilder #bricksbuilder #oxyprops Come hang out with other OxyProps users ans Oxygen lovers in our Facebook Community 💬 groups/oxyprop...
Use Emmet or any HTML source and convert it to Bricks Elements with Structeezy v1.2
มุมมอง 1.1K11 หลายเดือนก่อน
While. building this landing paage, we go through various OxyProps features. Context menu, custom CSS insertion. Logical colors. Inverted color scheme.... This will be a lot of fun ! 🎉 Get Structeezy while it is on LTD ! Structeezy: structeezy.com OxyProps: oxyprops.com 🔗 Links Boostrap CDN: getbootstrap.com/docs/5.3/getting-started/download/ ⌚ Timestamps 00:00 - Introduction 01:00 - Iconify In...
Turn Bricks builder into an SVG builder with the new Structeezy update
มุมมอง 1.1Kปีที่แล้ว
Structeezy v1.1 is out, and turns Bricks Builder into an SVG builder as well as adding a few surprises ! 🎉 Get Structeezy while it is on LTD ! Structeezy: structeezy.com 🔗 Links ⌚ Timestamps 00:00 - Introduction 00:10 - Why a patch for Bricks? 02:28 - Why disable outlines on empty elements? 05:02 - Building SVGs with Structeezy in Bricks. 08:26 - Basics of a SVG path 16:45 - SVG filters. 18:00 ...
Craft, Save, Reuse, Share your structures with ease, with Structeezy, the missing tool for Bricks!
มุมมอง 3.3Kปีที่แล้ว
Structeezy is a powerful structure builder and structures manager for Bricks by the creator of OxyProps. Use it standalone, or together with one of the supported css frameworks. Create, craft, save, reuse, share! Let's seee how Structeezy will help you. 🎉 Get Structeezy while it is on LTD ! Structeezy: structeezy.com 🔗 Links ⌚ Timestamps 00:00 - Introduction 00:33 - Quick overview of the featur...
The UL element is maybe NOT the best choice for a site navigation menu... or is it?
มุมมอง 589ปีที่แล้ว
Let's see how using proper semantics in your HTML is not only good for accessibility, but is also saving time in your development process. 🎉 Get OxyProps while it is on LTD ! OxyProps: oxyprops.com ⌚ Timestamps 00:00 - Introduction 00:35 - Why should you care ? 01:42 - A nav with the UL element. 03:34 - Resulting structure and accessibility tree. 04:34 - The semantic of UL. 05:47 - The proper e...
Create Web Components right in Bricks or Oxygen. Here is how.
มุมมอง 1.4Kปีที่แล้ว
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components build on the Web Component standards will work across modern browsers, and can be created and used right in page builders like Bricks or Oxygen. 🎉 Get OxyProps while it is on LTD ! OxyProps: oxyprops.com 🔗 Links www.webcomponents...
A practical intro to container queries in Bricks and Oxygen
มุมมอง 1.1Kปีที่แล้ว
Container queries units browser support is now close to 90%. Let's look at a practical use case by improving your usage of fluid typography. 🎉 Get OxyProps while it is on LTD ! OxyProps: oxyprops.com 🔗 Links Caniuse caniuse.com/?search=CSS Container Query Units ⌚ Timestamps 00:00 - Introduction 00:40 - The problem with viewport based fluid typography systems 03:00 - OxyProps way to create a con...
Fluid typography | Get Started series ep20
มุมมอง 356ปีที่แล้ว
Five parameters allow you to define the whole fluid typography systems. Here is how. 🎉 Get OxyProps while it is on LTD ! OxyProps: oxyprops.com #CSSFramework #bricksbuilder #OxyProps Come hang out with other OxyProps users ans Oxygen lovers in our Facebook Community 💬 groups/oxyprops My editor: VS Code - code.visualstudio.com/ My Terminal Enhancements: OhMyZSH: ohmyz.sh/ Powerlevel...
Let's take the State of CSS 2023 survey together
มุมมอง 324ปีที่แล้ว
Let's take the State of CSS 2023 survey together
With OxyProps color system, contrast ratio become predictable for any hue | Get Started series ep19
มุมมอง 254ปีที่แล้ว
With OxyProps color system, contrast ratio become predictable for any hue | Get Started series ep19
ALWAYS pass your AA or AAA accessibility color contrast requirements | Get Started series ep18
มุมมอง 414ปีที่แล้ว
ALWAYS pass your AA or AAA accessibility color contrast requirements | Get Started series ep18
Defining logical colors for a color scheme | Get Started series ep17
มุมมอง 206ปีที่แล้ว
Defining logical colors for a color scheme | Get Started series ep17
Stop using HSL in favor of OxyProps colors, and here is why | Get Started series ep16
มุมมอง 376ปีที่แล้ว
Stop using HSL in favor of OxyProps colors, and here is why | Get Started series ep16
Using presets or custom colors | Get Started series ep15
มุมมอง 175ปีที่แล้ว
Using presets or custom colors | Get Started series ep15
Introduction to logical colors | Get Started series ep14
มุมมอง 159ปีที่แล้ว
Introduction to logical colors | Get Started series ep14
Choose to use dark mode, or not, or other cool modes | Get Started series ep13
มุมมอง 193ปีที่แล้ว
Choose to use dark mode, or not, or other cool modes | Get Started series ep13
Reduce unused CSS by a granular selection of your Classes Packs | Get Started series ep12
มุมมอง 232ปีที่แล้ว
Reduce unused CSS by a granular selection of your Classes Packs | Get Started series ep12
Choose your classes set for Bricks Class List | Get Started series ep11
มุมมอง 185ปีที่แล้ว
Choose your classes set for Bricks Class List | Get Started series ep11
A few settings for dealing with Gutenberg | Get Started series ep10
มุมมอง 167ปีที่แล้ว
A few settings for dealing with Gutenberg | Get Started series ep10
A few words about normalize | Get Started series ep9
มุมมอง 187ปีที่แล้ว
A few words about normalize | Get Started series ep9
How Bricks global colors link to OxyProps CSS Variables| Get Started series ep8
มุมมอง 225ปีที่แล้ว
How Bricks global colors link to OxyProps CSS Variables| Get Started series ep8
Menus, elements and theme styles settings | Get Started series ep7
มุมมอง 242ปีที่แล้ว
Menus, elements and theme styles settings | Get Started series ep7
Dashboard, builder detection, export and import settings | Get Started series ep6
มุมมอง 220ปีที่แล้ว
Dashboard, builder detection, export and import settings | Get Started series ep6
Do videos in French, it will be much better.
Hi, Could I ask what is the difference this with WordPress Local ?
do you have a manual thing where to go in the google chrome setting because I tried to copy and paste but that tutorial you doing is not showing in my computer
Absolutely loving these. ❤
Love these long form detailed tutorials. Thank you so much for this. 🙏
Can this just be copied into elementor?
no idea what happening but i have a fresh install - installed Bricks then Oxyprops. Says its all set up in the Setting page. Go to the builder and nothings there. no context windows - nada?
had any one encountered issue where right clicking has no effect - the context menus don't appear. Can't seem to get this to work at all? All i get are the browser defaults
I have a problem...which is adding fields and color from taxonomy to post th-cam.com/video/m4VYO1ITDew/w-d-xo.html
Is multivendor?
Hi Cédric. Is it possible with Oxyprops only ship used variables?
what terminal is this ??
thank you, would this be ideal for creating a horizontal image gallery for a photographer?
I do not have the floppy disk icon on the Structeezy menu at the top of the structure panel.
Yes please keep providing these great tutorials. Theses are tutorials not found by anyone else. I am very interested in this build. If your up for the challenge I would love to see a multi vendor marketplace build as well.
You are amazing! I have not found anyone who creates such great tutorials that ventures outside the box. The only tutorials I have ever found for any builder are focused around the basic “build a blog or portfolio” style page or website and you have knocked it out of the ballpark with this one. Great job! Every product you build will be a part of my toolbox.
Thanks Cedric, firstly, you've explained someting in bricks that I didn't realise, that being the %root% isn't just for elements, but can be used to address a CSS class, I didn't know that, and I can see tha automatic BEM naming might cause problems. However, I'm not sure if the example you gave is a use case that might come up that often! Certailny, as a Quality of Life use case, automatically renaming classes to match the structure would probably help most people, but I can see your objection. Maybe something that 'reviews' the naming convention a developer is using or highlights possible bad practise would be better, but this sounds more like an AI type process rather than just a naming hierarchy tha I imagine these auto naming/renaming tools are.
Awesome.. You have either done this a million times or are some kind of savant. The code just flows out of you :)
Great tutorial Cedric, lots of good stuff to learn
I Love the way you teach and use things. Very helpful for me.
Interesting, you add the api key in a variable, it is not a problem for security? Thanks.
When I saw the first video of the Alpine.js integration, it seemed interesting, but I couldn't see a use for it. However, this shows the power of the access to external data sources which is very exciting. The only criticism is having to type complex code into a very small single line input element which is very hard for new users to debug.
I jumped the gun a bit. Your latter example use a code box. Does that mean I can use a code box for everything?
A solution for easier code input is coming with specific custom elements (preview in the FB group)
@@peteharrison3241 just an idea, if you have AT, you can set heading/text inputs to be textarea - this helps when i put in wrapper stlyes/classes in text areas, as it's much larger
Thank you, it turned out very nice!
Thanks, glad you liked it.
This is good stuff!!!
Thanks!
The audio is very low, and there is too much zoom on the screen.
Très intéressant merci 😊
Avec plaisir 🙂
Htmx please😁
😀 this is in my work in progress.
Interesting HTMX.
HTMX for the win!
Do you guys have specific htmx use cases in mind? Would you use default WordPress API endpoints? Or create your custom ones? Or would you expect the plugin to provide custom endpoints, and of so, which ones?
@@OxyProps Personally I create my own endpoints. I find the current WP API limited when I want to fetch posts for headless since it requires multiple requests to get tax, images urls for custom fields, etc.
Also, how would you go about creating a custom component library that you might use in other developments?
Storing them in structeezy as custom structures, then exporting my structures / importing in the other project.
Cedric, If the output needed styling inside the <span>, would you add inline styling or create a external stylesheet that includes the styling. Or, would you rely on css in the parent i.e. Bricks?
The component should own eveything it needs to work, style included. So it should include minimal style, that could be tweaked / extended later by user.
thank you so much
Great tutorial, but the final topic on using custom cards raises a question in my mind. The last card used a Red colour scheme, but looking at it, it's hard to see any real Red colour, I understand that using a mor colourful scheme might render more red, but there's very little to describe it's rendering as red!
Cedric, happy Easter. Am I being copletely stupid, or is there no way of changing the colour scheme from the default values in Bricksprops? This video is a year old, and your interface looks very different than mind at the latest version of BP. If I want the canvas colours to be white through grey, or a brand colour that's specific to my client, can I change them?
how to change the light/dark mode of a cursor?
why using the <menu> tag if it not supported by most browsers? @OxyProps
It's worse than a simple authorisation setting to allow the use of the clipboard, if you aree running without SSL, it does not work at all. In my development environment, everything runs as http as you can't get certificates for local sites. I've spent days trying to finbd ways around this. I work with a QNAP nas with wordpress running inb docker containers, and thus far, I haven't found a way to get this to work.
The clipboard API that Bricks chose to use only works in secure environments for security reasons. An environment is considered secure if and only if it is served over https OR it is served from localhost. Any local environment serving domain.test or domain.local or anything else than localhost over http and not https will fail. Luckily, most local environments can serve over https. This is the case for me using Valet. I also know users can successfully serve https with Local.
I've found it doesn't work from localhost either. Chrome has an experimental flag for insecure sites that allows it to work
Great addition, loving these updates.
Thanks!
You should consider working on BricksProps instead of putting all your effort into Structeezy. BricksProps not gettng any fame at the moment and I see it very critical that it feels like you have made a new product and left BricksProps behind. Sad to say, but this way you disappoint your customers…. Trust gets lost also.
👏👏👏.
Thanks!
Hello Cedric, is it possible to move the Structeezy panel to a second screen?
I understand why you are asking but unfortunately it is not possible. The panel is part of Bricks document, like the structure panel or the elements panel, so it can not be placed in a separate window / screen.
I've now watched the colour system setting videos 3 times, and I'm still not sure I get it. I know i asked elsewhere for a video taking a real example of a Style Guide and configuring BricksProps from it as this might make a bit more sense to me. I noticed there aren't many comments for this series of videos, maybe a real to life example might help Many thanks
Fantastic. Yes, please keep sharing your tutorials.
Very Useful, Thank you.
Thanks!
Excellent 👍 😀 thanks.
Thanks for your comment.
Great explanation. Watched the whole video just to hear your accent :) I think a comment below clarified. I think your video title doesn't match your intent. Auto-BEM is a great productivity feature, as long as you understand what you want it to do, and set up the Element labels properly first. I agree that expecting Auto-BEM to do the thinking for you is a bad idea :) Recently, Advanced Themer enhanced their Auto-BEM feature by enabling you to set an Element as a BEM root. That way you can prevent creation of erroneous classes on nested BEM structures. For me, that made it way more useful.
Thank you, very interesting
Thanks for the video, i failed to understand why .link--underline is not menu__link--underline where highligted is.
Hello @mikt This is a very important point. .link--underline is a modifier to the link block. I made the decision that any of my links could be underlined, so the modifier is one of the link block. In my design choice, only menu links can be highlighted, therefore .menu__link--highlighted is a modifier to the menu__link element. There is no right or wrong here. The decision will be driven by your design and the way you want to manage your components.
@@OxyProps Thanks - now i understood :)
Thank you, Cédric.
My pleasure.
Amazing BEM class!!! Thank you, Cedric!!
Thanks. I am happy you liked it.
Thank you for this detailed BEM explanation. I would say "Auto-BEM is not a good idea if you don't know how BEM works". Auto BEM is not an autopilot that drives you while you sleep. But speeds up development and does help a lot if you understand the principles of BEM. As always: we need to know our our tools. This video helps knowing BEM better. Thank you.
Exactly. This is what I mean when I say: if you use a software to automatically name your classes, make sure you understand the principles. So you know if the suggested classes are corerct and match your intent. In the same way it would be dangerous to use code from any AI without actually understanding what this code does.
@@OxyPropsThis is very true. The context has to be understood before it is used. Technically, it is not “auto-bem” since manual verification has to be done.
glad you are healthy and creating videos my friend.
Thanks for your kind words.