Layouts

Sometimes it’s easier to just include a magical class that creates a specific layout for you to use. 

Right now ignition only has 2 layouts included, but more might come over time as needed. Make sure you listen to the rules on how to use them. the rules are usually pretty simple.

Here they are:

Layout-center-content

This class will create centered content both vertically and horizontally. It can be used anywhere, even on a grid element.

RULES:
It requires that it has only ONE child element. 

Here would be typical markup.

<div class="layout-center-content">
	<div class="some-item">
		<p>Hello, I am centered vertically and horizontally. </p>
	</div>
</div>

Here is what that markup would look like. Note I added an inline height to show you that it centers it vertically too.

This is a great layout class and is used everywhere. Use it!

Layout-Cards-7

A beautiful layout for 7 cards. Some cards are big and some are small. The layout is created for you to show a nice archive page with dynamic looking cards. You can show multiples of 7 and it will repeat.

RULES:
It requires the grid class to be present. Only place card items inside. 
If there is an element inside these cards that you don’t want to show on the small cards, use the class .hide-on-small-card
For instance you may have more info to show in the bigger longer card, but it wont fit in the small card. Just use that class and it wont show when the card is too small.

Here is the markup:

<div class="grid layout-cards-7">
    <div class="item">
        Card <em class="hide-on-small-card">I wont show on small cards</em>
    </div>
    <div class="item">
        Card <em class="hide-on-small-card">I wont show on small cards</em>
    </div>
    <div class="item">
        Card <em class="hide-on-small-card">I wont show on small cards</em>
    </div>
    <div class="item">
        Card <em class="hide-on-small-card">I wont show on small cards</em>
    </div>
    <div class="item">
        Card <em class="hide-on-small-card">I wont show on small cards</em>
    </div>
    <div class="item">
        Card <em class="hide-on-small-card">I wont show on small cards</em>
    </div>
    <div class="item">
        Card <em class="hide-on-small-card">I wont show on small cards</em>
    </div>
</div>

And the output: