NatSkinTypography

This topic gives you a short overview of the elements styled by NatSkin as well as the CSS classes being used to do so.

Links

• http://demo.gantry-framework.org/typography
• http://getbootstrap.com/2.3.2/base-css.html
• http://getbootstrap.com/css/#type

Typography

Below markup will be replaced by appropriate HTML entities. This requires to enable below setting in your Foswiki configuration.

$Foswiki::cfg{NatSkin}{FixTypograpghy} = 1;

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Horizontal Ruler

---

Body copy

NatSkin takes care of vertical rhythm by taking care line heights of body text and headings obey to a predefined grid. Hit the button to display a grid checking vertical and horizontal accurate typography.

Text-decorations

Put emphasize in your text using Foswiki Markup or using HTML tags

Citations

Use <cite> or <blockquote> to put emphasize on complete paragraphs.

<cite> element:

<blockquote> element:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

— Henry Moore

<blockquote class="foswikiBlockQuote"> element:

Code

Use Foswiki ML to add inline code or wrap it into HTML <code> …. </code>

Blocks of code are marked up using <verbatim> … </verbatim> to make sure content inside is not executed by Foswiki and proper escaping is performed. Compare this to the normal <pre> … </pre> HTML where macros are still executed whereas results are formatted as code.

Sample text with makros %SEARCH{... }% and _dummy_ text.

Code can be prettified using the chili jQuery module.

%JQREQUIRE{"chili"}%
… if not loaded by default anyway (see configure).

Sample text with makros
%SEARCH{
  "foo bar"
  type="query"
}%

Font sizes

Use classes foswikiLarge, foswikiNormal, foswikiSmallish and foswikiSmall to control font sizes:

Floating Elements

Use foswikiLeft or foswikiRight on any element to let it foat. Use the %CLEAR% macro to clear any floating elements beyond its position. Or use the clearfix class for a container to keep all float elements inside it.

Addresses

Present contact information. Preserves line breaks and emphasizes the first line

Message styles

Use css classes foswikiSuccessMessage, foswikiErrorMessage, foswikiWarningMessage, foswikiInfoMessage, foswikiHelp or foswikiAlt to give paragraphs special meaning.

Lists

Definition list

Indenting

Tables

foswikiTable

Consectetuer	Dolor	Adipiscing	Dignissim
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	sed diam nonummy nibh feugiat nulla facilisis at	vero eros et accumsan et iusto odio dignissim qui	blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	sed diam nonummy nibh feugiat nulla facilisis at	vero eros et accumsan et iusto odio dignissim qui	blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	sed diam nonummy nibh feugiat nulla facilisis at	vero eros et accumsan et iusto odio dignissim qui	blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

Consectetuer	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	sed diam nonummy nibh feugiat nulla facilisis at	vero eros et accumsan et iusto odio dignissim qui	blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
Dolor	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	sed diam nonummy nibh feugiat nulla facilisis at	vero eros et accumsan et iusto odio dignissim qui	blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
Adipiscing	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	sed diam nonummy nibh feugiat nulla facilisis at	vero eros et accumsan et iusto odio dignissim qui	blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
Dignissim	Lorem ipsum dolor sit amet, consectetuer adipiscing elit,	sed diam nonummy nibh feugiat nulla facilisis at	vero eros et accumsan et iusto odio dignissim qui	blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

foswikiFlatTable

foswikiFlatTable foswikiStripes

Forms

input, textarea, select, check boxes, radio boxes, buttons, form steps, horizontal, vertical

Username

Password

---

Login