Source: components/animations/_animations.scss, line 1
Example
Markup: components/animations/animations.twig
<img class="floating" src="kss-assets/images/pattern_logo.png" alt="">
Source: components/animations/_animations.scss, line 5
Example

Susy grid toolkit

Example how can you use spans to layout your content

Susy has a few mixins to deal with the margins and paddings of the spans

12 columns

item
item
item
item
item
item
item
item
item
item
item
item

6 by 6 default

	.pl-item:first-child {
		@include span(6);
	}
	.pl-item:last-child {
		@include span(6);
	}
	
item
item

6 by 6 using no-gutters and wider

	.pl-item:first-child {
		@include span(6 no-gutters wide);
	}
	.pl-item:last-child {
		@include span(6 no-gutters wide);
	}
	
item
item

8 by 4

	.pl-item:first-child {
		@include span(8 no-gutters);
	}
	.pl-item:last-child {
		@include span(4 no-gutters wider);
	}
	
item
item
Markup: components/grid/grid.twig
<h4>Susy grid <a class="link" href="http://susydocs.oddbird.net/en/latest/toolkit/" target="_blank">toolkit</a></h4>
<div class="pl-grid kss-style">
	<h3>Example how can you use spans to layout your content</h3>
	<p>Susy has a few <a class="link" href="http://susydocs.oddbird.net/en/latest/toolkit/#margins" target="_blank">mixins</a> to deal with the margins and paddings of the spans</p>
	<p>12 columns</p>
	<div class="pl-twelve-cols">
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--red">item</div>
	</div>
	<p>6 by 6 default</p>
	<pre>
	.pl-item:first-child {
		@include span(6);
	}
	.pl-item:last-child {
		@include span(6);
	}
	</pre>
	<div class="pl-six-by-six-normal">
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--jasper-grey">item</div>
	</div>
	<p>6 by 6 using no-gutters and <a class="link" href="http://susydocs.oddbird.net/en/latest/toolkit/#narrow-wide-and-wider" target="_blank">wider</a></p>
	<pre>
	.pl-item:first-child {
		@include span(6 no-gutters wide);
	}
	.pl-item:last-child {
		@include span(6 no-gutters wide);
	}
	</pre>
	<div class="pl-six-by-six">
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--jasper-grey">item</div>
	</div>
	<p>8 by 4</p>
	<pre>
	.pl-item:first-child {
		@include span(8 no-gutters);
	}
	.pl-item:last-child {
		@include span(4 no-gutters wider);
	}
	</pre>
	<div class="pl-eight-by-four">
		<div class="pl-item bg--red">item</div>
		<div class="pl-item bg--jasper-grey">item</div>
	</div>
</div>
Source: components/grid/_grid.scss, line 1
Example

This is the item title

JSON Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque doloremque eligendi, fugiat fugit laudantium mollitia obcaecati perspiciatis quasi rem rerum saepe sint voluptate? Ab dicta eius harum magnam praesentium.

This is the item title

JSON Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque doloremque eligendi, fugiat fugit laudantium mollitia obcaecati perspiciatis quasi rem rerum saepe sint voluptate? Ab dicta eius harum magnam praesentium.

This is the item title

JSON Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque doloremque eligendi, fugiat fugit laudantium mollitia obcaecati perspiciatis quasi rem rerum saepe sint voluptate? Ab dicta eius harum magnam praesentium.

Markup: components/demo/demo.twig
{% for i in 0..2 %}
  <article 
    {% if attributes %}
      {{ attributes.addClass('demo') }}
    {% else %}
      class="{{ classes }} {{ modifier_class }}"
    {% endif %}
  >
    <h2>{{ label }}</h2>
    {% if body %}
      <p>{{ body }}</p>
    {% endif %}
  </article>
{% endfor %}
Source: components/demo/_demo.scss, line 1