Post by Reyn on Jun 12, 2022 18:01:48 GMT
Heads up- this guide uses images instead of code blocks, since having multiple code blocks in the same post likes to break them. There will only be one code block in this post, and it will be right at the end, so that's what you can copy/paste. Sorry!
It's also UNFINISHED!
For the purposes of this guide, I'm going to be assuming that you already know what div is, and know at least some of its functions. You don't have to be an expert to understand all of this; it's not like div 2 or anything, it's just a different way of looking at and laying out your code.
What is newclass?
So. What's all this then? The way you're probably used to div on this site (div style/div attr style) is pretty similar to inline styling. Basically, it means that, if you want something to look a certain way, you have to type the code out in full every time you want to use it, even if multiple elements share the same formatting. Whilst this does work perfectly well, it can make code-heavy things like sheets a bit of a nightmare to edit, since you have to sift through a lot of code to find what you need.
Newclass can solve a lot of these problems with div style. It allows you to put all your code in one place, and the only thing you have to declare inline is the class names, freeing up a lot of space and making it much easier to find and edit the text in your post. It also allows you to use the same class multiple times in a post, meaning that you don't have to copy and paste the same code multiple times, just the class name. There are also a few cool things that you can only do with newclass and not with div style, such as custom scrollbars, link styling, hover states, and more.
Also, if you're having troubles with a piece of code that's used multiple times throughout the sheet, you only have to edit the newclass declaration part once, rather than having to edit every instance of it. Very useful if you love making mistakes.
How do I use it?
Short answer, this image.
Long answer, you basically take the formatting part of your usual div code (the part after the "style",") and stick that between newclass tags. This on its own will not produce any visible results; in order to get it to display, you then need to call the class, like so:
[newclass=.CoolClass]background-color:red;color:yellow;border:1px solid blue;[/newclass]
Now, this doesn't look as space-efficient as style, but that's because we've only used CoolClass once. We can actually use CoolClass as many times as we want throughout the code, which will apply the CoolClass formatting every time, without us having to copy and paste it multiple times. Like with style, you can nest classes as well:
[newclass=.CoolTitle]font-size:200%;[/newclass]
And that's... pretty much it for the basics. Just use it as you would use normal div- it all works fine.
Anything I need to know before I start?
As cool as Newclass is, I would advise against using it for post code, since having multiple posts on the same page by the same user with the same class names can mess up the formatting.
Also, I would strongly recommend using the "nospaces" tag so you can keep your code on different lines, otherwise it gets really messy really fast. Whenever you want a line break to appear in the text of your post, just stick on a "break" tag. (Replace the quotemarks with square brackets lmao)
What are these exclusive features you're talking about?
There are certain things you can do with newclass that you can't do with normal div, mostly involving things called selectors. You can read more about selectors here, but keep in mind that the vast majority of them will not work with RPF. This guide will go over the ones which do, and what you can do with them. Keep in mind that anything involving webkit will not work in firefox.
Link Styling:
I FORGOT I HAVE TO EXPLAIN THIS ONE BEFORE HOVERS?
Hovers:
You can make any element, not just links, change state when hovered over (or tapped on mobile). To do this, you need to make two newclasses with the same name: one for how the class should appear normally, and another for how it should change when hovered over. Then, add a :hover immediately after the class name in that second newclass.
[newclass=.CoolClass2]background-color:red;color:yellow;border:1px solid blue;[/newclass]
[newclass=.CoolClass2:hover]background-color:yellow;color:blue;border:1px solid red;[/newclass]
You can also make any child divs of a parent div change when the parent div is hovered over.
[newclass=.CoolTitle2]font-size:200%;[/newclass]
[newclass=.CoolClass2:hover .CoolTitle2]color:red;[/newclass]
Custom Scrollbars:
ACTUALLY THEYRE ALL COMING SOON
Animations:
SORRY
Any other tips?
If you're using newclass and grid, try to use different names for them, otherwise it can get confusing. Same goes with var. The naming convention I personally use is to have all my newclass names in PascalCase (LikeThis), my grid names in UPPERCASE, and my var names in lowercase. Your mileage may vary, but it helps me to differentiate them.
If you want to get started with newclass but starting a new project from scratch is too daunting, I recommend taking a simple piece of code that you've already done in div style, and trying to make it newclass. You could either edit the original code and swap things out, or you could rewrite it from scratch- whatever works for you.
It's also UNFINISHED!
For the purposes of this guide, I'm going to be assuming that you already know what div is, and know at least some of its functions. You don't have to be an expert to understand all of this; it's not like div 2 or anything, it's just a different way of looking at and laying out your code.
What is newclass?
So. What's all this then? The way you're probably used to div on this site (div style/div attr style) is pretty similar to inline styling. Basically, it means that, if you want something to look a certain way, you have to type the code out in full every time you want to use it, even if multiple elements share the same formatting. Whilst this does work perfectly well, it can make code-heavy things like sheets a bit of a nightmare to edit, since you have to sift through a lot of code to find what you need.
Newclass can solve a lot of these problems with div style. It allows you to put all your code in one place, and the only thing you have to declare inline is the class names, freeing up a lot of space and making it much easier to find and edit the text in your post. It also allows you to use the same class multiple times in a post, meaning that you don't have to copy and paste the same code multiple times, just the class name. There are also a few cool things that you can only do with newclass and not with div style, such as custom scrollbars, link styling, hover states, and more.
Also, if you're having troubles with a piece of code that's used multiple times throughout the sheet, you only have to edit the newclass declaration part once, rather than having to edit every instance of it. Very useful if you love making mistakes.
How do I use it?
Short answer, this image.
Long answer, you basically take the formatting part of your usual div code (the part after the "style",") and stick that between newclass tags. This on its own will not produce any visible results; in order to get it to display, you then need to call the class, like so:
[newclass=.CoolClass]background-color:red;color:yellow;border:1px solid blue;[/newclass]
[attr="class",CoolClass]Awesome Content
Now, this doesn't look as space-efficient as style, but that's because we've only used CoolClass once. We can actually use CoolClass as many times as we want throughout the code, which will apply the CoolClass formatting every time, without us having to copy and paste it multiple times. Like with style, you can nest classes as well:
[newclass=.CoolTitle]font-size:200%;[/newclass]
[attr="class",CoolClass]Awesome Content
[attr="class",CoolClass]
Awesome Content
[attr="class",CoolTitle]Awesome Title
Awesome Content
And that's... pretty much it for the basics. Just use it as you would use normal div- it all works fine.
Anything I need to know before I start?
As cool as Newclass is, I would advise against using it for post code, since having multiple posts on the same page by the same user with the same class names can mess up the formatting.
Also, I would strongly recommend using the "nospaces" tag so you can keep your code on different lines, otherwise it gets really messy really fast. Whenever you want a line break to appear in the text of your post, just stick on a "break" tag. (Replace the quotemarks with square brackets lmao)
What are these exclusive features you're talking about?
There are certain things you can do with newclass that you can't do with normal div, mostly involving things called selectors. You can read more about selectors here, but keep in mind that the vast majority of them will not work with RPF. This guide will go over the ones which do, and what you can do with them. Keep in mind that anything involving webkit will not work in firefox.
Link Styling:
I FORGOT I HAVE TO EXPLAIN THIS ONE BEFORE HOVERS?
Hovers:
You can make any element, not just links, change state when hovered over (or tapped on mobile). To do this, you need to make two newclasses with the same name: one for how the class should appear normally, and another for how it should change when hovered over. Then, add a :hover immediately after the class name in that second newclass.
[newclass=.CoolClass2]background-color:red;color:yellow;border:1px solid blue;[/newclass]
[newclass=.CoolClass2:hover]background-color:yellow;color:blue;border:1px solid red;[/newclass]
[attr="class",CoolClass2]Awesome Hover
You can also make any child divs of a parent div change when the parent div is hovered over.
[newclass=.CoolTitle2]font-size:200%;[/newclass]
[newclass=.CoolClass2:hover .CoolTitle2]color:red;[/newclass]
[attr="class",CoolClass2]
Awesome Hover
[attr="class",CoolTitle2]Awesome Hover Title
Awesome Hover
Custom Scrollbars:
ACTUALLY THEYRE ALL COMING SOON
Animations:
SORRY
Any other tips?
If you're using newclass and grid, try to use different names for them, otherwise it can get confusing. Same goes with var. The naming convention I personally use is to have all my newclass names in PascalCase (LikeThis), my grid names in UPPERCASE, and my var names in lowercase. Your mileage may vary, but it helps me to differentiate them.
If you want to get started with newclass but starting a new project from scratch is too daunting, I recommend taking a simple piece of code that you've already done in div style, and trying to make it newclass. You could either edit the original code and swap things out, or you could rewrite it from scratch- whatever works for you.