Roboto 2.0
Labels are the main 'text' objects you can use within ABMaterial. The standard font Material Design uses is Roboto. The font files are included in the framework.
ABMaterial has 6 heading sizes and 2 special ones: PARAGRAPH and SPAN. They are the same as in HTML using <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p> and <span>. The size and weight of PARAGRAPH and SPAN is the same as H6, but behave like <p> and <span> tags. You can find them as constants in ABMMaterial starting with 'SIZE_'.
SIZE_H1
SIZE_H2
SIZE_H3
SIZE_H4
SIZE_H5
SIZE_H6
SIZE_PARAGRAPH
SIZE_SPANBlockquotes
Blockquotes are mainly used to give emphasis to a quote or citation. You can also use these for some extra text hierarchy and emphasis. A little colored block will appear next to the text.
This is an example quotation that uses the blockquote setting.
Here is another line to make it look bigger.
Flow Text
One common flaw we've seen in many frameworks is a lack of support for truly responsive text. While elements on the page resize fluidly, text still resizes on a fixed basis. To ameliorate this problem, for text heavy pages, we've created a property that fluidly scales text size and line-height to optimize readability for the user. Line length stays between 45-80 characters and line height scales to be larger on smaller screens.
To see Flow Text in action, slowly resize your browser And watch the size of this text body change! Watch the differrence with the text below to see the difference!
One common flaw we've seen in many frameworks is a lack of support for truly responsive text. While elements on the page resize fluidly, text still resizes on a fixed basis. To ameliorate this problem, for text heavy pages, we've created a property that fluidly scales text size and line-height to optimize readability for the user. Line length stays between 45-80 characters and line height scales to be larger on smaller screens.
To see Flow Text in action, slowly resize your browser And watch the size of this text body change! Watch the differrence with the text below to see the difference!
Inline Formatting
Labels can have some basic inline formatting using some 'RichtString' codes (Case sensitive!). Note: They can have to be paired (except the AT, BR and NBSP tags)!
Code | Description |
---|---|
{B} and {/B} | Bold |
{I} and {/I} | Italic |
{U} and {/U} | Underlined |
{SUB} and {/SUB} | Subscript |
{SUP} and {/SUP} | Superscript |
{BR} | Line Break |
{NBSP} | Non breakable space |
{AL}{AT}{/AL} | Hyperlink e.g. {AL}http://alwaysbusyscorner.com{AT}Alwaysbusy's Corner{/AL} |
Truncate
Labels can be truncated if they do not fit. Three dot (...) are added to show there is more.