Perfectly Space All Elements in Oxygen With ONE CSS Class AKA "Owl" Spacing
Vložit
- čas přidán 29. 07. 2024
- More detail and code snippets here: digitalambition.co/watch/perf...
There are A LOT of ways to arrive at the same outcome in web design, but some are objectively better than others. One principle I try to follow is: less code, less individual styling, etc. Keep things as simple as possible, right?
So when you're faced with needing to evenly space elements inside a div, section, card, etc. in Oxygen, there's a one-liner trick you can use to achieve this without having to target and style every element individually.
Even better, we can assign this trick to a class so that it can be used over and over again anywhere you need it. Or, if there's a class like (.card) that you're going to be using throughout your site, you can just apply this technique to that class.
The trick is based on a CSS technique called the Lobotomized Owl, which allows you to select any direct children of a parent element that also have an adjacent sibling. That's a mouthful, but essentially it means you're selecting everything inside of a container except for the very first thing.
By doing this, you can apply spacing to the top of the selected elements which effectively applies even spacing to all elements without adding extra spacing to the top or bottom.
Watch to learn how!
If you have any questions, let me know :)
your link in the description is not found/missing
@@kokohcokisiregar Should be working now, sorry!
@@Gearyco yes it is...
i really love what you do, really amazing
it's easy for me who really just started learn about building a web, and i do invest on oxygen builder when i decided to buy it...
then i found your channel and web, it's really help me... thank you sir :)
i hope more great tutorial will coming more, loved the way you explained.
Sorry for my bad english ^^
am i missing something? where can i get the code? i clicked the link and it takes me to a page but the code is not there, just another link. then i open that link but its the same page. so i am assuming the code is no longer that. can you share a updated code doc please.
First, I would like to tell you that your video is completely beginner-friendly. I'm a beginner as well as a non-coder and was struggling with the spacing issue. Your guide is a big chunk for me, a million thanks for this amazing stuff.
Great to see a guy who really knows CSS doing tuts! Subbed.
Man! This oxygen video is killer as well as the last Oxygen builder tutorial. Subscribed!
I really appreciate your straight forward style of teaching, and find your content very useful, great work - Thanks!
Just wanted to stop by and say how handy this has become and thanks. I've known of it for a while but your video was what got me to finally set it up.
If I had one quarrel, it would be that it kinda sucks dealing with line-height throwing things off (for example, when there's a bunch of extra space above/below the text because your line-height is set to 1.7 or whatever) but still the best solution to date and I use it all the time.
Loving the content, keep it coming!
Great content, full of very useful information! Thank you!
So cool man. I just finished the vid, and it's working perfectly. Busy implementing on the rest of my own website. You are amazing, thanks for your tuts, it's so helpful.
Glad it helped!
Great, clear and very useful tutorial! Thanks.
This is awesome, I am lucky to found it on CZcams. Thank you for sharing.
Clear, concise and not too boring. Oh, and useful! :) Thnks! Subscribed!
Another useful tutorial, great job.
Man, you just made my life a whole lot easier!!
Really great video. Keep them coming.
An other nice tuto, I can't wait for the next one.
👍 Thank you so much for this video. It is going to help with my builds immensely going forward.
wow, thank you, Kevin! this might help me right now on an actual project))
Wow! Your tutorials are amazing. Thank you very much.
Appreciate it!
I have never leave a comment to any channel. But You do deserve one. I even look forward to your Oxygen Builder course if you are making one. Thanks
Awesome mate , this is the best
Fantastic tutorial.
Great Great Great Stuff! Cheers mate!
Fantastic, thank you for sharing :)
Really Love This... Awesome
Thanks so much for this! Huge help
You bet!
A solid use case for this will be to apply to Oxygen innercontent when creating templates...that will keep spacing for all child content consistent
Wow I got stuck on this one, but made it through. Success!
Super video, thanks
Hi, just to point out, it is for sure a lot easier to write the code with margin-top and the siblings to skip the first elements, but IMHO the more intuitive one is to stick with the margin-bottom and add a :not(:last-child) selector. So instead of skipping the first element for margin-top to be applied, you're not applying the margin-bottom to the last element.
Also regarding the "fighting" with Oxygen sections, it is much easier when adding a new section to add just a regular div element and then no additional elements within that div element are rendered, so you can change the div HTML tag to be named as a section within Oxygen, and then you need some additional CSS for that custom section(s) element(s) to behave as you wanted to but it still gives you more control over the section(s) itself than fighting with the predefined Oxygen section CSS values and additional HTML structure.
IMHO Applying "Owl" spacing to that simple div(s) converted to be section(s) is much more straightforward.
The lobotomized owl concept applies the margin to the top so as not to need to remove anything or :not anything. The original concept didn't use a > direct child selector, but simply a * + *, which if you were trying to use a :not qualifier, you'd have to apply it to every potential child level affected by the original selector, which would create a messy situation. Applying the spacing only to modules that actually need it without any additional qualifiers is the most efficient way. You can read more here: alistapart.com/article/axiomatic-css-and-lobotomized-owls/
This is so amazing. I was doing the similar thing with :not(:first-child). But your way is much better@@
Thanks!
Your tutorials are first class. Clear and concise and so useful. Thanks so much for doing these. I would love to know what you recommend as an approach in Oxygen to enable content management for clients, particularly for content other than blog posts.
Thanks! ACF for content management or Gutenberg, depending on use case.
The HTML shrinking code is also affects Gutenburg editor making it pretty useless . We leave most innercontent to our clients to fill and this is an issue. It seems possible to override the editor-wrapper but did not test. On one test site the Paragraph text went to something like 6px :-)
Search in the comments. All you have to do is turn off a setting in Gutenberg. I've posted the instructions a few times to others.
Oxyninja keeps everything simple. I find myaelf more organised and saves about 30% of my time building a site these days.
Unfortunately is a much older and dated framework that lacks flexibility and customization. Automatic.css is the framework of choice now.
Following along. Great videos btw. The question is where do I find Vmax. it does not show up in my drop down when I try to set padding or margins.
It's not an available unit in oxygen. You have to set the unit to "none" and then type the whole thing out. E.g. 5vmax
Hi! This is so a great tutorial. I love your style you teach. I hope that you make more tutorials. In another vid you spoke about the 6 to 9 versions of an image. Is that tutorial still live?
I can't remember exactly. Was I talking about image sizes for SRCSET?
@@Gearyco You’re talking about that you use 9 different formats for 1 picture upload in Wordpress in relation to srcset
Love the video and the content. Thanks for the information. I also use OxyNinja myself and I think that this is a great set of addons PLUS they set the standards of code reuse with nicely defined classes :-) Apart form OxNinja do you recommend any other paid additional elements ?
I'm putting together a recommended tools/apps area here: digitalambition.co/tools/
Great video. I have one ?
In cards with different length of text, how do I align the button at the bottom?
Add a top margin of "auto" to the button class.
That was perfect. And for stretch columns where you want to align the button to the bottom, will you just add a margin auto to it?
Yep!
@@Gearyco If i can suggest you another video about Oxygen, that would be how to use templating system with HTML tags for better SEO. Where to put the header, main, footer, and other useful tags included in O2. :) I love the way you explain stuff in your videos.
Hi @Digital Ambition.
When the video is opened in 1080HD version, your code doesn't look very clear for example at 9:48 minutes. Can it be made a little zoom in the future. Your video is very good
Taking care of this in future videos, thanks.
Great videos! Would you give an opinion to oxyninja vs oxymade?
Well I created automaticcss.com so that’s my opinion 😜
Your content is fantastic! I learned a lot from them. A question came to mind.. Why is owl spacing better if gap is also available? Thanks!
When I made this video gap for flexbox was not well supported. Owl spacing still has far more browser support. But, you can use either technique at this point.
Hey Kevin, great video, just subscribed today. Wanted to make a suggestion for future videos. Try recording the demo portion separately and then while watching the demo, record the audio (or video) commentary. I know its more work to do this and edit the two recordings together but will give you more control over how the final video is structured.
Something wrong with this one?
@@Gearyco no, but you said it is hard to demo and narrate at same time. I think if your break it up into demo recording and then go back and narrate the demo it will make the content easier to follow and improve the overall quality. Just a suggestion, still great information any way you do it.
@@shaunazar ohhh I forgot I said that. Yeah good point. I think I just need more practice at recording honestly. I’m already somewhat strapped for time so I have to do whatever is fastest.
Just found your channel and am enjoying it …. BUT I watch most my training videos on a tv while sitting on the couch and reading your code in the CSS editor is impossible.
Is there a way to increase the font size for when making these tutorials please?
Haven’t found an easy way to do it
Also, why the owl method with the adjacent siblings and not a :not selector for the last child? Is this preference or is there a reason this way works better?
That would actually be a more complicated selector.
it's called being shy @23:00
Hi Kevin, what tools are you using to record the video? It looks good, especially on the zoom in on the styling panel on the left.
That was Camtasia but I’ve switched to ecamm live
@@Gearyco what made you switch to ecamm pro?
What is the relation and how does Owl, OxyNinja and your Automatic platforms work together? Or will Automatic replace the other two?
Automatic is a full replacement
Great video.
Kindly zoom in while writing the code as it is a bit hard to read or reduce the display size.
I can’t zoom in during but I zoomed in after.
Can you please do a video on animations? There are so many people on the oxygen facebook with issues.
I honestly don't do a ton with animations. They're overused IMO. I prioritize efficiency and ROI for businesses over flair. I only use animation when I really think it's going to add a lot of value to a page.
Whenever I change the background color of the div it changes the background to everything that is using the owl-spacing?
Don’t change the background color on the owl spacing class
Is possible to use repeater inside oxyninjas grid?
Yep! You can apply the grid classes directly to the repeater.
Is using margins for equal spacing like this better than using flex columns with a gap?
It was when this was recorded but flex gap is well supported now so you can just use gap.
Beautiful method!
.card > * + * looks great and clean, and I prefer it, but this should work the same way: .card > *:not(:first-child) {margin-top: 1vmax}
Thank you for pointing us to "Lobotomized Owl" I am only concerned about the perfomance aspect since * is a universal selector i read on google which might mean that it will check all selectors of the parent in the css... Just can you clarify if your technique has some perfomance impact on the website? I'm not pro just asking because i googled and found many people avoiding Lobotomized Owl because of performance impact.
There’s no performance issues
@@Gearyco Thank you one more thing in the end of the video you mentioned we can also add selector by going to manage selectorand then adding for example like [ .card > * + * ] can you give me a snippet where i could add the [ .ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * ] simply what I am looking for like you mentioned to setup .card on a container through manage selectors for sections what I need to add... Thank you so much... This technique is really a life saver... huge like from my side...
Btw I wonder why you tend to use vmax instead of using vh for margin top bottom?
Because vmax scales across devices a lot better than vh, in my experience.
Great video thank you. Do you follow Kevin Powell? He's big on the owl
Love Kevin Powell’s channel!
Thank you. How to support your channel
Just Like, comment, share for now. 🙌
Once I have oxy ninja, do I still need to go through this css hack for each section / child ? Or is there a simpler method in oxy ninja ? Please help guide to the proper option. Thanks for sharing the information.
This is a different technique from what OxyNinja offers.
@@Gearyco Thanks for the reply. How to apply the oxy ninja technique ? Just bought it and trying to understand it.
Newbie here... Added the CSS to a new stylesheet as shown in the video, but the owl classes don't come up when I try to select them for a section I'm working on. Do I need to create the classes myself as well as define them in the stylesheet? Or have I just done something wrong somewhere? Anybody else encounter this issue? Thanks in advance!
They won’t show up in the drop-down until you’ve used them at least once. Just write them in the class box and hit enter
@@Gearyco Thanks so much for the help! Your videos are really great for someone just learning, much appreciated!
am i missing something? where can i get the code? i clicked the link and it takes me to a page but the code is not there, just another link. then i open that link but its the same page. so i am assuming the code is no longer that. can you share a updated code doc please.
You don’t need this code anymore. You can just use flex gap now.
Helo, thanks for the tutorial. I hope you still read comments on older videos. Question on organizinf O2 selectors: what I'm trying to achieve is to have a selectors custom folder called custom-fundamental and be able to fill it with all owl-* selectors in advance, so they popup when typing in class box as suggestions the same way as oxy ninja and others do. What I am doing now is I use some owl class in my project, then I go to selectors, where this class appears afterwards, and then set its folder to custom-fundamental.
Are you creating new dev sites from a blueprint or from scratch? You need to be using a blueprint so all this is done for you already if you aren't already.
@@Gearyco I´m just setting up my workflow. By blueprint you mean some kind of my basic WP package made by Duplicator plugin or similar?
@@pejskunespi There are a lot of ways to do it but yeah. I can actually clone directly in my server panel.
@@Gearyco Is it something WP or Oxygen native? sorry, rookie here
@@pejskunespi neither. Depends on server config.
I followed the tutorial and copyed the code, the first part with the .card sector did work but i didn't get the gerneral owl spacing to work. A container (which i am applying the "owl-spacing--m" class to) is just a div? Or is it another thing?
Those are Section elements in the tutorial. But Owl spacing should work on any container.
@@Gearyco nervermind i was just missing a "}" in the code 😅 but thanks for the reply
Great tutorial. Thanks. One comment though - the code is too small. It's difficult to read. Can you make it a bit bigger in future?? Thanks!
Yes, I figured out how to zoom in post with Camtasia. It’ll get better!
I have a request - more elaboration on this:
.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}
I think I understand the top row - It's that we want to apply the lobotomized owl on the div (.ct-section-inner-wrap) below the section (otherwise the owl is applied to just one element - .ct-section-inner-wrap, and creates a space (why would it create a space btw? there's no sibling above it - just its parent).
The second row I'm pretty fuzzy on. Is the class .owl-spacing--s in the second row only working within the scope of the first row's selector? Or is the second row saying "hey, everything in this whole entire css sheet except that pesky section element with class .ct-section gets the lobotomized owl spacing"?
Thanks!
The first line applies the styling to all adjacent siblings inside of .ct-section-inner-wrap as long as the section has the owl class. The second line applies the styling to all adjacent siblings inside any div that has the owl class AND that's not a .ct-section. The two rows don't interact with each other. When you separate two rows with a comma, it's like starting over. You're targeting anything / something completely different. I'm just grouping them together and comma separating because both things are getting the exact same styles applied. Hope that helps!
@@Gearyco I get it! thanks.
Here's the code so others can see what I'm about to talk about:
In the CSS stylesheet:
.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}
In the HTML:
Explanation:
".ct-section.owl-spacing--s .ct-section-inner-wrap > * + *," Translation: Apply owl spacing to the children of .ct-section-inner-wrap. But, trigger owl spacing on those children by giving the section - that is the parent of .ct-section-inner wrap - the owl spacing class.
.owl-spacing--s:not(.ct-section) > * + * Translation: Apply owl spacing to every gosh darn thing with the owl spacing class except html elements with a class of ct-section (in effect, all sections, because all sections have the ct-section class). Why the exception? Because then the direct children of sections (with the owl spacing class) would get the owl spacing - .ct-section-inner wrap itself, not their children - and break the code (create a margin gap above ct-section-inner-wrap).
The thing I can not control to make the spacing perfect is the card heading and text line height without affecting the rest of the site. Any suggestion to solve that?
What are you setting line height at?
@@Gearyco h1 line height 1.1
@@chelofonte what’s the issue exactly?
@@Gearyco thank you Kevin. I just created an image for you to see the difference between the space above and below the text. drive.google.com/file/d/1U7dVOTd3HlL4d-ahYRoUM24pNl_F3tUl/view?usp=sharing
@@chelofonte Got it. This is normal and desirable. It happens because you're using a relative line-height (which is correct). Larger elements typically have more space around them in design and typography.
Your code snippets link is not working?
They got migrated into Inner Circle. I'd like to still provide them, though, so we're looking to restore them on the site soon.
This guy CSS'es
10:49 Yea, like there is no way I can see that text on your screen (CSS in Stylesheet).
I know ... working on it. I did include a blog post with all the code, though :)
please record with larger text size, is hard to follow or see your text as you type. other than that it's a great tutorial, I've learned a ton from it, thank you
Trying to figure out the best way to do that because I need a lot of real estate for the oxygen builder and I'm on a 27" monitor.
@@Gearyco for the moment maybe before you type press ctrl++ (zoom in) a few times as you type so that its visible then when you are done typing and showing the changes bring the zoom back to 100%... idk that's what I've seen others do while teaching coding, well moving on, may I suggest you do a video about a correct styling of inner content of blog posts. I've been having difficulty changing my past template styles to this new oxygen styles since my blog had already been live with other template and styles. I can't figure out how to do it correctly.
@@SilentSlyProductions I've actually figured out a way to zoom in after the fact in Camtasia, so I'll work to fix this issue on future videos. Thanks! With styling inner content, you mean headings/text/etc. since they're all part of the same content block?
@@Gearyco yeah, like images added through Gutenberg, or blockquotes, styling lists, or the caption after adding images, and manipulating the spacing, and links and all that...
@@Gearyco @Digital Ambition been there done that but it takes forever. I try to record everything at 1920x1080 (regardless of my screen size) so things are as clear as possible across as many devices as possible. For tiny things you can use Camtasia's zoom feature but it you rely on it too much then your videos will take forever in post-production - which makes you not want to record more videos!
Why is it so difficult and not easy to use the gap? is similar and small code
A 1 column grid with a gap can be a great option in many cases, but not all cases.
@@Gearyco Why? and you have example?
@@Atractiondj for one, grid gap still only has 95% browser support. While it’s not a huge deal, margin is definitely safer.
Nice tutorial. But from the designer point of view, you need more types of spacing. I mean not only one spacing for whole card etc. You would like to have bigger margin below title, small margin below text etc.
That’s what margin bottom utility classes are for.
@@Gearyco And do you have a tutorial for that also?
Hey, didn't Monty Python do a feature on this?