0.8.6 beta

| Axle | 'Widgets'

1. Narrative element

The Narrative element is a 12 col of a 16 col grid layout. Consists of two blocks of 6.

For semantic use, apply the .narrative_element mixin within the semantic class for the block element.

  • image content
  • Narrative title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.

    • Lorem ipsum dolor sit amet consectetur adipiscing.
    • Lorem ipsum dolor sit amet consectetur adipiscing.
    • Lorem ipsum dolor sit amet consectetur adipiscing.

    Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.

HTML example:

<article>
  <ul class="global_assignment">
    <li class="media">image content</li>
    <li class="text">
      <h4>Narrative title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
      <ul>
        <li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
        <li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
        <li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
      </ul>
      <p>Nunc <a href="#">volutpat mauris</a> non <a href="#">lectus fringilla</a> ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
    </li>
  </ul>
</article>
			

LESS mixin example:

.narrative_element() {
	.grid_16(12);
	> li {
		.grid_16(6);
		&:first-child {
			.alpha;
		}
		&:last-child {
			.omega;
		}
	}
	.media {
		.grid_16(6);
		height: 250px;
	}
	.text {
		.bulleted_list;
	}
}
			

Example semantic LESS application:

.global_assignment {
	.narrative_element;
}
			

1.1 Narrative element

To use a reverse UI version of the narrative element, simply swap the order of the .text and .media HTML blocks as shown below.

  • Narrative title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.

    • Lorem ipsum dolor sit amet consectetur adipiscing.
    • Lorem ipsum dolor sit amet consectetur adipiscing.
    • Lorem ipsum dolor sit amet consectetur adipiscing.

    Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.

  • image content

HTML example:

<article>
  <ul class="global_assignment">
    <li class="text">
      <h4>Narrative title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
      <ul>
        <li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
        <li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
        <li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
      </ul>
      <p>Nunc <a href="#">volutpat mauris</a> non <a href="#">lectus fringilla</a> ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
    </li>
    <li class="media">image content</li>
  </ul>
</article>