One moment, we're cooking some code examples
Design content layouts by utilizing the internal grid system. Additionally, you have the option to apply built-in presets for adding content.
The columns are contained by a row that functions as a wrapper. You can adjust the width of the columns depending on the type of device, making the grid fully responsive. Combine different content or widgets in your layouts to make your site pop!
Let's get into the basics of the grid system!
By default TypeStack has a built-in 12 columns grid available. Using this grid you can design responsive layouts for your content.
Using the built-in content editor you can align content (text, images, videos, and other widgets) in any way you want.
Now here is something interesting. These two columns are contained within the same row. This means they can interact with one another. In this example they are sitting next to each other. You might also notice that they both are about half the width of a normal element. This is due to the 6 specified on the <div class="col s6"> tag. What that S means we will get to very shortly. And the slightly wonky box as well of course.
Lets first cover the boxes, you will notice that the box here is fixed, When you want two boxes that are next to eachother to be the same length you simply enter the FlexColumnWrapper class into the row div, and enter FlexColumn into every col div. It really is as simple as that!
The example bellow will take up the whole width of the page if it gets small enough, try it!
The width of a column can be made variable depending on the device by adding a class to the column: s, m, l or xl.
s (small) is used till 600px
m (medium) is used from 600px and up
l (large) is used from 992px and up
xl (extra large) is used from 1200px and up
Here is a more complex example using the grid. Try scaling the element, its quite neat!