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.

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;

“Quotes”, „More quotes”

© copyright, ® registered, ™ trademark

… ellipsis

← arrow left … arrow right →

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.

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 Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Text-decorations

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

bold text

italic text

bold italic text

code text

bold code text

underlined text

strike through text

Citations

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

<cite> element:

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

<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:

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

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:

foswikiLarge: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.

foswikiNormal: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.

foswikiSmallish: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

foswikiSmall: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla

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.

I am on the left
I am on the right.
The rest of the text floats as normal til the next clear. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et purus aliquet, consequat massa blandit, eleifend est. Duis vehicula purus sem, at mollis enim faucibus non. Proin odio elit, varius blandit metus non, venenatis fringilla justo. Vestibulum dui felis, vulputate et dignissim ut, consectetur at lorem. Maecenas scelerisque, eros porttitor venenatis malesuada, neque ipsum hendrerit libero, nec rutrum urna sapien nec eros. Ut adipiscing fermentum magna, aliquet condimentum lorem porttitor et. Sed eu ultricies nulla.

Addresses

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

Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890 first.last@gmail.com

Message styles

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

Success, everything is fine. Click here.

Warning, could not connect to server. Click here.

Error, something is wrong. Click here.

Check this out. Click here.

medal_gold_1 Some note with a custom icon and a bit of a style around it.

A paragraph to stand out from the rest.

Lists

ordered

  1. item
  2. item
  3. item
  4. item
unordered

  • item
  • item
  • item
  • item
no indent

  • item
  • item
  • item
  • item
foswikiOrangeBullets

  • item
  • item
  • item
  • item
foswikiBlueBullets

  • item
  • item
  • item
  • item
foswikiBlackBullets

  • item
  • item
  • item
  • item
foswikiGreenBullets

  • item
  • item
  • item
  • item
foswikiPinkBullets

  • item
  • item
  • item
  • item
foswikiRedBullets

  • item
  • item
  • item
  • item
foswikiStarBullets

  • item
  • item
  • item
  • item
foswikiWhiteBullets

  • item
  • item
  • item
  • item
foswikiArrowBullets

  • item
  • item
  • item
  • item
foswikiAddBullets

  • item
  • item
  • item
  • item
foswikiNoBullets

  • item
  • item
  • item
  • item
custom icon

  • user item
  • emoticon_smile item
  • user_red item
  • user_green item

Definition list

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
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
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

Indenting

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

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

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

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

# Consectetuer Dolor Adipiscing Dignissim
1 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
2 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
3 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
4 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 foswikiStripes

# Consectetuer Dolor Adipiscing Dignissim
1 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
2 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
3 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
4 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

foswikiLayoutTable

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
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
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

foswikiNullTable

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
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
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

Forms

input, textarea, select, check boxes, radio boxes, buttons, form steps, horizontal, vertical
Topic revision: r1 - 25 Jan 2017, UnknownUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding CALRAS? Send feedback