Saved!

codesheet.org UI 2.0 - YBWybScy

codesheet.org UI just another User Interface. Bootstrap is very Cool but sometimes you just need somethin new or different. Check it out.

codesheet.org UI CSS CSS3 Javascript

  
  <h1>Codesheet UI</h1>


<div class="spinner loading"></div>






<div class="col-100-max tac p10">
	<a href="/post.php?this=is&a=popup&test=its cool" data-title="CS Popup" data-iframe-width="700" data-iframe-height="600" class="get-cs-popup"><div class="btn xxl success-outline">Popup</div></a>
</div>


<div class="col-100-max tac p10">

	<a class="btn s black ripple-effect">Black S</a>

	<a class="btn s primary ripple-effect">Primary S</a>
	
	<div class="btn m danger ripple-effect">Danger M</div>
	
	<div class="btn gradient ripple-effect">Default </div>
	
	<div class="btn l success ripple-effect">Success L</div>
	
	<div class="btn xl info ripple-effect">Info XL</div>
	
	<div class="btn xxl warning ripple-effect">Warning XXL</div>
		
</div>


<div class="col-100-max tac p10">

	<a class="btn s black-outline">Black S</a>

	<a class="btn s primary-outline">Primary S</a>
	
	<div class="btn m danger-outline">Danger M</div>
	
	<div class="btn">Default </div>
	
	<div class="btn l success-outline">Success L</div>
	
	<div class="btn xl info-outline">Info XL</div>
	
	<div class="btn xxl warning-outline">Warning XXL</div>
		
</div>



	
<div class="bgp p20">
	  <div class="btn primary db">primary</div>
</div>
	
<div class="bgd p20">
	  <div class="btn danger db">danger</div>
</div>
	
<div class="bgs p20">
	  <div class="btn success db">success</div>
</div>
	
<div class="bgi p20">
	  <div class="btn info db">info</div>
</div>
		
<div class="bgw p20">
	  <div class="btn warning db">warning</div>
</div>
	
<div class="bgb p20">
	  <div class="btn black db">black</div>
</div>

<div class="bgv p20">
	  <div class="btn violet db">violet</div>
</div>



<div class="col-100-max p10">

	<form class="">
		Email
		<label><input type="text" placeholder="email" class="default"></label>
		Password
		<label><span class="input-tag"><i class="fa fa-lock"></i></span>
			<input type="password" class="default has-tag" placeholder="password"></label>
		
		<label><input type="text" placeholder="readonly" class="default readonly" readonly></label>

		<label><select class="default">
			<option>----</option>
			<option>one</option>
			<option>two</option>
			</select>
		</label>
		<label>
			<span class="input-tag"><i class="fa fa-lock"></i></span>
			<select class="default has-tag">
			<option>----</option>
			<option>one</option>
			<option>two</option>
			</select>
		</label>
		
		<label><textarea></textarea></label>
		
	
  <label><input type="checkbox" checked><span class="label-text">Item One</span></label>
  <div class="clear"></div>
  <label><input type="checkbox"><span class="label-text">Item Two</span></label>
  <div class="clear"></div>
  <label><input type="checkbox" disabled><span class="label-text">Disabled</span></label>
  <div class="clear"></div>
	
		
  <label><input type="radio" name="radio" checked><span class="label-text">Item One</span></label>
  <div class="clear"></div>
  <label><input type="radio" name="radio"><span class="label-text">Item Two</span></label>
  <div class="clear"></div>
  <label><input type="radio" name="radio" disabled><span class="label-text">Disabled</span></label>
  <div class="clear"></div>
		

		<label><input type="submit"></label>
		<label><button class="btn">Submit</button></label>
		
	</form>
	
</div>







<div class="col-100-max p20">
	
<p class="bgs notification success">
	This a important message
</p>
<p class="notification danger">
	This a important message
</p>
<p class="notification info">
	This a important message
</p>
<p class="notification warning">
	This a important message
</p>
<p class="notification primary">
	This a important message
</p>

</div>







<div class="col-100-max">
  <div class="col-100-300 p10">
	  <div class=" bsb bgg p10">100% - 300px</div>
  </div>

  <div class="col-300 p10">
    <div class="bsb bgg p10">300px</div>
  </div>

	
  <div class="col-50 p10">
    <div class="bgg p10">50%</div>
  </div>
 <div class="col-50 p10">
    <div class="bgg p10">50%</div>
</div>
	
	
<div class="col-33 p10">
	  <div class=" bgg p10">33%</div>
</div>
<div class="col-33 p10">
	  <div class="bgg p10">33%</div>
</div>
<div class="col-33 thired p10">
	  <div class="bgg p10 to">33% thired</div>
</div>
 
<div class="col-25 p10">
	  <div class="bgg p10">25%</div>
</div>
<div class="col-25 p10">
	  <div class="bgg p10">25%</div>
</div>
<div class="col-25 thired p10">
	  <div class="bgg p10">25%</div>
</div>	
<div class="col-25 thired p10">
	  <div class="bgg p10">25%</div>
</div>
 	
<div class="col-40 thired p10">
	  <div class="bgg p10">40%</div>
</div>	
<div class="col-60 thired p10">
	  <div class="bgg p10">60%</div>
</div>
 	 	
<div class="col-70 thired p10">
	  <div class="bgg p10">70%</div>
</div>	
<div class="col-30 thired p10">
	  <div class="bgg p10">30%</div>
</div>
 	
	
	
	
  <div class="clear"></div>
</div>




<div class="col-100-max p30">
	<pre>
		<code>
@import url(codesheet-ui.2.0.1.css);
		</code>
	</pre>
</div>



<div class="col-100-max p20">
	<table class="table">
	  <tr>
		<th>#1</th>
		<th>second</th>
		<th>thired</th>
	  </tr>
	  <tr>
		<td>#1</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#2</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#3</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#4</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	</table>
</div>


<div class="col-100-max p20">
	<table class="primary">
	  <tr>
		<th>#1</th>
		<th>second</th>
		<th>thired</th>
	  </tr>
	 <tr>
		<td>#1</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#2</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#3</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#4</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	</table>
</div>


       

<div class="col-100-max p20">
	<table class="white">
	  <tr>
		<th>#1</th>
		<th>second</th>
		<th>thired</th>
	  </tr>
	 <tr>
		<td>#1</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#2</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#3</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	  <tr>
		<td>#4</td>
		<td>second</td>
		<td>thired</td>
	  </tr>
	</table>
</div>


                  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js