By default, the text is set to use the Arial, Helvetica, and sans-serif fonts at a base size of 12px (and 14px for resolutions lower than 620px like mobile phones), using EM units to allow the font size to be adjusted based on the device without the need for REM. This ensures that the website functions properly in all browsers.

The text includes the classic HTML tags: <b> and <strong> for bold text, <i> and <em> for italic text, and we've brought back the classic <u> tag for underlined text.

There are ways to modify the text of headings and paragraphs. For headings, you can use .subheading to display the heading text without bold formatting, while if you use <small>, the text will appear 60% smaller and in gray ideal for slogans or notes.

For paragraphs, if you use <small>, the text will appear 60% smaller ideal for short notes.

There are tags for highlighting text, using .highlight-[color]

These are the types of highlights:

.highlight-clear

.highlight-red

.highlight-green

.highlight-blue

.highlight-yellow

In addition, there are selectors for aligning text using align-[direction]

These are the directions of align:

.align-left

.align-right

.align-center

Note: you also can use <center> to align items to center

Tags

Tags Variations

Example Table:

<th>
<td>	<td>	<td>
<th>	<td>	<td>

Table <thead> Elements:

<th>
<td>

Table <tbody> Elements:

<th>	<td>

Code:

List:

<ul>

• <li>
• <li>
• <li>
• <li>
• <li>

List Square:

<ul class="list--square">

• <li>
• <li>
• <li>
• <li>
• <li>

List Circle:

<ul class="list--circle">

• <li>
• <li>
• <li>
• <li>
• <li>

List disc:

<ul class="list--disc">

• <li>
• <li>
• <li>
• <li>
• <li>

Ordered List:

<ol>

1. <li>
2. <li>
3. <li>
4. <li>
5. <li>

IMPORTANT

Example 1:

Example 2:

Container, Wrap

We use a special layout system... to avoid any legal disputes with other frameworks. We drew inspiration from the naming conventions of the old IUSACELL website, and its behavior is based on how ZURB Foundation 2.x and Twitter Bootstrap 1.x work.

That's why we use the .container class for the outer block and .wrap for the inner block. This means that .container defines the outer space, and .wrap defines the inner space.

Classes:

.container	This causes the element to be displayed as block in its entirety on the page, with 12px of padding on each side.
.wrap	This goes inside .container and creates a 900px centered area, which adjusts based on the screen size.
.warp-fluid	This goes inside .container and creates a 100% area, which adjusts based on the screen size.

Modifyers: remember to add the class ".container"

.container--ext	Set .wrap to stretch up to 1000px
.container--ext-plus	Set .wrap to stretch up to 1400px and change the side padding from 12px to 24px (for resolutions less than 922px, the padding remains 12px)

The .box class simply resets floats (zoom: 1) and gives you a block-level element to pad. Padding is added through the .box--p-[size] modifiers, from 2 to 20 pixels, so you never need a custom inline style just to add spacing.

.box--p-2	2px padding
.box--p-4	4px padding
.box--p-6	6px padding
.box--p-8	8px padding
.box--p-10	10px padding
.box--p-12	12px padding
.box--p-14	14px padding
.box--p-16	16px padding
.box--p-18	18px padding
.box--p-20	20px padding

Example:

A .block is a full-width, self-clearing container (it applies ClearFix automatically) meant to wrap a colored panel, alert, or callout. Combine it with .box--p-[size] for the inner padding, same as you saw in the alert on the Welcome section.

Border Style:

.block--outline	Adds a 1px solid border (negative margin keeps widths aligned)
.block--border-classic	Adds an old-school 2px outset (beveled) border, Win95/98 style
.block--radius	4px rounded corners on the block, and on its .b-heading/.b-content if present (see "Block Headings" below)

Color:

.block--clear	Light gray background
.block--dark	Dark background, use with .block--txt-clear or .block--txt-white for the text
.block--classic	Flat Win95/98-gray background
.block--classic-y2k	Flat Win2000/XP-beige background
.block--red	Red background
.block--green	Green background
.block--blue	Blue background
.block--yellow	Yellow background

Text Color:

.block--txt-dark	Dark gray text, for light backgrounds
.block--txt-clear	Muted gray text, for dark backgrounds
.block--txt-black	Solid black text
.block--txt-white	Solid white text

Effect:

.block--nice	Adds a subtle top-to-bottom gloss gradient to the block (falls back to flat color on old IE, see .lt-ie9 .block--nice). If the block has a .b-heading, .block--nice glosses the heading too

Note: always pair a color modifier with a matching text-color modifier (e.g. .block--dark + .block--txt-clear) so the text stays readable.

Examples:

Updated in V2.0: a titled panel is now built from two siblings inside .block, not one nested div — .b-heading for the title bar and .b-content for the body. When the block has .block--outline or .block--border-classic, both the heading and the content get their own matching border automatically (heading: full border; content: border-top only, so they read as one continuous panel). Add .block--radius to the block to round the heading's top corners and the content's bottom corners.

.b-heading--black	Black heading, white text
.b-heading--white	Light gray heading, dark text
.b-heading--classic	Windows 95/98 title-bar look: flat navy blue, white text
.b-heading--classic-2k	Windows XP "Luna" title-bar look: blue gradient, white text
.b-heading--red	Red heading, white text
.b-heading--green	Green heading, white text
.b-heading--blue	Blue heading, white text
.b-heading--l-blue	Light blue heading, white text
.b-heading--yellow	Yellow heading, dark text

Note: .b-heading--nice (or .block--nice on the parent) adds the gloss effect to the title bar only; the .b-content stays flat.

Code:

Example:

A handful of no-frills utility classes are always available, independent of the grid or the button/block systems:

.left	float: left
.right	float: right
.hide	display: none, always
.hide-lt-600 / .hide-lt-700	Hides an element only under 600px / 700px width
.hide-700 / .hide-900 / .hide-1000 / .hide-1400	Hides an element only above the matching breakpoint
.hide-ie6 / .hide-ie7 / .hide-ie8 / .hide-ie9	Hides an element only in that version of Internet Explorer (needs the <html>/<body> IE conditional classes from "Before Starting")

Example:

Any <a> (or other inline element) becomes a button once you add .btn. From there you stack modifiers for size, position, border, corner shape, gloss effect and color — same "class + class--modifyer" system used everywhere else in LegaCSS.

Size:

.btn--tiny	Smaller text and padding
.btn--regular	Default size
.btn--huge	Larger text and padding, good for calls-to-action

Position:

.btn--left	float: left
.btn--right	float: right
.btn--default	No float, clears both sides
.btn--default-full	Block-level, 100% width, no side padding

Border:

.btn--outline	1px solid border
.btn--border-classic	2px outset border, inset when :active (classic pressed-button feel)

Shape:

.btn--radius	4px rounded corners
.btn--round	20px rounded (pill-shaped) corners

Effect:

.btn--nice	Subtle top-lit gloss gradient, inverts on :active for a pressed look (skipped on old IE)

Color:

.btn--black / .btn--white	Black or off-white/gray button
.btn--classic / .btn--classic-2k	Win95/98-gray or Win2000/XP-beige button
.btn--red / .btn--green / .btn--blue / .btn--l-blue / .btn--yellow	Solid color buttons, each with a matching :hover shade

Examples:

.btn--tiny .btn--regular .btn--huge

.btn--left .btn--right .btn--default .btn--default-full

.btn--blue .btn--green .btn--red

.btn--yellow .btn--black .btn--white

.btn--classic .btn--classic-y2k

.btn--outline .btn--white .btn--border-classic .btn--classic .btn--border-classic .btn--classic-y2k

.btn--red .btn--nice .btn--red .btn--radius .btn--red .btn--round

Code:

Button Groups:

Wrap a set of buttons in .btn-gp to merge their borders into a single strip. Add .btn-gp--radius or .btn-gp--round so only the first and last buttons keep rounded outer corners — mark them with the .first-child / .last-child classes for old IE, since :first-child/:last-child aren't reliable there.

One Two Three

Add .txt-input to any <input> or <textarea> for a classic inset field (2px inset border, darkens slightly on :focus). Same size and shape modifiers as buttons apply.

.txt--tiny / .txt--regular / .txt--huge	Field size
.txt--radius / .txt--round	Rounded corners
.txt--nice	Adds a light 1px border with an inset shadow for extra depth

Example:

.txt-input .txt--tiny

.txt-input .txt--regular

.txt-input .txt--huge

.txt-input .txt--regular .txt--nice

.txt-input .txt--regular .txt--radius

.txt-input .txt--round .txt--radius

Building a page from scratch

LegaCSS deliberately skips nav bars, footers, and any JavaScript, so putting a page together is mostly about picking the right containers and reusing the class + modifier system consistently.

1. Add the IE conditional classes to <html> or <body> (see "Before Starting" above) so the .ie6–.ie9 and .hide-ie[6-9] hooks work.
2. Wrap each section of the page in .container, and put a .wrap inside it to center your content at 900px (or use .container--ext / .container--ext-plus for wider layouts).
3. Lay out content with .row / .row--spaced and .col--w-[percentage] columns.
4. Use .box--p-[size] for padding and .block / .block--[color] for callouts and panels.
5. Style your own nav, footer, and interactive bits by hand, on top of the typography, buttons, and form classes LegaCSS already gives you.