Using Utility Classes For Rapid WordPress Design In Oxygen
Vložit
- čas přidán 5. 09. 2020
- In this video, see how to keep your design consistent using utility classes. Utility classes can be created for anything you use frequently, such as box shadow, margin, padding and buttons. Once you have created your classes, you can easily import them to another Oxygen site using Oxygen's User Design Library.
Video Links:
Box shadow generator: brumm.af/shadows
UI Gradients: uigradients.com/
Get Oxygen ➜ oxygenbuilder.com/
Subscribe ➜ oxygenbuilder.com/ytsubscribe
JOIN THE OXYGEN FACEBOOK GROUP FOR HELP & SECRET INFO ➜ oxygenbuilder.com/facebook - Jak na to + styl
![[Newbie Guide] Responsive Design Crash Course For Oxygen](http://i.ytimg.com/vi/gCFzYM4aTwg/mqdefault.jpg)
![[Newbie Guide] Responsive Design Crash Course For Oxygen](/img/tr.png)
So many lightbulbs went off watching this. Love the content Elijah 👏🏻
Elijah, so far this has been the most illuminating tutorial on the channel. But I'm still sure you can surprise! Thanks for the design set.
I love this video for guiding our workflows. Thank you!
Very eye opening. This tutorial video may have been my deciding factor to move forward and purchase Oxygen Builder.
thanks thats make my life become easy
Very nice :) I was just thinking during the video that it would be really cool to be able to use TailwindCSS for utility classes
Great job
Great video
Thanks!!
Very helpful. I’m working on a “Oxygen Design Guide” that is largely made up of utility classes.
Me too
Very useful! I suppose a great way of working would be to define all the design elements in f.i. Adobe Xd first. Then spend some time feeding them into Oxygen. Requires a very systematic approach!
In the video you mention that you would be putting a link to the design set that you are creating here. I don't see any link to that.
thank you for the tips. super helpful!! The class / selector's name can't be edited, right? it would be nice if we can rename them. Also the order of this classes is based on the creation date, correct? It might be helpful if it's sorted alphabetically, so it looks more organized. thanks again!!
Great tutorial, Could oxygen builder add a functionality at "manager>>selectors" to change selectors' name globally ? At current situation, after setup a selector's name , we can not change it.
Thank you very much for this tutorial! It is very helpful. I would like to import the utility class design set, but when I try is says: "Not found"..is this Design Set still available?
This is Important topic and should be 'must watch' for every begginer. P. S. Where can one find site key?
good vid thks. One Question @ timestamp 24:47 you had a drop down tab for notes / clipboard etc ....how did you accomplish this? Thks
wow
Would this process qualify as style kit?
Great Video! Could you show me where to find the site key?
Guys - i have a question: i have built my sites using elementor, but can i some how rebuild the whole site with oxygen? If so will it make it faster?
sir i need a tutorial when the tab elements are more than 6 how to make
them responsive in one row so that it can swipe like uber.com
REALLY interesting and useful tutorial - persuading me of the superiority of Oxygen!! Did you make the 'site key' available? Where should I be looking?
oxygenbuilder.com/2020/09/06/tutorial-using-utility-classes-for-rapid-wordpress-design-in-oxygen/
But the key doesn´t work any more.
Thanks for this tutorial. Unfortunately the site-key doesn´t work.
" cURL error 6: Couldn't resolve host 'utility.elijahmills.com' "
Is there any other possibility to get the design set?
Hello, I need help. I've watched many episodes of the Oxygen video, but I haven't found the notepad program that takes notes with a mouse swipe and appears in the middle of the video, I need to know the name of this program, thanks for your help.
Personally I realised that using CSS frameworks & utility classes is more trouble that it's worth in the long run, when considering future maintainability of a medium/large website. Cos using those essentially hardcodes the style into each page. For example, imagine you have a ".hero" section on every page with a common element like an ".icon-box" inside of it. If you add utility classes to that icon box to style it, then it means that if you ever want to remove a shadow/margin etc, you would have to do it on every single page where they were applied. That's an awful solution. Instead, I prefer to build "modules", like a generic ".icon-box" and then a hero-specific variation like ".hero__icon-box" (i.e. I use BEM CSS coding methodology). That way if I want to edit the look of ALL icon boxes inside a ".hero" section, I simply edit ".hero__icon-box" class and that's applied to all of my pages that use that. Or, if I have a very generic change that I want to apply to all icon-boxes, including the ones in ".hero" section, I simply edit ".icon-box" class. A much better approach, than utility classes, in my opinion.
The only thing I wish I could do is setup custom variables in Oxygen, the same way I can in SCSS. That would be an absolute killer feature for repeatable things like margins/paddings/font-sizes/icon-sizes/transitions etc. One can dream..
I've learned that there is no best solution when using CSS, its made me hate CSS even more knowing that there isn't 1 method that kills all. I understand your concern about utility classes and that is true about what you say but for me its the best method to use. I have used BEM but I get bored of thinking up names and it just takes too much time. BEM is good for a landing page but for a big site with plenty of pages, I just find it unusable and time consuming. With utility classes, I can just use a class that already exists that I created 1 time. For me that is rapid development and how I will use CSS going forward.
@@jamieprescott100 I agree on one thing for sure - CSS is very frustrating.
But I still don't understand how utility classes could work, especially on a large site as you suggest.. If anything, I was gonna suggest in my original comment that it's only good for small sites, landing pages and/or web apps (essentially very controlled environments). Which is the opposite of what you are saying, funny enough.. :)
In my opinion utility classes make styling impossible to deal with on a large scale. Mostly, when it comes to changes (which are inevitable long-term). For example, if you applied a ".margin-bottom-small" class to a bunch of similar components (i.e. icon boxes or wtv) throughout the site and then one day decided that you actually wanted to change it to a ".margin-bottom-medium" - you are in trouble, cos you have to find all instances of those components throughout all pages/posts and edit each one of those individually, removing the old utility class, replacing it with a new one. That's such a mess! Reminds me of horrors I had to deal with, when I realised I didn't like the look of something, when I used utility classes and that the only way to change them now is to edit all of the pages all over. With BEM and specific module-related CSS classes, you could make those sweeping site-wide changes in CSS alone, without having to edit a single page.
Utility classes essentially tie HTML & CSS together, which is exactly what you want to avoid and why CSS was invented in the first place.
I do agree that thinking up of proper BEM names sucks. But once you build a core, you just stick to it, just like any other coding convention.
@@TheCredibleHulk I'd recommend reading this: adamwathan.me/css-utility-classes-and-separation-of-concerns/. It presents some interesting thoughts around which approach is best and why. Adam's utility-first approach with component classes for repeating patterns as they emerge is an interesting method.
@@OxygenBuilder It is a good read for sure. And a good breakdown of various methods & issues they present. It's funny that after years of coding I unknowingly "invented" & tried all of these methods all on my own, trying to find that magic perfect balance between HTML & CSS, which sadly can never be achieved. However I still came to a conclusion that using utility-first approach with something like Oxygen (or any WP site for the most part) is just unworkable. What I do now is use a mix of content-agnostic BEM components, then more content-specific classes, wherever necessary, and only then utility classes as a last resort (for small one-time adjustments). For example, I'd have a class like ".ui-card" and then ".ui-filterable-grid__card" for those that are inside filterable grids. That way I still reuse as much CSS as possible, while having site-wide control of card elements & a separate site-wide control of card elements inside filterable grids. It just makes sense to do it that way. If the filterable grid cards were made with utility classes, I'd blow my brains trying to modify those from within Oxygen/HTML on every single page I've used them on. That's why I consider utility-first approach unusable in a regular website scenario. And yeah, there is some minor CSS duplication, but I don't sweat about additional MAX 1-2kb of CSS in this day and age. Especially when it's gonna save me hours of time in the long run, when I will inevitably need to adjust something based on client's feedback.
I can see how it can be handy to use utility classes on a completely custom project, especially where you have dozens of devs working on it at any given time & where you have direct access to the source files for each page/view, so you could run bulk search & replace. But it's just not a reality for a WordPress site. It's not an app, where you have sepparation of raw text data & HTML. Unless you build everything using ACF Pro & then build templates to pull & display data with whatever HTML you want, you will eventually find yourself in a position, where you've created a bunch of utility-first elements on different pages and then decide that you need to change them. And good luck doing that, when you can't even select multiple elements on one page in Oxygen and remove/replace classes all at once. You have to do it one by one. And now imagine you had the same utility-first element on other pages too. I've been there and wasted countless hours, undoing the damage. Almost gave me a stroke. So yeah, I'll stick to content-agnostic BEM components for now.
Hey guys. I' ve just read your discusion and adamwathan post. I agree with both of you. Content-related classes are good for custom - non reusable elements. Utility classes are best as base for your css.
I have lots of questions about this topic. But for now 3 are enough :) Why we can't use the margins for sections? I use it. Is it ok to use the !important? From the development point of view.How to use paddings classes for columns? Thanks.
> Why we can't use the margins for sections?
In Oxygen, Sections don't allow you to set margins. This is because of the layout role of Sections as top-level containers. You can use a Div instead, but then you forego the extra help of having the inner content of your Div restricted to the maximum page width set in Oxygen's settings.
> Is it ok to use the !important?
Use it very sparingly. I generally advise against it, but in some cases it is necessary.
> How to use paddings classes for columns?
Oxygen has some default padding that is applied to Column Divs with the selector .ct-new-columns > .ct-div-block . It's not possible to override this with a single class due to CSS specificity rules, so we have to either override it per column via the ID or by adding new CSS via a Stylesheet or Selector in Oxygen.
I must find out what clipboard you are using on Mac, it looks super useful.
It's called Unclutter and it's great!
@@OxygenBuilder oh, thank you! check it later.
Ahaha konečně mám důkaz že Oxygen používají i Češi
@@dominikklon1985 na fb je nas cela skupina 🥳
@@vitajtube skvělý tak už tam jsem 😍
what's the clipboard app that you're using there? looks very handy
it's unclutter for macos
@@mateuszb4387 cheers mate!
Can i make a Design Library out of a local wordpress site?
you could use your local site by exporting it using something like All-In-One and then use it as a template for your online development / site - this is what I still do for most new sites - I include all the utility plugins etc
Hands down. What is better Oxygen or Webflow?
Webflow of course but keep in mind that you don't have all the perks of WordPress. Oxygen is a Webflow clone with the difference that it is full of bugs.
@@PswACC are you that sure? I am getting into oxygen now for the agency I am working, but if Webflow is better, then I would take the webflow-route. On the other hand, I heard that Wordpress is better in terms of SEO and Google.
@@saucegiverr You can achieve the same SEO results with Webflow. WordPress is great. Based on my own experience, Oxygen is broken. Global Colors have been an issue for over a year. One of the recent updates made the colour picker completely vanish. It's missing basic functionality like a built-in form builder or Toggle pricing tables that literally every other builder on WordPress has, but the biggest issue for me is the bugs. It's like being a technician while trying to get things to look the way you want. You look at the Mobile view and everything looks great and then you go on your actual phone and it's completely different and one of the worst things is that sometimes when you make your changes on the backend they don't reflect on the front end and Cache is not the problem. I encourage you to try Oxygen for yourself and arrive at your own conclusion. Also take a look at -CZcams: Flux- Webflow
@@PswACC Thank you very much for your honest opinion.
I already bought Oxygen and built the first page with it, but it was quite a hassle in terms of mobile responsiveness and design.
I will give Webflow a try I think.
For me it depends on your project that you are building and the client that will receive the website. Webflow is perfect for a static website, and the client will not have to update or support his website ever. But when the client starts asking for features then WordPress is a solution that you can give a better price to you client since you dont have to build from scratch.
As for the mobile go to this page from a mobile to see how a page form the webflow website looks like webflow.com/website/flux-academy
An I dont want to say this is better than the other. It depends on what you are building, the time you will spend, the price that will cost etc.
Elementor is cooler, more convenient, better and forever )))
'Cooler' doesn't mean anything. Considering that Elementor is infinitely more limited than Oxygen, it's not even right to compare it with Oxygen. Oxygen is for serious web developers. The code output is clean, there's no div-ception, sites are naturally fast, you have a very similar degree of control over each element as you would when hand-coding a site, you don't have to worry about theme bloat as the theme framework is automatically disabled etc. And also very importantly, the Oxygen community is so much better than the Elementor community. Actual developers basically, not a bunch of casuals who couldn't code a line of JavaScript to save their life.
@@bryncb where can I find these oxygen communities?