File: class.font.htm

<div class='css-tool tool-font-generator row'>

  <div class='tool-title'>Font</div>
  
  <div class='display small-12 columns'><div class='text'>Hello World!</div></div>
  
  
  <div class='inputs small-12 columns'>
    
    
    
    <div class='inputb font-family'>
      <div class='label'>Font Family</div>
      <div class='field'><input type=text value="Poiret One" /></div>
    </div><!-- end input -->
    
    <div class='input font-size'>
      <div class='label '>Font Size</div>
      <div class='field '><input type=text value="24px" /></div>
    </div><!-- end input -->
    
    <div class='input font-align'>
      <div class='label '>Font Align</div>
      <div class='field '>
              <select>
                	<option value='left'>left</option>
                	<option value='center' selected>center</option>
                	<option value='right'>right</option>
              </select>      
      </div>
    </div><!-- end input -->
    
    <div class='input font-type '>
      <div class='label '>Font Type</div>
      <div class='field '>
              <select>
                	<option value='left'>browser</option>
                	<option value='google' selected>google font</option>
              </select>      
      </div>
    </div><!-- end input -->
    
    
    <div class='input opacity '>
      <div class='label '>Opacity (0.0 - 1.0)</div>
      <div class='field '><input type='text' value='1.0' /></div>
    </div><!-- end input -->
    
     <div class='input letter-spacing '>
      <div class='label '>Letter Spacing</div>
      <div class='field '><input type='text' value='0.02em' /></div>
    </div><!-- end input -->
   
    
    
	<div class='colors row'>
 
      <div class='input red small-12 medium-4 columns'>
			<div class='label'>Red (0-255)</div>
			<div class='field'><input type='text' value='0' /></div>
      </div><!-- end input -->
      
      <div class='input green  small-12 medium-4 columns'>
 			<div class='label'>Green (0-255)</div>
			<div class='field'><input type='text' value='0' /></div>
      </div><!-- end input -->
      
      <div class='input blue   small-12 medium-4 columns'>
			<div class='label '>Blue (0-255)</div>
			<div class='field '><input type='text' value='0' /></div>
      </div><!-- end input -->
      
    </div><!-- End Colors -->
    
    
    


	<div class='checkboxes row'>
   
 		<div class='spacer small-3 columns'>&nbsp;</div>

      	<div class='input checkbox bold small-3 columns'>
			<div class='row'>
				<div class='label small-6 columns'>Bold</div>
				<div class='field small-6 columns'><input type='checkbox' value='1' /></div>
			</div>
      	</div><!-- end input -->
      
        <div class='input checkbox italic small-3 columns'>
			<div class='row'>
				<div class='label small-6 columns'>Italic</div>
				<div class='field small-6 columns'><input type='checkbox' value='1' /></div>
			</div>
      	</div><!-- end input -->
		
		<div class='spacer small-3 columns'>&nbsp;</div>
      
       
    </div><!-- end checkboxes -->
    
    
  </div><!-- end inputs -->
  
  
  <div class='code-area small-12 columns'>
      <div class='label'>CSS</div>
	<div class='field'>
		<textarea></textarea>
	</div>
  </div>


  
  
  
</div><!-- end tool-box-shadow-generator -->