Genius Stack: Layout Concepts
{documentation: website layout concepts}
A Fully Responsive (Mobile Friendly) Website
It’s a “Grid” System
The Genius Stack theme is built on an industry favorite framework called Bootstap. Bootstrap was developed by Twitter to aid in the fast development of websites by providing a common framework. The greatest thing about Bootstrap is that it is a grid system that behaves in a very natural fashion in regard to responsive website design (looks good on both a large desktop screen and on a small phone screens).
Automatic Resizing (Responsive Mobile to Desktop)
Basically as the screen gets smaller each item on the screen will automatically resize. At first it will get smaller until it hits a certain point, such as the size of an iPad held in portrait and then depending on what it is it may stack automatically to fit on a smaller screen such as that of a phone.
The Importance of This to Genius Stack
All the Flexible Content Types provided in Genius Stack are built to automatically resize for various devise sizes. On some modules, such as the Content with Image type, you have an option of whether to choose whether your content will display in a 70% 30% columns or at 50% %50 columns format. Other modules such as the WYSIWYG Content Block(s), all you to setup as many blocks as you like: 1 block will display the full length of the screen, 2 blocks will create 50/50 columns, 3 blocks will create 33/33/33 columns and 4 blocks will produce 25/25/25/25 columns. Adding any more blocks will simply start a new row.
Though there are many possibilities, we have kept things simple with our custom theme and our major break points are desktop, tablet (portrait) and of course phone.
Layouts and How They Respond to Various Screen Sizes
Single Column Content
A single column of content will take the full width of your webpage.
This layout is available with the following Flexible Content types:
Two Columns (50/50)
As the name suggests this layout will create two equally sized columns of content and is available within the following Flexible Content types:
- WYSIWYG Block(s)
- Content With Image
- Blog/News Posts
Two Columns (70/30)
The 70/30 is the most limited within our system as there are only a few areas it would make sense to split your content this way. This is available within the following Flexible Content types:
- Content With Image
Three Columns (33/33/33)
OK, we are starting to get a little smaller here. Some Flexible Content types will allow you to create 3 columns of content, these include:
Four Columns (25/25/25/25)
And finally we are down to 4 columns of content. This available within the following Flexible Content types:
