Text is the most fundamental content type.
Ink offers you a simple and elegant base style for text with a clear hierarchy and flexible, generic styling for all types of typographical composition you may need.
Ink's typography is designed to create a strong hierarchy with basic styles. We distribute the open source Ubuntu font family for a modern fresh look, but you can opt for non-webfont solutions and choose from three basic font stacks.
Ink's default font stack starts with the Ubuntu webfont. Make sure you can serve up the font files from your server, they are free to use and redistribute. If you can't, it's ok, the stack will default to Arial, then Helvetica, and finally, the system's default sans-serif. The stack is:
font-family: Ubuntu, Arial, Helvetica, Sans-serif;
If you prefer a system font, sans-serif option, change the font-family option to font-family: Sans-serif;
For a serif option, we went with Georgia, which is readily availabe and quite versatile. We suggest you simply use font-family: Georgia, Serif;
tip You may have noticed we went with very basic font-family declarations for the serif and sans-serif options, that just makes your life easier by defaulting to the user agent fonts and potentially serve up the most adequate font for the job in each system. Simplifying this will probably save you headaches down the road. Of course, if you have particular typography needs, feel free to experiment and configure the font-family as you see fit.
Headings are essential for defining your blocks of text. Use your h1 for a site-wide identifier, such as the logo, use the h2 as page title, and try to keep it to a single h2 per page, and then build your hierarchy of blocks using h3-h6.
Ink defines default font-size, line-height and margins for each heading level to cleanly match the body text and maximize readability.
Body text is the most basic unit of text you can define. Always use <p>
for your paragraphs and Ink takes care of font-size, line-height and proper margins.
For emphasis use either <em>
or <i>
to obtain italicized type and <strong>
or <b>
to obtain bold type. If you need further emphasis, the <mark>
HTML5 tag renders a simple text highlight.
Hypertext is the fundament of the web. Ink renders all four states of link text as can be seen on the example on the right. Simply use the anchor, <a>
tag. You can customize link appearance in the Ink configurator, using your own custom CSS or, if you're a more advanced user, editting the conf.less file.
If you need to add side notes to your text, apply the utility class .note
to your paragraphs to get smaller, faded text.
There are four basic list styles defined in Ink, which correspond to the most widely used HTML list formats and also include an unstyled list format.
<ul> <li>Two fresh avocados</li> <li>Two ripe limes</li> <li>An onion</li> <li>Parsley</li> </ul>
<ol> <li>Grill the chicken</li> <li>Pour into tortilla</li> <li>Add guacamole, sour cream and cheese</li> <li>Roll tortilla and serve</li> </ol>
<dl> <dt>Avocado</dt> <dd>Pear-shaped fruit native to Central Mexico.</dd> <dt>Guacamole</dt> <dd>An avocado-based sauce that originated with the Aztecs in Mexico.</dd> </dl>
<ul class="unstyled"> <li>Carnitas</li> <li>Jalapeno peppers</li> <li>Sour cream</li> <li>Pico de gallo</li> </ul>
You can use the InK utility classes .info
, .warning
, .caution
and .success
on html elements like headings, paragraphs, lists, mark, code, to quickly style those elements using a basic color code that can greatly aid in adding meaning to your content.
Use the classes to obtain a color background with white text or use the extra .invert
class to write colored text on transparent background. You can tweak the colors used by each class in the Ink Configurator, your own CSS or the conf.less file.
You can easily use these utility classes to label sections of highlighted text. Simply create an inline level element with the class .ink-label
and then add one of the utility classes to color code your inline label. This way, you can easily add a success message post a warning emphasize a particularly relevant information or display an error message.
We suggest you do not use punctuation before or after labels, but instead, precede and succeed with spaces.
<h6 class="warning">You are approaching your space quota</h6> <p>Your account offers 20 GB of storage space and you are now using <span class="ink-label info">19.8 GB</span>. Please remove some files or upgrade your account.</p> <p class="caution invert">Please note, files over quota will not be stored.</p>
Your account offers 20 GB of storage space and you are now using 19.8 GB. Please remove some files or upgrade your account.
Please note, files over quota will not be stored.
These elements allow you to compose specific types of text, such as addresses or quotes. Use the example code for quick recipes that work.
For abbreviations, simply use the HTML abbr
tag, like so:
<p>Ink was entirely developed with text editors, no <abbr title="What You See Is What You Get">WYSIWYG</abbr> software was harmed.</p>
Ink was entirely developed with text editors, no WYSIWYG software was harmed.
For block quotes, use the blockquote
element, with an optional cite
element to contain the source name, like so:
<blockquote> <p>You can't always get what you want.</p> <p><cite>Jagger & Richards</cite>, 1969</p> </blockquote>
You can't always get what you want.
Jagger & Richards, 1969
You can use the <address>
element to contain address elements, such as a name, street, postal code. Use headings, paragraphs and line-breaks to compose your address.
<address> <h6>SAPO</h6> <p>Av. Fontes Pereira de Melo, 40<br>1050 Lisboa</p> </address>
Av. Fontes Pereira de Melo, 40
1050 Lisboa