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

Responsive columns

16 0

101,099 Views

10 Comments League of Legends Build Guide Author Katasandra

Build Guide By Updated on

Guide Discussion (10) More Guides

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!

Table of contents

Mobile friendly formatting

Conclusion

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:

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
Height
Bgcolor
Border
Border-radius
Padding
Margin

Skip 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
Align-items
Flex-direction
Flex-wrap
Flex-flow
Align-content

Skip row tags

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
Order
Flex-grow
Flex-shrink

Skip col tags

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).

Next tip

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

code: absolute width

code: empty column

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)

Code:

[responsive]
[row justify-content=space-around align-items=center padding="10px 0px 10px 0px"]
[col width=42][icon=long sword size=40][/col]
[col max-width=685]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.[/col]
[/row]
[row justify-content=space-around align-items=center padding="10px 0px 10px 0px"]
[col width=42][icon=long sword size=40][/col]
[col max-width=685]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.[/col]
[/row]
[/responsive]

Template 2: Table of Contents 1

Introduction
Pros & Cons
Abilities

Summoners
Runes
Items

Early game
Midgame
Late game

code

Introduction
Pros & Cons
Abilities

Summoners
Runes
Items

Early game
Midgame
Late game

code

Template 3: Table of Contents 2

Introduction

Pros & Cons

Abilities

Combo's

Special thanks

Changelog

Summoners

Runes

Items

Early game

Midgame

Late game

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

General

Champion

Setup

Gameplay

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!).

Next tip

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.

General

Champion

Setup

Gameplay

code

Code:

[responsive]
[row justify-content="space-between" padding="0px 0px 3px 0px"]
[col width=150px][size=5]General[/size][/col]
[col width=150px][size=5]Champion[/size][/col]
[col width=150px][size=5]Setup[/size][/col]
[col width=150px][size=5]Gameplay[/size][/col]
[/row]
[row justify-content="space-between" padding="0px 0px 10px 0px"]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[col height=2px width=150px bgcolor=#4e98ff border-radius=5px][/col]
[/row]
[row justify-content="space-between"]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Introduction[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Special thanks[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Changelog[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Pros & Cons[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Abilities[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Combo's[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Summoner spells[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Runes[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Items[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px]
[responsive]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Early game[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Midgame[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Late game[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

Template 5: Table of Contents 4

Introduction

Pros & Cons

Abilities

Combo's

Special thanks

Changelog

Summoners

Runes

Items

Early game

Midgame

Late game

code

Code:

[center][b][size=4]
[responsive]
[row justify-content="space-between" align-items=center]
[col width=30%]
[responsive]
[row flex-direction=column]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Introduction[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Pros & Cons[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Abilities[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Combo's[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Special thanks[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Changelog[/goto][/col][/row][/responsive][/col]
[/row]
[/responsive][/col]
[col width=30%][center][icon=classic lissandra size=180][/center]
[/col]
[col width=30%][responsive]
[row flex-direction=column]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Summoners[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Runes[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Items[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Early game[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Midgame[/goto][/col][/row][/responsive][/col]
[col padding=10px][responsive padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][row][col][goto=]Late game[/goto][/col][/row][/responsive][/col]
[/row]
[/responsive][/col]
[/row]
[/responsive]
[/size][/b][/center]

Template 6: Table of Contents 5

General

xIntroduction
xSpecial thanks
xChangelog

Champion

xPros & Cons
xAbilities
xCombo's

Setup

xSummoner spells
xRunes
xItems

Gameplay

xEarly game
xMidgame
xLate game

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.

Next tip

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

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

Code:

[responsive]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=32 border="2px solid green" border-radius=40px padding="8px 0px 0px 0px"][center][size=7][size=6][color=green]+[/color][/size][/size][/center][/col]
[col width=700px][color=green][b]Lorem ipsum dolor sit amet[/b][/color], 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.[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=32 border="2px solid green" border-radius=40px padding="8px 0px 0px 0px"][center][size=7][size=6][color=green]+[/color][/size][/size][/center][/col]
[col width=700px][color=green][b]Duis aute irure dolor in reprehenderit[/b][/color] 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[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=32 border="2px solid green" border-radius=40px padding="8px 0px 0px 0px"][center][size=7][size=6][color=green]+[/color][/size][/size][/center][/col]
[col width=700px][color=green][b]Lorem ipsum dolor sit amet[/b][/color], 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.[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="10px 0px 10px 0px"]
[col width=40 height=38 border="2px solid firebrick" border-radius=40px padding="2px 0px 0px 0px"][center][size=7][size=6][color=firebrick]-[/color][/size][/size][/center][/col]
[col width=700px][color=firebrick][b]Lorem ipsum dolor sit amet[/b][/color], 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.[/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=38 border="2px solid firebrick" border-radius=40px padding="2px 0px 0px 0px"][center][size=7][size=6][color=firebrick]-[/color][/size][/size][/center][/col]
[col width=700px][color=firebrick][b]Nunc faucibus a pellentesque sit.[/b][/color] 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. [/col]
[/row]
[row align-items="center" justify-content="space-between" padding="0px 0px 10px 0px"]
[col width=40 height=38 border="2px solid firebrick" border-radius=40px padding="2px 0px 0px 0px"][center][size=7][size=6][color=firebrick]-[/color][/size][/size][/center][/col]
[col width=700px][color=firebrick][b]Tincidunt lobortis feugiat vivamus at.[/b][/color] 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.[/col]
[/row]
[/responsive]

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.

Next tip

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

-Chilly
-Reckless
-Terrible childhood

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

-Chilly
-Reckless
-Terrible childhood

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

-Chilly
-Reckless
-Terrible childhood

code

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

+Queen
+Likes ice
+Into the unknown

-Chilly
-Reckless
-Terrible childhood

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

-Chilly
-Reckless
-Terrible childhood

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.

Next tip

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

-Random niche detail

-Dance not good

-WhatRdeezcons?

-Some more here too

-Last one, promise!

code

Code:

[responsive]
[row justify-content="space-between"]
[col width=35%]
[responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][color=green][b]+[/b][/color][space][space]Great champ
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Super good
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Hownot2writepros
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Need some more
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Just one[/col]
[col height=20px][/col]
[col]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.[/col]
[/row]
[/responsive]
[/col]
[col width=20%][center][icon=classic lissandra size=130][/center]
[responsive padding="10px 0px 0px 0px"]
[row justify-content="space-between"]
[col width=19%][icon=iceborn size=25][/col]
[col width=19%][icon=ice shard size=25][/col]
[col width=19%][icon=ring of frost size=25][/col]
[col width=19%][icon=glacial path size=25][/col]
[col width=19%][icon=frozen tomb size=25][/col]
[/row]
[/responsive]
[/col]
[col width=35%][responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"]
[color=firebrick][b]-[/b][/color][space][space]Random niche detail
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Dance not good
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]WhatRdeezcons?
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Some more here too
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Last one, promise![/col]
[col height=20px][/col]
[col]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.[/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

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

-Random niche detail

-Dance not good

-WhatRdeezcons?

-Some more here too

-Last one, promise!

code

Code:

[responsive]
[row justify-content="space-between"]
[col width=35%]
[responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][color=green][b]+[/b][/color][space][space]Great champ
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Super good
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Hownot2writepros
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Need some more
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Just one
[responsive height=15px][/responsive]
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.[/col]
[/row]
[/responsive]
[/col]
[col width=20%][center][icon=classic lissandra size=130][/center]
[responsive padding="10px 0px 0px 0px"]
[row justify-content="space-between"]
[col width=19%][icon=iceborn size=25][/col]
[col width=19%][icon=ice shard size=25][/col]
[col width=19%][icon=ring of frost size=25][/col]
[col width=19%][icon=glacial path size=25][/col]
[col width=19%][icon=frozen tomb size=25][/col]
[/row]
[/responsive]
[/col]
[col width=35%][responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"]
[color=firebrick][b]-[/b][/color][space][space]Random niche detail
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Dance not good
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]WhatRdeezcons?
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Some more here too
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Last one, promise!
[responsive height=15px][/responsive]
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.[/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

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.

Next tip

Template 10: Summoner spells 1

code

Code:

[responsive]
[row justify-content=center align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=flash size=40][/col]
[col width=20][/col]
[col max-width=674]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.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ignite size=40][/col]
[col width=20][/col]
[col max-width=620]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.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ghost size=40][/col]
[col width=20][/col]
[col max-width=620]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.[/col]
[/row]
[/responsive]

Note: Sometimes it feels a little lame talking about taking . 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

code

Code:

[responsive]
[row justify-content=center align-items=center padding="10px 0px 10px 0px"]
[col width=84 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=flash size=40][icon=ignite size=40][/col]
[col width=20][/col]
[col max-width=634]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.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=84 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ignite size=40][icon=teleport size=40][/col]
[col width=20][/col]
[col max-width=580]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.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=84 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ghost size=40][icon=smite size=40][/col]
[col width=20][/col]
[col max-width=580]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.[/col]
[/row]
[/responsive]

code Icons stacked vertically

Code:

[responsive]
[row justify-content=center align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=flash size=40][icon=ignite size=40][/col]
[col width=20][/col]
[col max-width=634]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.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ignite size=40][icon=teleport size=40][/col]
[col width=20][/col]
[col max-width=600]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.[/col]
[/row]
[row justify-content=flex-end align-items=center padding="10px 0px 10px 0px"]
[col width=42 bgcolor=#252525 border-radius=5px border="3px ridge #4e98ff"][icon=ghost size=40][icon=smite size=40][/col]
[col width=20][/col]
[col max-width=600]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.[/col]
[/row]
[/responsive]

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 >:)

Next tip

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.

code

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.

Next tip

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.

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

Code:

[responsive]
[row justify-content="space-between" align-items="flex-end"]
[col][color=#4e98ff][size=5]Standard page[/size][/color][/col]
[col][icon=electrocute size=40 padding=2px][icon=taste of blood size=40 padding=2px][icon=eyeball collection size=40 padding=2px][icon=ravenous hunter size=40 padding=2px][icon=transcendence size=40 padding=2px][icon=manaflow band size=40 padding=2px][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=electrocute size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[col width=42px][icon=taste of blood size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=eyeball collection size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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. [/col]
[col width=42px][icon=ravenous hunter size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=transcendence size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Euismod nisi porta lorem mollis aliquam ut. Nunc faucibus a pellentesque sit amet porttitor eget.[/col]
[col width=42px][icon=manaflow band size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[/row]
[row]
[col][color=#4e98ff][size=5]Adaptations[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=cheap shot size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[col width=42px][icon=ghost poro size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=ultimate hunter size=40 padding=2px]
[icon=ingenious hunter size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]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. [/col]
[col width=42px][icon=time warp tonic size=40 padding=2px]
[icon=biscuit delivery size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=overgrowth size=40 padding=2px]
[icon=conditioning size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[col width=42px][/col]
[col width=40% padding="0px 5px 0px 5px"][i]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).[/i][/col]
[/row]
[row]
[col][color=#4e98ff][size=5]Secondary rune trees (extensive) | Alternative keystones | Something else[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[/responsive]

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.

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.

Other secondary trees | Alternative keystone (Comet)

code

Code:

[responsive]
[row justify-content="space-between" align-items="flex-end"]
[col width=52%][color=#4e98ff][size=5]Standard page[/size][/color][/col]
[col width=48%][color=#4e98ff][size=5]Adaptations[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=electrocute size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[col width=42px][icon=arcane comet size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies integer quis auctor elit sed vulputate. Senectus et netus et malesuada.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=eyeball collection size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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. [/col]
[col width=42px][icon=ghost poro size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=ultimate hunter size=40][/col]
[col width=40% padding="0px 5px 0px 5px"]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. [/col]
[col width=42px][icon=ingenious hunter size=40 padding=2px][icon=ravenous hunter size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="0px 0px 20px 0px"]
[col width=42px][icon=transcendence size=40 padding=2px]
[icon=manaflow band size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[col width=42px][icon=gathering storm size=40 padding=2px]
[icon=waterwalking size=40 padding=2px][/col]
[col width=40% padding="0px 5px 0px 5px"]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.[/col]
[/row]
[row]
[col][color=#4e98ff][size=5]Other secondary trees | Alternative keystone (Comet)[/size][/color][/col]
[/row]
[row height=2px bgcolor=#4e98ff][/row]
[row height=20][/row]
[/responsive]

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.

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

Code:

[responsive]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=electrocute size=50][/col]
[col][icon=predator size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=dark harvest size=50][/col]
[col][icon=hail of blades size=50][/col][/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]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. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-evenly" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=cheap shot size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=taste of blood size=50][/col]
[col][icon=sudden impact size=50][/col][/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]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.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-evenly" align-items="center"]
[col][icon=zombie ward size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ghost poro size=50][/col]
[col][icon=eyeball collection size=50][/col][/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]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. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=45%]
[responsive]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ravenous hunter size=50][/col]
[col][icon=ingenious hunter size=50][/col]
[col][icon=relentless hunter size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ultimate hunter size=50][/col]
[/row]
[/responsive]
[/col]
[col width=50% padding="0px 0px 15px 0px"]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.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=50% height=0px border="2px ridge #4e98ff"][/col]
[/row]
[/responsive]

Template 14: Runes 3

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

Code:

[responsive]
[row justify-content="space-around" align-items="flex-end"]
[col width=30%][color=#4e98ff][size=6]Core items[/size][/color]
[responsive height=2 width=100% bgcolor=#4e98ff][/responsive][/col]
[col padding=30px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=luden's tempest size=40 padding=5px][icon=sorcerer's shoes size=40 padding=5px][icon=cosmic drive size=40 padding=5px][/col]
[/row]
[row height=20][/row]
[row justify-content="space-between" align-items="center" padding="10px 0px 10px 0px"]
[col padding=15px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=luden's tempest size=40 padding=5px][/col]
[col width=85%]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.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="10px 0px 10px 0px"]
[col padding=15px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=sorcerer's shoes size=40 padding=5px][/col]
[col width=85%]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.[/col]
[/row]
[row justify-content="space-between" align-items="center" padding="10px 0px 10px 0px"]
[col padding=15px bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][icon=cosmic drive size=40 padding=5px][/col]
[col width=85%]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.[/col][/row]
[/responsive]

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.

General

Champion

Setup

Gameplay

code

Code:

[responsive]
[row justify-content="space-between"]
[col width=150px padding="0px 0px 10px 0px"][size=5]General[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Introduction[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Special thanks[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Changelog[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px padding="0px 0px 10px 0px"][size=5]Champion[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Pros & Cons[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Abilities[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Combo's[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px padding="0px 0px 10px 0px"][size=5]Setup[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Summoner spells[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Runes[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Items[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[col width=150px padding="0px 0px 10px 0px"][size=5]Gameplay[/size]
[responsive]
[row height=3px][/row]
[row height=2px width=150px bgcolor=#4e98ff border-radius=5px][/row]
[row align-items="center" padding="10px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Early game[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Midgame[/goto][/size][/col]
[/row]
[row align-items="center" padding="0px 0px 5px 0px"]
[col width=10 height=10 border-radius=20px bgcolor=#4e98ff margin="0px 10px 0px 0px"][/col]
[col][size=4][goto=]Late game[/goto][/size][/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

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

-Chilly
-Reckless
-Terrible childhood

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

-Random niche detail

-Dance not good

-WhatRdeezcons?

-Some more here too

-Last one, promise!

code

Code:

[responsive]
[row justify-content="space-between" align-items="center"]
[col width=266px padding="5px 0px 5px 0px"]
[responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"][color=green][b]+[/b][/color][space][space]Great champ
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Super good
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Hownot2writepros
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Need some more
[responsive height=2][/responsive]
[color=green][b]+[/b][/color][space][space]Just one[/col]
[col height=20px][/col]
[col]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.[/col]
[/row]
[/responsive]
[/col]
[col width=153px padding="10px 0px 10px 0px"][center][icon=classic lissandra size=130][/center]
[responsive padding="10px 0px 0px 0px"]
[row justify-content="space-between"]
[col width=19%][icon=iceborn size=25][/col]
[col width=19%][icon=ice shard size=25][/col]
[col width=19%][icon=ring of frost size=25][/col]
[col width=19%][icon=glacial path size=25][/col]
[col width=19%][icon=frozen tomb size=25][/col]
[/row]
[/responsive]
[/col]
[col width=266px padding="5px 0px 5px 0px"][responsive]
[row flex-direction=column]
[col padding="5px 10px 5px 10px" bgcolor=#252525 border-radius=15px border="3px ridge #4e98ff"]
[color=firebrick][b]-[/b][/color][space][space]Random niche detail
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Dance not good
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]WhatRdeezcons?
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Some more here too
[responsive height=2][/responsive]
[color=firebrick][b]-[/b][/color][space][space]Last one, promise![/col]
[col height=20px][/col]
[col]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.[/col]
[/row]
[/responsive]
[/col]
[/row]
[/responsive]

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.

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.

code

Code:

[responsive]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=electrocute size=50][/col]
[col][icon=predator size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=dark harvest size=50][/col]
[col][icon=hail of blades size=50][/col][/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]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. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-evenly" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=cheap shot size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=taste of blood size=50][/col]
[col][icon=sudden impact size=50][/col][/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]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.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-evenly" align-items="center"]
[col][icon=zombie ward size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ghost poro size=50][/col]
[col][icon=eyeball collection size=50][/col][/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]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. [/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[row justify-content="space-between" align-items="center"]
[col width=343px]
[responsive padding="10px 0px 10px 0px"]
[row justify-content="space-between" align-items="center"]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ravenous hunter size=50][/col]
[col][icon=ingenious hunter size=50][/col]
[col][icon=relentless hunter size=50][/col]
[col bgcolor=#252525 border-radius=100px border="3px ridge #4e98ff" width=50 height=50 padding=15px][icon=ultimate hunter size=50][/col]
[/row]
[/responsive]
[/col]
[col width=385px padding="0px 0px 15px 0px"]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.[/col]
[/row]
[row height=25px justify-content="flex-end"]
[col width=385px height=0px border="2px ridge #4e98ff"][/col]
[/row]
[/responsive]

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 ;)