Typography

Below you can get an idea of how Alyeska's default CSS will effect your images and typography when you're creating pages and blog posts.

Standard Paragraph Spacing

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere.

Integer in blandit lorem. Curabitur iaculis ornare egestas. Vivamus imperdiet accumsan ipsum, sed convallis dolor imperdiet eget. Cras semper arcu ut est vehicula malesuada. Cras vitae augue nec erat accumsan varius. Sed euismod suscipit ultricies. Fusce sed dapibus elit. Mauris adipiscing turpis arcu, nec lacinia erat. Cras cursus scelerisque dui, vel facilisis lorem imperdiet sed. Integer et sapien augue, ac volutpat.

Text-Wrapped Image

Sample Image

With Alyeska, it's easy to wrap text around an image. When you add in the HTML code for an image, just add the class "alignleft" or "alignright" into the <img> tag. If you want to center the image, you can also add the class "aligncenter".

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus. Nullam viverra interdum nunc, vitae malesuada orci dignissim vitae. Etiam bibendum, urna non eleifend adipiscing, est tellus convallis leo, et dignissim justo arcu non dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in tellus eu odio iaculis ultricies. Sed ac dapibus mi. Sed congue quam non ante pharetra id aliquam nunc elementum. Donec et purus id dui pellentesque porta. Nam imperdiet fringilla nunc non malesuada.

A Standard Image with class "pretty"

Sample Image

An Image That Links to a Lightbox Popup

Sample Image
*Note: To have an image link to a lightbox popup like the above example, you simply link to the enlarged version of the image and place rel="lightox" within the <a> tag. Also, to give it the fade out effect on the hover, I've added class "image-button" to the <a> tag, as well.

Headers

H1 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus. Nullam viverra interdum nunc, vitae malesuada orci di.

H2 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus. Nullam viverra interdum nunc, vitae malesuada orci di.

H3 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus. Nullam viverra interdum nunc, vitae malesuada orci di.

H4 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus. Nullam viverra interdum nunc, vitae malesuada orci di.

H5 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus. Nullam viverra interdum nunc, vitae malesuada orci di.

H6 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus. Nullam viverra interdum nunc, vitae malesuada orci di.

Unordered List

  • Vestibulum in mauris semper tortor interdum ultrices.
  • Sed vel lorem et justo laoreet bibendum. Donec dictum.
  • Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
  • Praesent volutpat eros quis enim blandit tincidunt.
  • Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.

Ordered List

  1. Vestibulum in mauris semper tortor interdum ultrices.
  2. Sed vel lorem et justo laoreet bibendum. Donec dictum.
  3. Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.
  4. Praesent volutpat eros quis enim blandit tincidunt.
  5. Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis dictum eros non laoreet. Sed dui dolor, semper ac convallis sed, gravida eu eros. Praesent faucibus tincidunt volutpat. Aenean ac tellus augue, non suscipit massa. Duis pellentesque dignissim metus ac porta. In ultricies mi in dui consequat ac euismod turpis gravida.

Tables

This is a table with the class “clean” added to it.

Header 1 Header 2 Header 3 Header 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4

Alert Boxes

This is a sample of the ‘alert’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘approved’ style. Use this style to denote very important information to your users.
This is a sample of the ‘attention’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘camera’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘cart’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘doc’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘download’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘media’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘note’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘notice’ shortcode. Use this style to denote very important information to your users.
This is a sample of the ‘quote’ shortcode. Use this style to denote very important information to your users.

Pre Example

This is a sample <pre>...</pre> tag:

div.modulebox-black div.bx1 {
	background: url(../images/black/box_bl.png) 0 100% no-repeat;
}

div.modulebox-black div.bx2 {
	background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
	background: url(../images/black/box_tl.png) 0 0 no-repeat;
	padding: 0;
	margin: 0;
}