Cards

Hello World

And the the card says hello.

Hello World

And the the card says hello.

Hello World

And the the card says hello.

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

				
<h1>Headings</h1>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
				
			

Paragraph styles

This is an average paragraph. It includes some inline elements such as <strong> and <em>.

				
<p>This is an <strong>average</strong> paragraph. It includes some <em>inline</em> elements such as <strong> and <em>.</p>
				
			

Buttons

This is your average button. You might want to click it.

Submit

				
<button>Submit</button>
				
			

This button has consequences. You might want to think twice before clicking.

Custimize buttons by adding CSS variables inline or with a class.

Delete Go!

				
<button 
	style="--weight: bold; 
	--background-color: #f85353;"
>Delete</button>

<button 
	style="--background-color: #6bc253;"
>Go!</button>
				
			

Links

This paragraph contains a couple links to show off their styles in context.

Forms and controls

Colors

Navbar

Navbar 1

A navbar with all elements on the left.

Use a single child under div.navbar.

					
<div class="navbar">
	<ul>
		<li><h1 class="title">TITLE</h1></li>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
	</ul>
</div>
					
				

Navbar 2

A navbar with groups of elements on the left and the right.

Use two children under div.navbar.

					
<div class="navbar">
	<ul>
		<li><h1 class="title">TITLE</h1></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Mission</a></li>
	</ul>
	
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
					
				

here is an alternative with the site title on the left and links on the right.

						
<div class="navbar">
	<ul>
		<li><h1 class="title">TITLE</h1></li>
	</ul>
	
	<ul>
		<li><a href="#">Products</a></li>
		<li><a href="#">Mission</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
						
					

Navbar 3

With three children the second child will be centered. This example places the site title in the center.

						
<div class="navbar">
	<ul>
		<li><a href="#">Products</a></li>
		<li><a href="#">Mission</a></li>
	</ul>
	
	<ul>
		<li><h1 class="title">TITLE</h1></li>
	</ul>
	
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
						
					

Page Footer

Components

Frmwrk CSS also includes some slideshow components. To use these include the JS files at the bottom of the body and use the markup as shown.

... code sample needed ...
				

Full Color Palette