0.8.6 beta

| Axle | 'text'

1. Heading text

heading_1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

1.1 Special Heading text

For OOCSS application, apply the .google_font_alpha to a block element containing heading tags. For a semantic .LESS approach, apply .google_font_alpha to a semantically named class.

heading_1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

heading_5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.

OOCSS Example:

<div class="home_page_hero google_font_alpha">
  <h1>heading_ 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere malesuada adipiscing.</h1>
</div>
			

Semantic .LESS approach

.home_page_hero {
  .google_font_alpha;
}

Supporting markup

<div class="home_page_hero">
  <h1>This LESS stuff is pretty awesome!</h1>
</div>

2. body text

Font styles are based on em scales, see How to Size Text in CSS. Setting the 'medium' or base font size for the application on the body tag sets the app precedence.

At the appropriate block level apply the LESS mixins of macro, extra_small, small, medium, large, extra_large, xx_large to the semantically named classes in your design LESS.

@macro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor diam, condimentum gravida ultricies non, sollicitudin eget nunc.

@extra_small: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor diam, condimentum gravida ultricies non, sollicitudin eget nunc.

@small: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor diam, condimentum gravida ultricies non, sollicitudin eget nunc.

@medium: (default site style)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor diam, condimentum gravida ultricies non, sollicitudin eget nunc.

@large: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor diam, condimentum gravida ultricies non, sollicitudin eget nunc.

@extra_large: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor diam, condimentum gravida ultricies non, sollicitudin eget nunc.

@xx_large: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor diam, condimentum gravida ultricies non, sollicitudin eget nunc.

Example HTML:

<article class="leading_article">
  <header>
    This is going to be some large text!
  </header>
  <p>For the sake of giving emphasis to the leading article, we will make the body copy larger.</p>
</article>

Example LESS:

.leading_article {
  header {
    @xx_large;
  }
  p {
    @large;
  }
}

3. Standard body links

The following examples show that by simply using an <a> tag will produce the desired UI.

4. blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-- Some guy


<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<p><cite>-- Some guy</cite></p>
			

5 Unordered lists

Since <ul></ul> tags are used a lot for layout, to regain a standard unordered list UI, use the .bulleted_list mixin in your semantic LESS class as illustrated.

  • Standard unordered list of items
  • Thing to list out
  • Grocery list maybe is a good one?
  • Right, list of Netflix movies I will never watch!

Example HTML:

<article class="example_bullets">
  <ul>
    <li>Standard unordered list of items</li>
    <li>Thing to list out</li>
    <li>Grocery list maybe is a good one?</li>
    <li>Right, list of Netflix movies I will never watch!</li>
  </ul>
</article>
			

.LESS mixin

.bulleted_list() {
	ul {
		list-style: disc;
		margin: 0 0 1.5em 1.6666667em;
	}
	li {
		float: none;
	}
}			

Example semantic LESS

.example_bullets {
	.bulleted_list;
}