Colors

This isn't Technicolor™ so the colour scheme is fairly simple and can be reversed for the blanche theme. The blacks aren't fully black and the whites are slightly off as well to give a grainy, film-like vibe.

The shades of grey can be used to highlight and create gradients, whereas the --highlight grey is the lightest available to allow for easy reading against the black / dark enough for legible white text in blanche.

When a pop of colour is required to draw attention to an element, that's where deco-gold comes in to class up the joint. It should be used primarily to indicate actions, like links, hover and buttons.

Paragraph styles

This is the strong tag in a paragraph. This is the em tag in a paragraph, elements such as <strong> and <em> are inline. Here is an example of the abbreviation tag. You'd use abbr for things like HTML and CSS.

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

Buttons

There are three types of button. The default styling is a transparent background with a box shadow, and inverted colours on hover.

Submit

				
<button>Submit</button>
				
			

The button with the 'danger' class is or actions that have consequences. The deco-gold colour is used to draw attention to the button.

Finally, the button with the 'action' class is for confirming an action that will commit a change for the user.

Customize buttons by adding the appropriate class.

Delete Go!

				
<button 
	class="danger"
>Delete</button>

<button 
	class="action"
>Go!</button>
				
			

Links

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

Links are initially rendered in deco-gold and underlined for clarity, with a little extra space to improve legibility. On hover, they return to the text shade to indicate their interactivity. Visited links are grey to show they have been accessed.

				
<p>This <a href="#">paragraph</a> contains a couple <a
href="#">links</a> to show off their styles in context.</p>
				
			

Forms and controls

By default, forms have an art-deco border and the background colour is set to the darkest/lightest shade for legibility so that it's accessible wherever in the gradient background the form is placed.

You can disable both the border and the background colour by applying the 'no-border' class.

Input and label

Form labels are left aligned and larger than paragraph text. Focus on inputs is shown by applying the gold-deco haze.

Placeholder text is grey, and input text is white in noir theme, then the input text is black in blanche theme.

				
<label>
	<span>Text:</span>
	<input type="text" placeholder="What is your name?">
</label>
				
			

Checkbox, Radio and Select

To vertically align the form controls, wrap each one in a div with the class 'form-control'.

The checkbox and radio inputs override the browser defaults to maintain the noir theme. They make use of the 'action' nature of the --deco-gold color to indicate selection.

				
<div class="form-control">
	<label>
	<input type="checkbox" checked="checked">
</label>
</div>

<div class="form-control">
	<label>
	<input type="radio" name="radio">
	</label>
</div>

<div class="form-control">
	<label>
	<select>
	<option>Option 1</option>
	<option>Option 2</option>
	</select>
	</label>
</div>
				
						

Navbar

Navbar 1

A navbar with all centralised with equal spacing around.

Nest the h1 title and the ul inside a div with the class 'navbar'. By default, the menu items are identified with a top and bottom border to separate them from the rest of the page content. Hovering over an item shows the deco-gold.

					
<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

You can also create a sub navbar by affixing the class 'right' to pull the menu items to the right of the screen. These sub menus can be stacked under a regular navbar, or used independently. They do not have the border.

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

Navbar 3

Finally, you can also pull the navbar to the left of the screen. Note that in this example, the title appears underneath the menu.

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

Page Footer

The footer is a simple grid with padding between the three columns.