1.0 - Typography
1.1 - Fonts
Examples of fonts used in this framework.
Default styling |
|
The quick brown fox jumps over the lazy dog |
|
Muli normal |
.mee-font-muli |
The quick brown fox jumps over the lazy dog |
|
Muli Italic |
.mee-font-muli-italic |
The quick brown fox jumps over the lazy dog |
|
Lato |
.mee-font-lato |
The quick brown fox jumps over the lazy dog |
|
Lato italic |
.mee-font-lato-italic |
The quick brown fox jumps over the lazy dog |
|
Lato bold |
.mee-font-lato-bold |
The quick brown fox jumps over the lazy dog |
|
Lato bold and italic |
.mee-font-lato-bold-italic |
The quick brown fox jumps over the lazy dog |
|
<p class="{$modifiers}">The quick brown fox jumps over the lazy dog</p>
1.2 - Headings
Your standard, everyday main page heading.
Default styling |
|
| <{$modifiers}>The quick brown fox jumps over the lazy dog | |
Heading 1 |
h1 |
The quick brown fox jumps over the lazy dog |
|
Heading 2 |
h2 |
The quick brown fox jumps over the lazy dog |
|
Heading 3 |
h3 |
The quick brown fox jumps over the lazy dog |
|
Heading 4 |
h4 |
The quick brown fox jumps over the lazy dog |
|
Heading 5 |
h5 |
The quick brown fox jumps over the lazy dog |
|
Heading 6 |
h6 |
The quick brown fox jumps over the lazy dog |
|
<{$modifiers}>The quick brown fox jumps over the lazy dog</{$modifiers}>
1.3 - Paragraph
Examples of rodered and unordered lists
Default styling |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum est tortor, nec tincidunt justo iaculis a. Aliquam est nunc, ultrices sit amet semper ac, pellentesque ut augue. Nullam et sapien eleifend, molestie orci ut, euismod sapien. Mauris vestibulum ultrices mi. Pellentesque eget quam est. Vestibulum ac purus at mi tristique laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla eleifend luctus sapien, in convallis purus aliquam quis. Proin sit amet consequat sapien. Suspendisse potenti. Duis odio justo, elementum ut rhoncus ut, tincidunt eleifend tellus. Donec tincidunt ligula nec nisl aliquam, sit amet ultricies purus placerat. Quisque vitae dictum elit. Curabitur elementum pharetra lacus, et sagittis orci laoreet vel. Sed vel justo nec ligula blandit consectetur eget sodales velit. Vestibulum suscipit dui turpis, non malesuada orci scelerisque sed. Mauris sed orci pharetra, mollis diam a, hendrerit orci. Ut a mollis massa. Donec nec justo nec leo congue euismod sit amet id mi. Morbi pretium, turpis mollis feugiat ullamcorper, sem diam mollis ipsum, cursus gravida nisl nibh in quam. |
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum est tortor, nec tincidunt justo iaculis a. Aliquam est nunc, ultrices sit amet semper ac, pellentesque ut augue. Nullam et sapien eleifend, molestie orci ut, euismod sapien. Mauris vestibulum ultrices mi. Pellentesque eget quam est. Vestibulum ac purus at mi tristique laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla eleifend luctus sapien, in convallis purus aliquam quis. Proin sit amet consequat sapien. Suspendisse potenti. Duis odio justo, elementum ut rhoncus ut, tincidunt eleifend tellus.</p> <p>Donec tincidunt ligula nec nisl aliquam, sit amet ultricies purus placerat. Quisque vitae dictum elit. Curabitur elementum pharetra lacus, et sagittis orci laoreet vel. Sed vel justo nec ligula blandit consectetur eget sodales velit. Vestibulum suscipit dui turpis, non malesuada orci scelerisque sed. Mauris sed orci pharetra, mollis diam a, hendrerit orci. Ut a mollis massa. Donec nec justo nec leo congue euismod sit amet id mi. Morbi pretium, turpis mollis feugiat ullamcorper, sem diam mollis ipsum, cursus gravida nisl nibh in quam.</p>
1.4 - Links
Examples of rodered and unordered lists
Default styling |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum est tortor, nec tincidunt justo iaculis a. Aliquam est nunc, ultrices sit amet semper ac, pellentesque ut augue. Nullam et sapien eleifend, molestie orci ut, euismod sapien. Mauris vestibulum ultrices mi. Pellentesque eget quam est. Vestibulum ac purus at mi tristique laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla eleifend luctus sapien, in convallis purus aliquam quis. Proin sit amet consequat sapien. Suspendisse potenti. Duis odio justo, elementum ut rhoncus ut, tincidunt eleifend tellus. |
|
A link that is appearing outside modeal window |
.mee-popup-outside |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum est tortor, nec tincidunt justo iaculis a. Aliquam est nunc, ultrices sit amet semper ac, pellentesque ut augue. Nullam et sapien eleifend, molestie orci ut, euismod sapien. Mauris vestibulum ultrices mi. Pellentesque eget quam est. Vestibulum ac purus at mi tristique laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla eleifend luctus sapien, in convallis purus aliquam quis. Proin sit amet consequat sapien. Suspendisse potenti. Duis odio justo, elementum ut rhoncus ut, tincidunt eleifend tellus. |
|
<p>Lorem <a class="{$modifiers}" href="#">ipsum dolor sit amet</a>, consectetur adipiscing elit. <a href="#">Phasellus interdum est tortor, nec tincidunt justo iaculis a</a>. Aliquam est nunc, ultrices sit amet semper ac, pellentesque ut augue. Nullam et sapien eleifend, molestie orci ut, euismod sapien. Mauris vestibulum ultrices mi. Pellentesque eget quam est. Vestibulum ac purus at mi tristique laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla eleifend luctus sapien, in convallis purus aliquam quis. Proin sit amet consequat sapien. Suspendisse potenti. Duis odio justo, elementum ut rhoncus ut, tincidunt eleifend tellus.</p>
1.5 - Unordered list
Examples of unordered list
Default styling |
|
|
|
Table of contents list |
.mee-toc |
|
|
<ul class="{$modifiers}">
<li>Coffee</li>
<li>Milk</li>
</ul>
1.6 - Ordered list
Examples of ordered list
Default styling |
|
|
|
Table of contents list |
.mee-toc |
|
|
Auto increment the next number in ordered list |
.mee-increment |
|
|
<ol class="{$modifiers}">
<li>Coffee</li>
<ol>
<li>Coffee</li>
<li>Coffee</li>
<li>Coffee</li>
</ol>
<li>Milk</li>
</ol>