Click to open network menu
Join or Log In
Mobafire logo

Join the leading League of Legends community. Create and share Champion Guides and Builds.

Create an MFN Account






Or

Not Updated For Current Season

This guide has not yet been updated for the current season. Please keep this in mind while reading. You can see the most recently updated guides on the browse guides page

x

Responsive columns

Responsive columns

Updated on August 23, 2021
9.4
16
Votes
0
Vote Vote
League of Legends Build Guide Author Katasandra Build Guide By Katasandra 16 0 101,099 Views 10 Comments
16 0 101,099 Views 10 Comments League of Legends Build Guide Author Katasandra Build Guide By Katasandra Updated on August 23, 2021
x
Did this guide help you? If so please give them a vote or leave a comment. You can even win prizes by doing so!
Vote
Comment

You must be logged in to comment. Please login or register.

I liked this Guide
I didn't like this Guide
Commenting is required to vote!
Would you like to add a comment to your vote?

Your votes and comments encourage our guide authors to continue
creating helpful guides for the League of Legends community.

Responsive columns
I am Katasandra, a moderator and guide writer on this lovely site. Several of my works are dedicated to teaching other people to code and write guides. It's my hope to help people improve their guides and enable them to make their guide dreams come true. Coding a guide with no prior knowledge is a daunting task. I have been there too, the road was long and tedious, but I got there!
This guide is on a wondrous type of code called responsive columns. These are very similar to tables and columns, as they all give you the ability to format your guide. They are also used to add color and style to guides, so they become easier to read and more attractive to the eye. To make my life a little easier, and yours a little less confusing I'll be calling responsive columns "responsives" throughout the rest of this guide. This way you cannot confuse them with normal columns.

In this guide I'll be talking about some of the advantages and disadvantages of responsives over tables and columns. This way you can decide whether to use them, or to use something else. And it's also a good explanation as to why you should even use them in the first place.

Then it's time to explain how they work I'll try to do it slowly and nicely, with plenty of examples. I rely on you my reader to call me out when I go too slow, or too fast. Please comment about your experience so I can improve things.

Once the we know how they work, it's time to go more in-depth in their properties. One example of a property are the borders you see around the text here, but the space between the text and the border is actually a property too! Where the responsives are the walls and foundation of the house, the properties are the roofs, the doors, the paint on the walls, and so on.

Some examples are necessary, so there is a chapter that's a mix of design ideas and templates and how to make variations of them using different properties. So basically a chapter on how to use code. Again, this chapter will heavily rely on the feedback I am getting, so don't be afraid to comment!

Last but not least, I'll touch a bit on mobile-friendly coding. It's a couple of tips & examples, I had trouble finding something substantial to say. Perhaps I'll expand on it in the future to explain the process a bit more.

Without further ado, let's get into it!
Pros & Cons
+
The tags make sense. Responsives are formed using [row] and [col], opposed to tables' [tr] and [td]. I don't know about you, but that's a lot more intuitive to me. This makes it much easier to understand what these tags actually do compared to tables.
+
They are easy to format with. It's not as easy as formatting with columns, but slightly easier than tables. Tables are quite rigid and are locked into one structure, whereas responsives can move around freely. Therefore formatting with tables is a bit harder if you don't quite understand them.
+
Responsives allow for mobile friendly formatting. Tables and columns do not necessarily look good on mobile (sometimes they do though!). However with responsives you can create slightly different experiences for PC and mobile.
-
Can be hard to control. With tables you can specify exactly what needs to be where. But because responsives can move around freely, it's harder to make them do what you want them to do. It's like trying to catch a slippery eel sometimes.
-
Formatting for both PC & mobile introduces formatting restrictions. If you have a specific picture in mind for what your guide should look like on PC & mobile you might be disappointed. You'll often have to tweak things to make your guide look presentable on both ...
How do they work?
Before investigating how responsives work, we need to know how to make a responsive. They are build up from the following building blocks: [responsive], [row] and [col]. The colors will be important for later, when I start using examples. I'll quickly introduce these, then cover them a little more in-depth.

[responsive] tells the site to make a responsive. However you can't put content in it yet. You'll first have to 'tell' the responsive to create a row using the [row] tag. You can't put any content in this either, you'll have to 'tell' the row to create something where you can (finally) put your stuff in: a column. This is done by adding [col] to the code.

So can you create a responsive with [responsive][row][col]?

Unfortunately no, this isn't the whole story. Half the code is still missing. The editor also needs to know when to end the column, the row and the responsive. If you don't close them it gets confused and can start doing weird things such as copying text or moving it in weird places. Luckily for us, this 'closing' code is very similar to the code we use to create everything: an / is added in front of the text within the tag. I call these 'closing tags': [/responsive][/row][/col].

These closing tags need to be put in the correct order. They act like a stack of plates: you need to take the last plate you've placed first. Then you proceed to pick up all the plates, until you can finally pick up the first plate you placed.
Tldr; the correct order of the closing tags is reversed to the order in which you've opened them: [/col][/row][/responsive].
Now it's finally time to create our first responsive! Let's put some text in it as well so we can play with it too:
[responsive]
[row]
[col]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
This doesn't look very impressive, it doesn't look like anything is there at all! So I'm going to cut ahead in line and make things visible by adding some properties. I'll be adding a border (with a color corresponding to the tags) and some padding. This extra code (border="1px solid #9321d0" padding=5px) may look a bit intimidating, but try to ignore it. We're not going to do anything with it, it's just to make things visible! New code:
[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
This is already a lot more insightful! You can see that the responsive and the row within cover the whole page, while the column stays tiny.
Adding more columns

Now, let's add two more columns. This is done by adding two more [col][/col] tags right after the first one, within the row tags.
[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
More texty text
Final bit of texty text
Adding more rows

Alternatively, we can also add an extra row by adding a [row][/row]. This has to be added right after the first [row][/row] and we'll also have to put new [col][/col] in this row so we can add content.
[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[/row]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]New row of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
New row of texty text
'Overflowing' row

We're almost done, but there is a 'mechanic' I still need to tell you about. This is based on the following question: What if we add a lot of text to one of the three columns from the responsive in the "adding more columns" part?. Let's go ahead and do that:
[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
The final bit of texty text
The result is that the "final bit of texty text" doesn't fit next to the other two columns anymore and shifts down. When columns do not fit next to each other they will shift beneath each other. They will try to be as large as possible on their own to fit the content within (the maximum is the width of the row they're in). If that happens to not fit next to another column, then it will shift down. So if we increase the amount of "filler", then the second column will also shift down:
[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
The final bit of texty text
But this acts awfully similar to creating new rows! This is where the formatting becomes 'easy': You can kind of 'forget' about rows and everything will still work! This is different than with tables, if you forget the rows there then you get some kind of weird squashed mess that doesn't look very good. Of course, using rows is better most of the time. Sometimes they are needed to format your code and they make it easier to work with your code.
Properties
Now it's time to get into properties. With these you can style responsives and make them do what you want. Not all properties can be added to all tags, there are some that can be added to all three, I call these 'hybrid' tags. But also some that can only be added to [row] tags and also some that can only be added to [col] tags.
Hybrid tags

Width
Kicking off with the most important property of all: width determines the width of the column/row/responsive it is added to.

[responsive border="1px solid #30a7e9" padding=5px width=80%]
[row border="1px solid #9321d0" padding=5px width=70%]
[col border="1px solid #c68f1a" padding=5px width=20%]aaa[/col]
[col border="1px solid #c68f1a" padding=5px width=50px]bbb[/col]
[col border="1px solid #c68f1a" padding=5px width=25%]ccc[/col]
[/row]
[/responsive]
becomes
aaa
bbb
ccc

As you can see, you can either give an absolute width (50px) or a relative width (70%). Adding an absolute width is handy if you have content with a certain size in a cell (such as images or icons). It's often the better way if you want to be precise or want content to be placed in a very specific place.

Relative width is the width relative to the maximum possible width of the thing you're adding it to. This may sound very odd, but look at the example above: the responsive width is 80% of the width of the outer envelope, the row width is 70% of the responsive width and the column widths are relative to the row width!

If you want to do things quickly, but not super precisely, then relative width is the way to go. All you have to do is look whether the sum of the percentages of the things you want on one line do not go over 100%.
99% of the time, you only have to add width to the [col]. Although it is possible to add widths to the [row] and [responsive] tags as well, most of the time it isn't that useful.

Width also has a nephew: max-width. This property does exactly the same as width, however there are two differences: it only works on [col] tags and if the content of the column has a smaller width than the column, the column will become thinner till the widths of the content and the column match.

[responsive border="1px solid #30a7e9" padding=5px width=80%]
[row border="1px solid #9321d0" padding=5px width=70%]
[col border="1px solid #c68f1a" padding=5px max-width=20%]aaa[/col]
[col border="1px solid #c68f1a" padding=5px width=50px]bbb[/col]
[col border="1px solid #c68f1a" padding=5px width=25%]ccc[/col]
[/row]
[/responsive]
becomes
aaa
bbb
ccc

As you can see, instead of having a width of 20% the 1st column resizes to fit the content. If you add content it will eventually reach it's maximum width, as defined by max-width:

[responsive border="1px solid #30a7e9" padding=5px width=80%]
[row border="1px solid #9321d0" padding=5px width=70%]
[col border="1px solid #c68f1a" padding=5px max-width=20%]aaa aaa aaa aaa[/col]
[col border="1px solid #c68f1a" padding=5px width=50px]bbb[/col]
[col border="1px solid #c68f1a" padding=5px width=25%]ccc[/col]
[/row]
[/responsive]
becomes
aaa aaa aaa aaa
bbb
ccc
Height
Height does the same thing as width, but in the vertical direction. Again, it can be defined absolutely (40px) or relatively (50%).

[responsive border="1px solid #30a7e9" padding=5px height=100]
[row order="1px solid #9321d0" padding=5px]
[col border="1px solid #c68f1a" padding=5px]aaa aaa aaa aaa[/col]
[col border="1px solid #c68f1a" padding=5px height=50%]bbb[/col]
[col border="1px solid #c68f1a" padding=5px height=40px]ccc[/col]
[/row]
[/responsive]
becomes
aaa aaa aaa aaa
bbb
ccc

I pretty much only use it to create space between elements in my code. I create an empty row, add a height and continue the code:

[responsive]
[row]
[col border="1px solid #c68f1a" padding=5px]Hello 1![/col]
[/row]
[row height=20][/row]
[row]
[col border="1px solid #c68f1a" padding=5px]Hello 2![/col]
[/row]
[/responsive]
becomes
Hello 1!
Hello 2!
The same effect can also be achieved using padding & margin.
Bgcolor
This is a super straightforward property, it gives a background color to the object you added it to:

[responsive padding=5px bgcolor=#30a7e9]
[row padding=5px bgcolor=#9321d0"]
[col padding=5px bgcolor=#c68f1a]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
Border
With border you can add borders to the responsive, row or column. This is basically what I've been doing the whole time to make things visible. However it is a bit more complicated than the other properties since you need to add three variables so it knows what to do. The format is border="thickness style color". Improper use of the format will result no border at all.

Thickness must be an absolute width. Relative widths won't work with borders.
[responsive border="5px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px]
[col border="10px solid #c68f1a" padding=5px]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text

Style must be one of the following:
Dotted
Dashed
Solid
Double
Ridge
Groove
Inset
Outset
Finally, color has to be a hex code or a BBCode color. A list of BBCode colors can be found here.
Border-radius
Border-radius is used to make the edges of the border curvy. This once again must be done in terms of absolute values (px).
[responsive border="5px solid #30a7e9" padding=5px border-radius=100px]
[row border="2px solid #9321d0" padding=5px]
[col border="10px solid #c68f1a" padding=5px border-radius=10px]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
There's two things to take away from this: 1. If you make an outer border very curvy it can go right through one of the inner borders. This is also happens when trying to make curvy borders around icons so beware of that. 2. If you make the border-radius very large it'll form a half-circle. Once that happens, making it even larger does nothing. If the width and height of the column match, you can make a circle border this way:

[responsive]
[row]
[col border="2px solid #c68f1a" padding=5px border-radius=100px][/col]
[/row]
[/responsive]
becomes
It's also possible to set the border-radius for each corner seperately. This is done using the following syntax: border-radius="top-left top-right bottom-right bottom-left".

[responsive]
[row]
[col border="2px solid #c68f1a" padding=5px width=50 height=50 border-radius="10px 25px 50px 100px"][/col]
[/row]
[/responsive]
becomes
Padding
Padding is an extremely important property that has to be utilized whenever you add borders or background colors to your responsives. Padding sets the distance between the edge of the responsive/row/column and its contents. To see the impact of padding, I'll show you the responsives from the background color and border explanations without padding.

original

[responsive bgcolor=#30a7e9]
[row bgcolor=#9321d0"]
[col bgcolor=#c68f1a]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
and

[responsive border="5px solid #30a7e9"]
[row border="1px solid #9321d0"]
[col border="10px solid #c68f1a"]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
Again, only absolute values are accepted. Padding can make quite a difference depending on the situation. It's use is almost mandatory when utilizing borders and background colors. You need space between content and borders so that things become easier to read. Values between 5px to 15px tend to do the trick in the majority of cases.

Much like border-radius, it is possible to set the padding of the individual sides separately. The syntax for this is almost the same: padding="top right bottom left". An example:

[responsive border="1px solid #30a7e9" padding="0px 10px 0px 10px"]
[row border="1px solid #9321d0" padding="10px 0px 10px 0px"]
[col border="1px solid #c68f1a" padding="0px 15px 30px 100px"]A lot of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
Margin
I found this property the day I wanted to release this guide and it is very useful indeed. It's basically padding, but outside the borders of the responsive/row/column.
[responsive border="1px solid #30a7e9" padding=5px]
[row border="1px solid #9321d0" padding=5px margin=5px]
[col border="1px solid #c68f1a" padding=5px margin=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px margin=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px margin=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
More texty text
The final bit of texty text

As you can see, I removed the padding from the [responsive] tag, but due to the margin property inside the [row] tag, there is still space between the outer border of the responsive and the row!

Similar to padding, margin can be defined for each side individually (Syntax margin="top right bottom left"):
[responsive border="1px solid #30a7e9"]
[row border="1px solid #9321d0" padding=5px margin="0px 15px 30px 50px"]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
More texty text
The final bit of texty text

You won't be seeing too much of this property in this guide (as I 'found' it after finishing this guide...). It's in some templates here and there (To be exact: template 4, TOC with dots and the mobile friendly version of template 8).
Row tags
Row tags are all about the alignment of columns within a row and determining how columns should behave. Although not necessary, row tags can make alignment very easy.

Justify-content
Justify-content is a row property I use in all of my responsives. Justify-content controls the horizontal spacing of the columns in a row. An easy example are all the table of contents you see throughout this guide (most notably, the one right above!). For example:
[responsive]
[row border="1px solid #9321d0" padding=5px justify-content=center]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
More texty text
Final bit of texty text

The following alignments are available:

Flex-start (default)
A lot of texty text
More texty text
Final bit of texty text
Flex-end
A lot of texty text
More texty text
Final bit of texty text
Center
A lot of texty text
More texty text
Final bit of texty text
Space-between
A lot of texty text
More texty text
Final bit of texty text
Space-around
A lot of texty text
More texty text
Final bit of texty text
Space-evenly
A lot of texty text
More texty text
Final bit of texty text
Align-items
Align-items is very similar to justify-content, but instead is all about the vertical alignment of the columns.
[responsive]
[row border="1px solid #9321d0" padding=5px align-items=center]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text


[/col]
[col border="1px solid #c68f1a" padding=5px]


More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text



More texty text
The final bit of texty text

The following alignments are available:

Flex-start (default)
A lot of texty text



More texty text
The final bit of texty text
Flex-end
A lot of texty text



More texty text
The final bit of texty text
Stretch
A lot of texty text



More texty text
The final bit of texty text
Center
A lot of texty text



More texty text
The final bit of texty text
Flex-direction
This property determines the direction in which the columns will place themselves. By default they fill in rows from left to right, but this can be changed using flex-direction. The usefulness of this property is quite limited in my opinion, and so far I haven't found a good use for this.
[responsive]
[row border="1px solid #9321d0" padding=5px flex-direction=column]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
More texty text
Final bit of texty text

The following options are available:
Row (default)
A lot of texty text
More texty text
Final bit of texty text
Row-reverse
A lot of texty text
More texty text
Final bit of texty text
Column
A lot of texty text
More texty text
Final bit of texty text
Column-reverse
A lot of texty text
More texty text
Final bit of texty text
Flex-wrap
The flex-wrap property defines whether the columns will stay on one line or not and in which columns are 'generated' first. Although it may seem useless, it comes in handy when you want to control where certain columns end up if you switch from PC to mobile. The following options are available:
Wrap (default)
Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.
More texty text
Final bit of texty text
Nowrap
Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.
More texty text
Final bit of texty text
Wrap-reverse
Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.
More texty text
Final bit of texty text
Flex-flow
Flex-flow is a shorthand notation in which flex-direction and flex-wrap can be combined. It's syntax is: flex-flow="flex-direction flex-wrap".

[responsive]
[row border="1px solid #9321d0" padding=5px flex-flow="row-reverse wrap-reverse"]
[col border="1px solid #c68f1a" padding=5px]Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.[/col]
[col border="1px solid #c68f1a" padding=5px]More texty text[/col]
[col border="1px solid #c68f1a" padding=5px]Final bit of texty text[/col]
[/row]
[/responsive]
becomes
Some texty text, but now a lot of texty text so this thing will fill up. But it takes a lot of text to do so.
More texty text
Final bit of texty text
Align-Content
Align-content controls the alignment of multiple lines of columns along the Y axis rather than the X axis. This requires having multiple lines in a column and it requires the row height to be smaller than the collective column height.

[responsive border="1px solid #30a7e9" padding=5px width=30%]
[row border="1px solid #9321d0" padding=5px height=200px align-items="flex-start"]
[col border="1px solid #c68f1a"]A lot of texty text[/col]
[col border="1px solid #c68f1a"]Some more texty text[/col]
[col border="1px solid #c68f1a"]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
Some more texty text
The final bit of texty text

If no row height is set, then this property does nothing (see below). Because of this, I haven't really found a good use for this property yet. Therefore I'll be putting the available options in a spoiler instead of having them all out in the guide.

[responsive border="1px solid #30a7e9" padding=5px width=30%]
[row border="1px solid #9321d0" padding=5px align-items="flex-start"]
[col border="1px solid #c68f1a"]A lot of texty text[/col]
[col border="1px solid #c68f1a"]Some more texty text[/col]
[col border="1px solid #c68f1a"]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text
Some more texty text
The final bit of texty text
Available options
Col tags
Col tags are a bit more obscure and frankly, I don't quite understand how most of them work or how they can be useful. View it as a WIP section, perhaps I will figure something out in the future. Maybe some other soul will find some sensible use. This is mainly included so that this guide is 'complete'. If you're looking to format with responsives you can forget about these.

Align-self


The only property within this list that's worth talking about. It is the same as align-items, but for an individual column. The align-self property will override whatever variable you picked for align-items for the particular column you put it in:
[responsive]
[row border="1px solid #9321d0" padding=5px align-items=center]
[col border="1px solid #c68f1a" padding=5px]A lot of texty text


[/col]
[col border="1px solid #c68f1a" padding=5px]


More texty text[/col]
[col border="1px solid #c68f1a" padding=5px align-self=flex-end]The final bit of texty text[/col]
[/row]
[/responsive]
becomes
A lot of texty text



More texty text
The final bit of texty text
Other properties

  • flex-grow: tells the columns how big they should be relative to each other. All columns in the row must have an assigned value. Interacts very weirdly when you put content in it that's larger than the width calculated by flex-grow. Accepted values: positive integers (0 (default), 1, 2, 3, etc)
  • flex-shrink: gives you the control the ability of columns to shrink. Accepted values: positive integers (1 (default), 2, 3, etc)
  • order: tells the columns in what order they have to appear in the row (this overrides the order in which they are coded). Columns with an unassigned order are wrapped first, followed by columns with an assigned order.
Design & Templates
Now that all the technical stuff is covered, we can finally do some coding (y'all still awake?). I wanted to do a separate section with tips for working with coding and things like that, but I figured I could just do the tips and templates in one go (and combine them a bit so the tips make more sense!) altho it ended up being more templates than tips... After all, coding is mostly done through practice so I gues it's better to offer a lot of examples.

You'll recognize the tips by the pink neon borders and different background (very much like this box). All the templates will be outside so they can utilize the maximum width rather than being limited by some fancy border. You can either scroll through everything or jump from box to box. It's all up to you :)

Tip 1: Visualise what you are doing whenever you code, put some borders + padding (or bgcolor) in the [responsive], [row] and [col] tags (especially the last one!!!). This way you can actually see what's happening & what you're doing.

Tip 2: Multiple ways lead to Rome: There are multiple ways to code the same thing. Sometimes it doesn't matter which way you pick and it's just what you prefer. However, sometimes certain ways will not be mobile friendly, or will not work well if you add borders/background colors. In some cases they do work, but make your code very cluttered and chaotic.

Tip 3: If you're looking to use some of this code, you'll find that you need more rows/items (or less) than what I have given you. Try to delete/copy paste the [row][/row] and everything inbetween of the cells containing the content you desire. In some cases the 'content to copy' will be between the [col][/col] tags, so you'll have to copy those instead. If you have trouble with this (it looks weird, it breaks, whatever) and you can't fix it yourself: you can always ask me :)

Tip 4: if you're in the last phase of designing and trying to fix spacing, as well as the overall look of things, I strongly recommend using the bgcolor property rather than borders and padding as those two increase the width of your cells (and therefore can mess up the finalization process).

Template 1: Basic runes/items
I added lorem ipsum to fill up my templates. No idea what it says, but it's better than what I can come up with!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
code: relative width
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
code: absolute width
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
code: empty column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
code: padding
Notes: On PC there is next to no difference between these codes. But on mobile you'll spot them pretty quick! For the rest of the templates I'll just come up with one version of code and I'll be focusing on PC formatting. However if you're wondering if/how certain templates can be made mobile friendly (or in some other way), drop a comment and I'll (attempt to) make it!

code: two rows (absolute width)


Template 2: Table of Contents 1

code


code

Template 3: Table of Contents 2

code

Note: The table around the code may seem random, but it's to center the responsive. For some weird reason, you cannot center responsives...

Template 4: Table of Contents 3

code
It turns out that making truly nice looking stuff with responsives requires more than just one responsive. This is often necessary to create borders, spacing or just making the code less confusing overall. The major downside is that that doing so makes it much easier to break things. If you put broken code into another table/responsive it won't just break, it'll break bad. I mean, really bad!

things breaking really bad

Tip: Make sure responsives function indepently from each other. If they are stacked within each other (and broken) you'll not be able to find any mistakes due to the chaos on the screen. You'll only have a chance if you fix each one individually (which means taking it out of other responsives!).

Note: Putting responsives into responsives to create stuff 'bloats' your code. It gets very big very quick. To give an example: The previous TOC, but now with dots in front of all the chapter choices.


code

Template 5: Table of Contents 4
code

Template 6: Table of Contents 5

code
Height, width, padding and margins interact with each other. Padding and margins are added to the width and height. So if you add 5px padding to a column with a width of 100px, the column will actually have a width of 105px! Most of the time this information won't be that useful, unless you're trying to make circles: then this matters a lot.

Template 7: Pros & Cons 1
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
Nunc faucibus a pellentesque sit. Tristique nulla aliquet enim tortor at auctor. Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Fermentum dui faucibus in ornare. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas.
-
Tincidunt lobortis feugiat vivamus at. Molestie at elementum eu facilisis. Id donec ultrices tincidunt arcu non sodales. Praesent tristique magna sit amet. Sagittis orci a scelerisque purus. Dolor sit amet consectetur adipiscing elit duis. Diam sollicitudin tempor id eu nisl.

code

Note: Perhaps you want to summarize the pros right below the + marks and the cons below the - marks. Maybe you want to make an overall summary of the thing. Then you can add the following code right between the rows where + switches to -, or after the last row:

add-on Code

Template 8: Pros & Cons 2
+Queen
+Likes ice
+Into the unknown
Sagittis aliquam malesuada bibendum arcu vitae. Ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit. Ullamcorper a lacus vestibulum sed arcu non odio. Ante in nibh mauris cursus mattis. Tincidunt id aliquet risus feugiat in.
-Chilly
-Reckless
-Terrible childhood
Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Sed augue lacus viverra vitae congue. Netus et malesuada fames ac turpis egestas integer. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

code

Note: But this looks so boring! Rolls eyes. Sometimes there is beauty in simplicity. However, there are some tricks on making things look a lil' nicer.
The main way of making things 'fancy' is adding borders, lines, background colors, images and whatever. The main purpose of these visual elements is to 'break' the text. You want to give the reader a breath of fresh air, so they can take a small break and continue reading.

Tip: There is something as having too much visuals. You have to remember that the people looking at your guide have to read the information. It's not a painting where you can just admire the image!

Tip 2: picking colors is as hard as coding. It may seem like nothing, but it is really though and I figured it is the main reason as to why people do not recolor the templates they use (pls do). It's okay to put some time in this (sometimes I struggle for hours).

What I do: I pick some color that I want to put in my thing. Then I try to find a tone of that color that's 'too dark' (I can't see it on the editor lol) and tone one that is 'too light' (my poor eyes get fried by looking at it). Then I go to this color mixing site, throw both colors in and keep trying intermediate colors until whatever I'm trying to color looks somewhat good.

Note 2: Now I'm going to make the previous template a little more 'fancy' in different ways. I think it's super cool that you can have exactly the same content, but make it look so different with just a bunch of borders and background colors!

How about a border + background around the pros/cons bullets?

+Queen
+Likes ice
+Into the unknown
Sed cras ornare arcu dui. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Volutpat ac tincidunt vitae semper quis lectus. Lobortis scelerisque fermentum dui faucibus in ornare quam. Amet consectetur adipiscing elit pellentesque habitant. Quis auctor elit sed vulputate mi sit amet mauris. Quis enim lobortis scelerisque fermentum dui.
-Chilly
-Reckless
-Terrible childhood
Morbi tempus iaculis urna id. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Accumsan tortor posuere ac ut. Euismod nisi porta lorem mollis aliquam ut porttitor. Est sit amet facilisis magna etiam tempor orci. Enim sed faucibus turpis in eu mi bibendum. Sed arcu non odio euismod lacinia. Sollicitudin aliquam ultrices sagittis orci.

code

Maybe you just want to have the pros on the left side of the page, and the cons on the right side! (But still with a border? Who knows...)

+Queen
+Likes ice
+Into the unknown
Sed cras ornare arcu dui. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Volutpat ac tincidunt vitae semper quis lectus. Lobortis scelerisque fermentum dui faucibus in ornare quam. Amet consectetur adipiscing elit pellentesque habitant. Quis auctor elit sed vulputate mi sit amet mauris. Quis enim lobortis scelerisque fermentum dui.
-Chilly
-Reckless
-Terrible childhood
Morbi tempus iaculis urna id. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Accumsan tortor posuere ac ut. Euismod nisi porta lorem mollis aliquam ut porttitor. Est sit amet facilisis magna etiam tempor orci. Enim sed faucibus turpis in eu mi bibendum. Sed arcu non odio euismod lacinia. Sollicitudin aliquam ultrices sagittis orci.

code

Perhaps you want things to not be too fancy, no background colors, just a border. But a different one:

+Queen
+Likes ice
+Into the unknown
Sed cras ornare arcu dui. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Volutpat ac tincidunt vitae semper quis lectus. Lobortis scelerisque fermentum dui faucibus in ornare quam. Amet consectetur adipiscing elit pellentesque habitant. Quis auctor elit sed vulputate mi sit amet mauris. Quis enim lobortis scelerisque fermentum dui.
-Chilly
-Reckless
-Terrible childhood
Morbi tempus iaculis urna id. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Accumsan tortor posuere ac ut. Euismod nisi porta lorem mollis aliquam ut porttitor. Est sit amet facilisis magna etiam tempor orci. Enim sed faucibus turpis in eu mi bibendum. Sed arcu non odio euismod lacinia. Sollicitudin aliquam ultrices sagittis orci.

code

Or EVERYTHING needs a background color? And a border around it all? A bit like this guide hmm?

+Queen
+Likes ice
+Into the unknown
Sed cras ornare arcu dui. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Volutpat ac tincidunt vitae semper quis lectus. Lobortis scelerisque fermentum dui faucibus in ornare quam. Amet consectetur adipiscing elit pellentesque habitant.
-Chilly
-Reckless
-Terrible childhood
Morbi tempus iaculis urna id. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Accumsan tortor posuere ac ut. Euismod nisi porta lorem mollis aliquam ut porttitor. Est sit amet facilisis magna etiam tempor orci. Enim sed faucibus turpis in eu mi bibendum.

code

You can also add a line. A very normal, ordinary line.

+Queen
+Likes ice
+Into the unknown
Sagittis aliquam malesuada bibendum arcu vitae. Ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit. Ullamcorper a lacus vestibulum sed arcu non odio. Ante in nibh mauris cursus mattis. Tincidunt id aliquet risus feugiat in.
-Chilly
-Reckless
-Terrible childhood
Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Sed augue lacus viverra vitae congue. Netus et malesuada fames ac turpis egestas integer. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

code

Wait you wanted a fancy line? Also possible, using borders. Why not? Depending on the style of the line you use (if you don't understand, go back to the border part of the guide (properties -> hybrid tags -> border)), you might have to increase the thickness of the line.

+Queen
+Likes ice
+Into the unknown
Sagittis aliquam malesuada bibendum arcu vitae. Ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit. Ullamcorper a lacus vestibulum sed arcu non odio. Ante in nibh mauris cursus mattis. Tincidunt id aliquet risus feugiat in.
-Chilly
-Reckless
-Terrible childhood
Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Sed augue lacus viverra vitae congue. Netus et malesuada fames ac turpis egestas integer. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

code
The customizability of a template depends on the template itself. Some templates are quite friendly to adding borders. You might have to adjust some widths/heights but beyond that they work quite well. Some are a nightmare to work with. In my experience: the more complicated a template is, the less customizable it tends to be.

Tip: common issues that arise when editing templates are the things either clinging together or suddenly popping below each other.

When things cling together:

If it's in horizontal direction: take a look at the justify-content property. If it's set to space-around, space-between or space-evenly, you can try to lower the width of one (or both) of the objects clinging to each other. Also note that these three have different effects on the spacing between the objects, so switching between them might help too.
If it's not one of those three, you might have deleted an empty column somewhere.
Alternatively, in the vertical direction you'll have to check the padding property of the row/previous rows. Try to mimic the padding of the rows that do work.

When things pop below each other:

The quick and very dirty fix: add flex-wrap=nowrap to the row with the object (frowns). This is the equivalent of throwing an object into a full closet and then slamming the door shut.
The slightly longer but correct fix: decrease the widths of the objects in the row so that they fit.

Tip: if this happens when you designing (e.g. not copy-pasting templates) make the responsive visible (especially the row not doing what you want + the columns in it). It'll often become clear which columns are too wide or whatever else is giving issues.

Template 9: Pros & Cons 3
Note: One of the templates found in Making A Guide, but with different code. The advantage? It doesn't go full wonk mode when the pros have less content than the cons or vice versa. And you can add borders... And backgrounds... :>

+Great champ
+Super good
+Hownot2writepros
+Need some more
+Just one
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.
-Random niche detail
-Dance not good
-WhatRdeezcons?
-Some more here too
-Last one, promise!

Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.

code

I'm not going to be as extensive as in the pros/cons ones, so just two examples:

+Great champ
+Super good
+Hownot2writepros
+Need some more
+Just one
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.
-Random niche detail
-Dance not good
-WhatRdeezcons?
-Some more here too
-Last one, promise!
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.

code

If the code is tweaked ever so slightly, (find the difference! I messed with the columns) then you can get this instead:

+Great champ
+Super good
+Hownot2writepros
+Need some more
+Just one
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.
-Random niche detail
-Dance not good
-WhatRdeezcons?
-Some more here too
-Last one, promise!
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.

code
Perhaps you've noticed that I sometimes put [responsive height=x][/responsive] in my code. This is to control spacing between lines, it gives much greater control than the usual line break (only one choice, BLEH), but comes at the cost of making code look more confusing than it is. This is insanely useful when making lists, but is also useful to stop text/images from clinging to each other (in the vertical direction). The margin property can also be used to solve this problem in a lot of cases.

Template 10: Summoner spells 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

code

Note: Sometimes it feels a little lame talking about taking Flash. Some tweaking to this template 'fixes' the problem. The indentation still remains, if you want that gone: I challenge you to try so yourself.

tip
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

code

code Icons stacked vertically
Whenever making something that has to stick to a grid-like pattern (most often summary tables, table of contents, etc), then responsives can be a bit annoying to work it. The trick is to give all the columns in the grid the same width (and padding) and give the rows the same variable for justify-content. That way everything will align! You can mimic tables by doing this, but you still posess all the advantages of a responsive. So responsive > table >:)

Agressive
Defensive
Situational

code

Template 11: Summoner spells 2
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

code

VS
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Note: Although the visuals of this template are very similar to the previous one, the code is actually quite different (unlike previous look-alike codes).

code
Ironically, the most important part of a visual is empty space. If everything is glued together, it will look terrible whatever you try to do. But if you make parts of the code distance from each other, then the end result can look really good. Even though you may not have added a lot of visuals.

Template 12: Runes 1
Standard page
In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.
Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla.
Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.
Euismod nisi porta lorem mollis aliquam ut. Nunc faucibus a pellentesque sit amet porttitor eget.
Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum faucibus. Proin nibh nisl condimentum id. Pellentesque nec nam aliquam sem et.
Adaptations
In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.
Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus.
Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.
Euismod nisi porta lorem mollis aliquam ut. Nunc faucibus a pellentesque sit amet porttitor eget. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum.
Some generic statement about choosing runes. Can talk about anything regarding runes basically. Can also delete the text between the italics
(DO NOT DELETE THE CODE).
Secondary rune trees (extensive) | Alternative keystones | Something else

code

Note: I've also switched the code around a little bit so things are displayed a little differently:

Standard page
Adaptations
In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla.
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.
Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla.
Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.
Est pellentesque elit ullamcorper dignissim. Duis ut diam quam nulla porttitor massa id. Amet porttitor eget dolor morbi non arcu risus. Consequat ac felis donec et odio. Consectetur a erat nam at lectus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla.
Massa eget egestas purus viverra. Leo duis ut diam quam nulla porttitor massa. Nisi est sit amet facilisis magna etiam tempor orci. Eget mi proin sed libero enim sed faucibus.
Morbi quis commodo odio aenean sed adipiscing diam. Sed risus pretium quam vulputate dignissim. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Pellentesque massa placerat duis ultricies. Hac habit***e platea dictumst quisque sagittis purus sit.
Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum faucibus. Proin nibh nisl condimentum id. Pellentesque nec nam aliquam sem et.
Other secondary trees | Alternative keystone (Comet)

code

Template 13: Runes 2
Note: People seem to be fan of full rune page imitations (looking at a certain type of rune code which is seen EVERYWHERE). So here's one from me:
Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus.
In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.
Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus.
Bibendum enim facilisis gravida neque convallis a. Risus nullam eget felis eget nunc lobortis mattis aliquam faucibus. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum.

IMPORTANT note: If you use this code: be careful when editing the runes for other rune pages. The code of the responsive with four runes is slightly different from the responsive with three runes!

code

Template 14: Runes 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

code


Template 15: Items 1
Core items
Eget sit amet tellus cras adipiscing enim eu turpis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. In egestas erat imperdiet sed euismod. Posuere urna nec tincidunt praesent semper feugiat. Urna id volutpat lacus laoreet.
Sed faucibus turpis in eu mi bibendum neque egestas. Est lorem ipsum dolor sit amet. Nisl nisi scelerisque eu ultrices vitae auctor eu. Malesuada bibendum arcu vitae elementum. Maecenas sed enim ut sem viverra aliquet eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus euismod quis viverra nibh cras pulvinar. Diam donec adipiscing tristique risus. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. Est ante in nibh mauris cursus. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Id interdum velit laoreet id donec.

code

Note: This template is quite similar to one of the codes from template 1 (spoiler: it's the first one). Much like the pros/cons there are a thousand ways you can customize that simple bit of code. But that's for you to do, I'll leave it at this.
This marks the end of the template/design part. There is only one thing I have left to say:

Tip: The danger of using templates is that although they make your guide readable, they often lack cohesion. Some templates use background colors, some use borders, some use both and yet others use none. Sometimes the colors vary, sometimes the border types vary. If you're looking to create a piece of art, something that shines visually, then you'll probably have to code most of it yourself...
Mobile friendly formatting
Before finishing the guide, I want to touch on a subject I've ignored so far. It's actually one of the major reason as to why you'd use responsives (if you already know & understand tables). So I'll give some tips and things you have to pay attention to when formatting for mobile. But before doing so, here's how to preview on mobile (when on PC).

Previewing mobile: The easiest way is to open this is to use the "preview mobile" button in the editor. Once you have this page open, refresh is to load new saved changes. Clicking the button again will result in the editor opening a new tab for you.

Previewing mobile: an alternative way is to right click the page and selecting "Inspect". Then some kind of window with the code pops up. Find this button and click it to switch on the mobile view for the page you're viewing (CTRL + shift + M):

If you want to switch back to the PC view, you can press on it again.

Now it's time for the tips:

Fix things first for PC: I find it much easier to create code for PC (only) first and then 'rewriting' it for mobile. In some cases I have to redo almost the entire code, but if the 'correct' code is used then this can be quite straightforward.

Use absolute widths: The width of the mobile screen is smaller than on PC, so the visuals often get squashed on mobile (sometimes this works out fine, sometimes it looks horrible...). Switching from a relative width to an absolute width is rather easy, you right click the code, select "Inspect" and then search for the following button (CTRL + shift + C):
Then you can hover over whatever element you want to 'convert' to an absolute width. The web page will show you the size of the element in absolute values.

Padding is necessary: Most of the time, on mobile, elements that are next to each other will shift to be beneath each other. A major issue is that there is no vertical seperation between the two. This can be fixed by using padding in smart ways. If your guide is border/background color heavy (for example: the summoners 1 template), then the margin property can come in clutch.

When you are working with responsives within responsives: AVOID using absolute widths. If the specified width is wider than the screen width, using an absolute width within a responsive/table will result in things breaking on mobile.

Tip: something I often do when coding for mobile is 'shifting' the padding from the [row] tags to the [/col] tags. I substract a certain number of padding from the vertical spacing of the row and add that padding to all the columns in that row (if you miss a column, they will misalign so make sure to add it to ALL columns).

I won't give a bunch of templates, but I'll take a few templates from the previous section and make them mobile friendly. Tried to add a description of what I changed, but this is quite repetetive most of the time. View them on mobile & PC and see what happens :)
Template 4: Table of Contents 3 (2)
Overhauled whole code so that the different categories are grouped in the same column rather than spread out over different rows.


code

Template 8: Pros & Cons 2 (2)
Added margins to all columns, substracted 'extra' space from row height. Also converted relative widths into absolute widths.
+Queen
+Likes ice
+Into the unknown
Sed cras ornare arcu dui. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Volutpat ac tincidunt vitae semper quis lectus. Lobortis scelerisque fermentum dui faucibus in ornare quam. Amet consectetur adipiscing elit pellentesque habitant. Quis auctor elit sed vulputate mi sit amet mauris. Quis enim lobortis scelerisque fermentum dui.
-Chilly
-Reckless
-Terrible childhood
Morbi tempus iaculis urna id. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Accumsan tortor posuere ac ut. Euismod nisi porta lorem mollis aliquam ut porttitor. Est sit amet facilisis magna etiam tempor orci. Enim sed faucibus turpis in eu mi bibendum. Sed arcu non odio euismod lacinia. Sollicitudin aliquam ultrices sagittis orci.

code

Template 9: Pros & Cons 3 (2)
Changed relative widths into absolute widths. Added padding to places.

+Great champ
+Super good
+Hownot2writepros
+Need some more
+Just one
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.
-Random niche detail
-Dance not good
-WhatRdeezcons?
-Some more here too
-Last one, promise!
Dui ut ornare lectus sit amet est placerat in. Ac tortor dignissim convallis aenean et. Aliquam faucibus purus in massa tempor nec feugiat. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.

code


Template 11: Summoner spells 2 (2)
Overhauled structure so the vertical elements are in the same column rather than spread out over rows. Converted relative widths into absolute widths & added padding.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
VS
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

code

Template 13: Runes 2
Converted relative width to absolute width. Added padding to the responsives containing the runes so they don't glue to the text in the mobile version.

Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus.
In nibh mauris cursus mattis molestie. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.
Tortor posuere ac ut consequat semper viverra. Ante in nibh mauris cursus mattis. Scelerisque eu ultrices vitae auctor eu augue. Elementum tempus egestas sed sed risus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus.
Bibendum enim facilisis gravida neque convallis a. Risus nullam eget felis eget nunc lobortis mattis aliquam faucibus. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Quam quisque id diam vel quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum.

code
Conclusion
This section marks the end of my guide on responsive columns. I hope it helped you, or that you snagged some useful templates/ideas.
Thanks for reading my guide!

If you have any questions, remarks, comments or whatever, feel free to visit the discussion section. I'll try to answer as fast as I can! You can also visit the MobaFire Discord, I can be found there as well ;)
Download the Porofessor App for Windows

League of Legends Champions:

Teamfight Tactics Guide