This is my code thread! Some of it will be very bad. Some of it might be neat! I practice a lot. I try to learn one new thing at a time, and then put them all together. You're welcome to try to read my thread!
However, please ask before using any specific codes. If it's something like "Oh, that's how 'grid' works!" and you want to use it and make it your own, by all means feel free - but if it's a specific style sheet I've put up, I'm probably planning to use it for something. I'll probably put up some free-for-all sheet codes later for anyone to use.
So, the good news is some thing still work. You need to use "div style" anywhere that you would have used div. Inside the div, though, a lot of the stuff is the same.
background-color changes the background color. Hex code or color name works
padding adjusts the space between the outside of the div and where the next thing inside is going to be.
margin adjusts the space just outside the div.
You can use padding-left, padding-right, padding-top, padding-bottom, margin-left,margin-right,margin-top, and margin-bottom if you want a little more control.
border adjusts the border. Use a width (in pixels, usually "1px" or "4px" or something), a color (hex color), and "solid" "dotted" "dashed" "inset" or "outset."
color adjusts the text color. You seem to need to use hex color here.
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Tables are not grids, but we are getting closer.
Edit: Very interesting! The ugly midlines go away when you hit submit! That is very good!
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
With the code we have right now, there are two different options for getting things into tidy little boxes. Those two options are grids and tables. For those of you looking for solutions for columns, columns are simply a grid or a table with only one row, so you will be able to use all of this information for your needs.
First, let's discuss Grids versus Tables.
For both grids and tables, you can apply other styles to each element inside the grid or table - meaning each little box can have its own div. You can also put grids inside of grids, tables inside of tables, tables inside of grids, and grids inside of tables. Neither one seems to have any nesting limit that I have found, meaning that you can go as far down as you really care to.
Grids are a lot easier to adapt. They're much more flexible, there are a lot more options available for each element, and it's easy to set and change things. Further, you can put your grid code in any order you like within the box, meaning you don't have to list things in order - so if you want to have a grid border surrounding a large main box, you can actually put that large main box as the last part of your code - meaning that you can use it easily for the forum's option to use a default code on all your posts.
Tables are a little easier to set up if you don't care about the details. If all you want is something very basic, tables are simpler, but they are much harder to make precise. There are also some finicky elements hard-coded in to tables that need to be compensated for when you're doing more advanced code. Each table element is going to appear in the order you write it, which means that you can't change it up the way you can with grid, and table is often not good for default code. In almost every case, grids tend to be superior... but tables work on mobile, and grids don't. If the rest of your elements aren't going to work on mobile anyway, that's not a big deal, but if you want to create a mobile friendly format, you'll probably want to opt in to tables at this point. Future forum updates may change that.
You may find that you prefer one of the other, or that one works better for one design you have in mind and the other is better for something else. I'll try to go through a guide for both here. While I don't think it'll be as in depth as the old forum's grid guide (I'm trying to get this up this weekend), it should be something that at least covers the basics of each.
Sections: Grids Tables (Basic) Tables (Advanced)
Grids
Grids are defined using the attr="style" tag. Again, keep in mind that this means that they are not going to work on mobile. You're going to start by defining a grid area. You can either use display:grid or display:inline-grid. Using the basic grid option will cut out a new block for your work, using inline-grid means that the grid will be inline with your other work.
Everything else is identical to the one above. Remember if you put in a line break it will not be inline, you have to start the code on the same line as the text.
The beginning of your code, to this point, is going to look something like
[div][attr="style","display:grid;"]
This sets things up and tells the code that there is going to be a grid here. Now we need to define what the grid looks like. We're going to look at grid-template-areas, grid-template-columns, and grid-template-rows. These steps can be done in any order. When I code, I often define row and column sizing first and then name my areas. For this guide, I will define areas first, because that's a setup stage rather than a style stage.
With that, we move to grid-template-areas. This is the code that we use to define each area of the grid. If you think of a grid as a set of boxes, the grid-template-areas code is what identifies each box. In this first stage, we are setting up how many boxes there are, what their orientation is (how many rows and how many columns), and what we're going to call them.
Those familiar with grids on the old RPF will remember using escape quotes (/") to define these areas. On this site, escape quotes are not used any more. Instead, we use a single quote ('). Keep in mind that just like on the old site, angled quotes don't work, so if you have a device that defaults to angled quotes, you'll need to copy and paste all the quote marks or find another workaround, or your code isn't going to work.
When we set up our areas, we use single quotes around everything we want to be on a row, with spaces between each element. Each new row is set up with new quotes. You'll have something like 'TopLeft TopMiddle TopRight' 'BottomLeft BottomMiddle BottomRight' in your code that defines your areas. For what I just wrote, we would end up with a 3x2 grid - 3 columns, 2 rows. It looks like this:
You can label your areas as whatever you like to call them. However, keep in mind that when you call back to them, you will need to reference them exactly. The grid considers 'TopLeft' and 'topleft' to be different. Capitalization matters. Also remember not to put a space in the name of any specific element: 'Top Left' is going to count as two boxes in the grid, not one.
If you wish, you can choose to have only one row (this is just columns) or only one column (a stack). You do not need to have more than one row, or more than one column. Technically, you could even have just one row and just one column, in which case it would be a single box and you would have done a whole lot of extra work you didn't need to do.
At this point, your code is going to look something like:
I've taken out the brackets that make it work because the site does not parse this well at all and it actually messes up the formatting on the entire guide. I may come back to this point later, for now, if you're reading this you probably know how to put the brackets in.
So far, we have defined that there will be a grid, and what the grid setup is going to be. Now we're going to move on to grid-template-columns and grid-template-rows. These are used to define the specific size of each portion of the grid - either absolutely or relative to other things. A really important thing to note about these two code elements is that they are not necessary. You can leave them out if you do not wish to define something specifically.
Since both of these work the same way, I will discuss them together. The first thing we need to know is how we are going to define things. Our options are to define them in terms of pixels (px), percentages (%), fractions (fr) and auto.
Pixels are used when you want the size of a particular grid element to be exactly a certain number of pixels. If I want a grid element to be exactly 50 pixels wide, I would use 50px as the size. That looks like this:
Percentages are used when you want the size of a particular element to be a certain percent of the space available, respective to the viewer screen. If I want part of a grid to take up exactly 68% of the space in the defined area on anyone’s screen, I would use 68% as the size.
In this example, I have the first column set to 20% and the second set to 68%.
Fractions are used when you want the sizes of particular elements to be a certain size with respect to each other. If I want one element to be twice the size of the next, I would use 2fr 1fr as the size.
Auto is used when you’ve defined everything else and you just want what’s left to take up the remaining size. Instead of using a wide pixel value, it’s usually better to use auto for the main element, because then it just takes up whatever space is available. Using a large defined element often doesn't play nice with various screen sizes. 50px auto will have one element of 50 pixels a and then the next element will take up whatever’s left.
Note that this last one is an example of 4 columns, but only one row.
Remember, you can also leave the values undefined. If you leave the width undefined, your grid will automatically make it whatever it needs to be so that the height remains constant. In order to do this, simply omit the grid-template-columns element from your code. If you leave the height undefined it will just take up as much room as the stuff inside needs.
That takes care of our setup phase. One thing to keep in mind is that you can also define any div elements right there, too, so if you want the whole table to be blue or have a pink border or something, you can stick that in there too, just like you would with any other div.
Now that we have our areas set up, we move on to defining each individual area. This is going to be done using grid-area:AreaName. Remember when we were setting up grid-template-areas earlier? This is the stage where we're going to call back to those. Again, one more reminder that you must have the names exact and identical - a capitalization error can make the whole thing break.
Honestly, this is the simplest part. You just call your area, and then apply any specific code you want to have for that area. In my examples above, I have been applying a background-color code, so my code looks something like [fontcolor=blue]grid-area:TopLeft;background-color:#0000FF;[/font]. This is repeated for each element of the code. You can also nest other divs inside each one of these codes if you want to get fancy.
Use your standard brackets instead of curly brackets: Again, 'code' and 'noparse' don't work right here, so I've used a workaround. Remember to make sure you have an extra /div after the last element to close out the grid itself, and you can move on to other things.
In their most basic form, tables are fairly simple to use. Their weakness is that in order to do more than the basics, they get a lot more finicky than grids, requiring quite a good deal of extra coding. In this section, we'll just be looking at the basics.
For this entire section, replace {} with [] as needed.
To open a table, you use the code {table}. This tells the site that you are starting a table. You do not need to define any elements here in a setup phase, they are all defined in later code dependent on where the code is placed. Unlike grids, you cannot write your table in any order - how you write it is going to be exactly how it comes out. You can use style elements here, this will be expanded on in the Advanced section.
Next, open with {tbody}. This opens the body of the table.
Use {tr} to define each table row. Close each row with {/tr} when you are all done with the entire row.
Use {td} to define each table doohickey, the individual cells of the table. It is possible that this actually stands for something else like 'table division' or something like that, but let's be honest, you're going to be thinking of it as 'table doohickey' from here on out anyway. Use {/td} to close each doohickey.
Again, when you're all done with the {td}s on a row, use {/tr} to close out the row. You can then start another row with a new {tr}. When you are all done, use {/tbody} to close the body of the table and {/table} to close the table itself.
You can also just use the {table} button in the editor.
What if you want a border around each element? What if you want a border around the whole thing? What if you want to change each element? That's where we start using the style tag. You can add that after any element: tbody style, tr style, td style. Using a simple td style="border:1px #0000FF solid" for each {td} element gives us
Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
If we wanted a border around each row but not the individual element, we could use tr style="border:1px #FF0000 solid" as here:
Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
And if we wanted a border around the whole table itself, we could use tbody style="border:1px #00FF00 solid;" as here:
Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
That pretty much covers the basic use of tables. You can use any div styles that you want on these elements, but if you're going to try to make them really fancy, I strongly suggest reading the Advanced section first.
Tables - Advanced Tables automatically add in a 3px padding to every single element and if you do not want this you must manually set padding:0px in every single element because table code is bad and it hates precision.