HEADING TAGS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus condimentum eros
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading</h1>
<h2>Heading</h2>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
Bold
The following snippet of text is rendered as bold text
<b>This is Bold Tag</b>
Italics
The following snippet of text is rendered as italicized text
<i>This is Italic Tag</i>
Strong
The following snippet of text is rendered as Strong text
<strong>This is Strong Tag</strong>
Abbreviations text
For indicating blocks of text that are no longer relevant use the<abbr> tag.
Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover.
Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover,
providing additional context on hover and to users of assistive technologies.
<abbr>This is Italic Tag</abbr>
Inserted text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim orci in lorem tincidunt, in posuere nunc imperdiet.
<p>This is paragraph Tag</p>
Underlined text
This line of text will render as underlined
<u>This is underline Tag</u>
Em Tag
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<em>This is em Tag</em>
Small Text
This line of text is meant to be treated as fine print.
<small>This is small Tag</small>
AIONE ALIGNMENT CLASSES
Easily realign text to components with text alignment classes.
Aione Align Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium dolor odio, eget malesuada urna lacinia in. Donec scelerisque a orci rhoncus dignissim. Sed finibus facilisis sapien. Donec viverra varius sagittis. Pellentesque massa elit, euismod nec ultrices ullamcorper, semper sit amet eros.
Praesent aliquet arcu eu lacus sodales, in varius nibh porttitor. Aliquam et dolor blandit, varius orci lobortis, tempor metus. Fusce molestie interdum tempor.
Aione Align Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium dolor odio, eget malesuada urna lacinia in. Donec scelerisque a orci rhoncus dignissim. Sed finibus facilisis sapien. Donec viverra varius sagittis. Pellentesque massa elit, euismod nec ultrices ullamcorper, semper sit amet eros.
Praesent aliquet arcu eu lacus sodales, in varius nibh porttitor. Aliquam et dolor blandit, varius orci lobortis, tempor metus. Fusce molestie interdum tempor.
Aione Align Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium dolor odio, eget malesuada urna lacinia in. Donec scelerisque a orci rhoncus dignissim. Sed finibus facilisis sapien. Donec viverra varius sagittis. Pellentesque massa elit, euismod nec ultrices ullamcorper, semper sit amet eros.
Praesent aliquet arcu eu lacus sodales, in varius nibh porttitor. Aliquam et dolor blandit, varius orci lobortis, tempor metus. Fusce molestie interdum tempor.
Aione Align Justify
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium dolor odio, eget malesuada urna lacinia in. Donec scelerisque a orci rhoncus dignissim. Sed finibus facilisis sapien. Donec viverra varius sagittis. Pellentesque massa elit, euismod nec ultrices ullamcorper, semper sit amet eros.
Praesent aliquet arcu eu lacus sodales, in varius nibh porttitor. Aliquam et dolor blandit, varius orci lobortis, tempor metus. Fusce molestie interdum tempor.
<div class="Aione-align-left"> </div>
<div class="Aione-align-right"> </div>
<div class="Aione-align-center"> </div>
<div class="Aione-align-justify"> </div>
TABLES
Be sure to use properly formed table markup with and when building a table.
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
<table class="" >
<thead>
<tr>
<th>Name </th>
<th>Item Name </th>
<th>Item Price </th>
</tr>
</thead>
</tbody>
<tr>
<td>Alvin </td>
<td>Eclair </td>
<td>$0.87 </td>
</tr>
<tr>
<td>Alan </td>
<td>Jellybean </td>
<td>$3.76</td>
</tr>
</thead>
</table >
MEDIA QUERIES
Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skeleton’s grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:
Mobile first queries{}
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
EXAMPLES
Demo Landing Page
Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices.