Tutorial A Beginner's Guide To Classes

[Amerikia1126]

[div style="display: none;"].[/div] [div style="display: none;"].[/div] [div style="display: none;"].[/div] [class name=tutorialMain] max-width: 700px; margin: auto; background: rgba(250, 250, 250, .3); padding: 10px; border-radius: 5px; font-size: 11pt; font-family: 'Open Sans', Arial, sans-serif; [/class] [class name=tutorialTitle] display: inline; font-size: 18pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialHead] display: inline; font-size: 14pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubhead] display: inline; font-size: 12pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubSubhead] display: inline; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSidenote] display: inline; font-size: 10pt; [/class] [class name=tutorialIndent] display: inline-block; margin-left: 5px; [/class] [class name=inlineCode] display: inline; background: rgba(238, 238, 238, .3); padding: 2px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleBox] display: inline-block; background: rgba(171, 215, 229, .4); border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleInAction] display: inline-block; border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; [/class][div class=tutorialMain][div class=tutorialTitle]A Beginner's Guide to Classes[/div]
Any and all codes within this tutorial (including the tutorial itself) are free for use.

[div class=tutorialHead]Foreword[/div]
[div class=tutorialIndent]This is a tutorial that aims to explain the concept of classes, how to use them, and why you should use them. If you feel that any of these points were not achieved, feel free to leave a reply so I can amend that.

[div class=tutorialSidenote]The links above skip to the corresponding sections. Feel free to use them.[/div][/div][/div]

 

[Amerikia1126]

[div style="display: none;"].[/div] [div style="display: none;"].[/div] [div style="display: none;"].[/div] [class name=tutorialMain] max-width: 700px; margin: auto; background: rgba(250, 250, 250, .3); padding: 10px; border-radius: 5px; font-size: 11pt; font-family: 'Open Sans', Arial, sans-serif; [/class] [class name=tutorialTitle] display: inline; font-size: 18pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialHead] display: inline; font-size: 14pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubhead] display: inline; font-size: 12pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubSubhead] display: inline; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSidenote] display: inline; font-size: 10pt; [/class] [class name=tutorialIndent] display: inline-block; margin-left: 5px; [/class] [class name=inlineCode] display: inline; background: rgba(238, 238, 238, .3); padding: 2px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleBox] display: inline-block; background: rgba(171, 215, 229, .4); border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleInAction] display: inline-block; border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; [/class][div class=tutorialMain][div class=tutorialHead]The Concept of Classes[/div]
[div class=tutorialIndent]Let's say that divs are workers that will do whatever instructions you feed them. You can feed them straight instructions or you can give them a note telling them to go look in the instructions folder elsewhere in the room. They will then follow the instructions given to them no matter how it's given.

In non-analogy language, inline css is directly in the div and tells it to do things like change font color right then and there, and classes can do the exact same things that inline css does, but from a different place in the code. With small things like font color, the difference in how it's coded isn't too big.[/div]

[div class=exampleBox][div class=tutorialSubhead]inline css:[/div]
[div style="color: indigo;"]I am text.[/div]

[div class=tutorialSubhead]classes:[/div]
[class name=indigoText]color: indigo;[/class][div class=indigoText]I am text.[/div][/div]
[div class=exampleInAction][div class=tutorialSubhead]inline css:[/div]
[div style="color: indigo;"]I am text.[/div]
[div class=tutorialSubhead]classes:[/div]
[class name=indigoText]color: indigo;[/class][div class=indigoText]I am text.[/div][/div]

[div class=tutorialIndent]They both change the font color, and they both are about the same length. In fact, in this instance, the version of the code that uses classes is longer than the version that uses inline css. "So why should you use classes?", you may ask. Well, dear reader, I'll get to that, but first...[/div][/div]

 

[Amerikia1126]

[div style="display: none;"].[/div] [div style="display: none;"].[/div] [div style="display: none;"].[/div] [class name=tutorialMain] max-width: 700px; margin: auto; background: rgba(250, 250, 250, .3); padding: 10px; border-radius: 5px; font-size: 11pt; font-family: 'Open Sans', Arial, sans-serif; [/class] [class name=tutorialTitle] display: inline; font-size: 18pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialHead] display: inline; font-size: 14pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubhead] display: inline; font-size: 12pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubSubhead] display: inline; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSidenote] display: inline; font-size: 10pt; [/class] [class name=tutorialIndent] display: inline-block; margin-left: 5px; [/class] [class name=inlineCode] display: inline; background: rgba(238, 238, 238, .3); padding: 2px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleBox] display: inline-block; background: rgba(171, 215, 229, .4); border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleInAction] display: inline-block; border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; [/class][div class=tutorialMain][div class=tutorialHead]How to Use Classes[/div]
[div class=tutorialIndent]There are a few things you [div class=tutorialSubSubhead]have[/div] to do when using classes, and then there's a few things you [div class=tutorialSubSubhead]should[/div] do. First, the haves, then, the shoulds.[/div]

[div class=tutorialIndent][div class=tutorialSubhead]Haves[/div]
[div class=tutorialIndent]1. [div class=tutorialSubSubhead]Define the class.[/div] In order for a div to pull instructions from a class, it has to exist in the first place. This is done by using the [div class=inlineCode][class][/div] tag at any point throughout your code.

2. [div class=tutorialSubSubhead]Use the class.[/div] You have to tell the div to use the class or else it just sits there in your code taking up space. This is done by using the [div class=inlineCode][div class=][/div] tag when you would normally begin to use inline css.

[div class=tutorialSidenote]Further specifics on how these tags work can be found in the bbcode+ guide under the "classes" and "divs" tabs, respectively.[/div][/div][/div]

[div class=tutorialIndent][div class=tutorialSubhead]Shoulds[/div]
[div class=tutorialIndent]1. [div class=tutorialSubSubhead]Use descriptive class names.[/div] Trust me, your future self will thank you when you don't have to guess what "marshmallow" does and you can plainly see that "contentHeading" is the heading for the meat of the code.

2. [div class=tutorialSubSubhead]Stick with a naming scheme.[/div] For best effect, this should be used alongside the previous point, as figuring out whether you typed it as "contentHeading" or "contentheading" or "content_heading" is a giant pain. Find a way you like to type things and stick with it.

3. [div class=tutorialSubSubhead]Use the [div class=inlineCode][nobr][/div] tag.[/div] What does it do? It makes it so anytime you hit enter, it doesn't show outside of the text field. Why is this useful? You can space things out, making things neat and easy to navigate for yourself later.[/div][/div]

[div class=tutorialIndent]Now that we have that settled, let's make a box with a header using only classes.[/div]

[div class=exampleBox][nobr]
[class name=mainBox]
max-width: 400px;
background: rgba(238, 238, 238, .3);
border-radius: 20px;
padding: 20px;
font-size: 11pt;
[/class]

[class name=header]
display: inline;
font-size: 14pt;
letter-spacing: 1px;
[/class]
[/nobr]
[div class=mainBox][div class=header]Bigger Text[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis est turpis, gravida et nulla ut, convallis fringilla justo. Maecenas finibus volutpat tortor, eget sollicitudin sem dapibus quis.[/div][/div]
[div class=exampleInAction] [class name=mainBox] max-width: 400px; background: rgba(238, 238, 238, .3); border-radius: 20px; padding: 20px; font-size: 11pt; [/class] [class name=header] display: inline; font-size: 14pt; letter-spacing: 1px; [/class] [div class=mainBox][div class=header]Bigger Text[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis est turpis, gravida et nulla ut, convallis fringilla justo. Maecenas finibus volutpat tortor, eget sollicitudin sem dapibus quis.[/div][/div]

[div class=tutorialIndent][div class=tutorialSubSubhead]An explanation of the above code.[/div] First, the classes for "mainBox" and "header" were defined. These did not have to be first, they could have been at the end. However, for the purpose of this example, they were at the beginning. Next, the structure for the code was put into place using the [div class=inlineCode][div][/div] tags. Finally, the content of the code was placed inside the [div class=inlineCode][div][/div] tags as usual.[/div][/div]

 

[Amerikia1126]

[div style="display: none;"].[/div] [div style="display: none;"].[/div] [div style="display: none;"].[/div] [class name=tutorialMain] max-width: 700px; margin: auto; background: rgba(250, 250, 250, .3); padding: 10px; border-radius: 5px; font-size: 11pt; font-family: 'Open Sans', Arial, sans-serif; [/class] [class name=tutorialTitle] display: inline; font-size: 18pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialHead] display: inline; font-size: 14pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubhead] display: inline; font-size: 12pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubSubhead] display: inline; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSidenote] display: inline; font-size: 10pt; [/class] [class name=tutorialIndent] display: inline-block; margin-left: 5px; [/class] [class name=inlineCode] display: inline; background: rgba(238, 238, 238, .3); padding: 2px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleBox] display: inline-block; background: rgba(171, 215, 229, .4); border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleInAction] display: inline-block; border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; [/class][div class=tutorialMain][div class=tutorialHead]Why You Should Use Classes[/div]
[div class=tutorialIndent]"Classes and inline css both do the same thing", you may say, "so how could using classes be useful when you could just keep using inline css?"

Well, dear reader, besides for sake of convenience, you can do a lot of cool things with classes that you can't do with inline css. But first, convenience.[/div]

[div class=tutorialIndent][div class=tutorialSubhead]Convenience[/div]
[div class=tutorialIndent]Have you ever had a code where you made every heading have the same color only to decide you wanted to change the color, and then having to go back through and change every single one? Classes make it so you only have to change the color once and the change will apply to every instance of the class within your code. This is [div class=tutorialSubSubhead]extremely[/div] helpful in longer codes.[/div]

[div class=exampleBox][div class=tutorialSubhead]inline css:[/div]
[div style="display: inline; color: indigo;"]heading 1[/div]
lorem ipsum
[div style="display: inline; color: indigo;"]heading 2[/div]
lorem ipsum
[div style="display: inline; color: indigo;"]heading 3[/div]
lorem ipsum

[div class=tutorialSubhead]classes:[/div]
[nobr]
[class name=heading]
display: inline;
color: indigo;
[/class]
[/nobr]
[div class=heading]heading 1[/div]
lorem ipsum
[div class=heading]heading 2[/div]
lorem ipsum
[div class=heading]heading 3[/div]
lorem ipsum[/div]
[div class=exampleInAction][div class=tutorialSubhead]inline css:[/div]
[div style="display: inline; color: indigo;"]heading 1[/div]
lorem ipsum
[div style="display: inline; color: indigo;"]heading 2[/div]
lorem ipsum
[div style="display: inline; color: indigo;"]heading 3[/div]
lorem ipsum

[div class=tutorialSubhead]classes:[/div]
[class name=heading] display: inline; color: indigo; [/class] [div class=heading]heading 1[/div]
lorem ipsum
[div class=heading]heading 2[/div]
lorem ipsum
[div class=heading]heading 3[/div]
lorem ipsum[/div][/div]

[div class=tutorialIndent][div class=tutorialSubhead]Applying Multiple Classes[/div]
[div class=tutorialIndent]"Hey", you may say, "I thought you said [div class=tutorialSubSubhead]cool[/div] things." And that I did, dear reader, that I did. Multiple classes [div class=tutorialSubSubhead]are[/div] cool.. when used in conjunction with bbscript or really long codes. But! They're pretty handy on their own as well, if only for more convenience.[/div]

[div class=exampleBox][nobr]
[class name=inlineBackground]
display: inline;
background: rgba(238, 238, 238, .3);
border-radius: 5px;
[/class]

[class name=letterSpace]
letter-spacing: 2px;
[/class]
[/nobr]
[div class="inlineBackground letterSpace"]This is a line of text.[/div][/div]
[div class=exampleInAction] [class name=inlineBackground] display: inline; background: rgba(238, 238, 238, .3); border-radius: 5px; [/class] [class name=letterSpace] letter-spacing: 2px; [/class] [div class="inlineBackground letterSpace"]This is a line of text.[/div][/div]

[div class=tutorialIndent]The key to making multiple classes on one div work is those quotes. [div class=tutorialSubSubhead]They have to be double quotes.[/div] They can't be single quotes, they can't be no quotes, they have to be double quotes. (ie. ")[/div][/div]

[div class=tutorialIndent][div class=tutorialSubhead]BBScript[/div]
[div class=tutorialIndent]Now I won't be getting into the nitty gritty of bbscript here, but in order to use it, classes are needed. You can use it to make buttons, tabs, games... All kinds of things. Some examples of how far you can go with BBScript can be found here, here, and here.[/div][/div]

[div class=tutorialIndent][div class=tutorialSubhead]Hover Effects[/div]
[div class=tutorialIndent]Now this might interest a few of you. Basically what this is, is when you hover over something, things move or fade. Some examples of what you can do with hover effects can be found here, here, and here.

[div class=tutorialSubSubhead]A good tutorial of how to do hover effects already exists and can be found here.[/div]
[div class=tutorialSidenote]A few other class states that you could utilize besides hover are explained in the bbcode+ guide under the "classes" tab.[/div][/div][/div][/div]

 

[Amerikia1126]

[div style="display: none;"].[/div] [div style="display: none;"].[/div] [div style="display: none;"].[/div] [class name=tutorialMain] max-width: 700px; margin: auto; background: rgba(250, 250, 250, .3); padding: 10px; border-radius: 5px; font-size: 11pt; font-family: 'Open Sans', Arial, sans-serif; [/class] [class name=tutorialTitle] display: inline; font-size: 18pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialHead] display: inline; font-size: 14pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubhead] display: inline; font-size: 12pt; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSubSubhead] display: inline; font-family: 'Roboto', Georgia, serif; [/class] [class name=tutorialSidenote] display: inline; font-size: 10pt; [/class] [class name=tutorialIndent] display: inline-block; margin-left: 5px; [/class] [class name=inlineCode] display: inline; background: rgba(238, 238, 238, .3); padding: 2px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleBox] display: inline-block; background: rgba(171, 215, 229, .4); border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; font-family: 'Rockitt', 'Courier New', serif; [/class] [class name=exampleInAction] display: inline-block; border-left: 3px solid rgb(42, 114, 137); padding: 5px; margin-left: 5px; max-width: 500px; [/class][div class=tutorialMain][div class=tutorialHead]Postscript[/div]
[div class=tutorialIndent]That's about all you need to get a good grasp of classes. Again, if you feel any of the three goals of this guide were not achieved (explaining classes, how to use classes, and why classes should be used), leave a reply so this guide can be updated to be more helpful.

[div class=tutorialSidenote]Have a nice day. c:[/div][/div][/div]