Saved!

Design UI/UX Framework - codesheet UI 3.0.1 - 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 3.0.1 Flex Box</h1>

<div class="spinner loading"></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 p30">

	<form class="">
		<label>Email<input type="text" placeholder="email" class="default" required></label>
		<label>Password<input type="password" class="default" placeholder="password"></label>
		
		<label>Readonly<input type="text" placeholder="readonly" class="default readonly" readonly></label>

		<label>Select<select class="default">
			<option>----</option>
			<option>one</option>
			<option>two</option>
			</select>
		</label>
		
		<label><textarea class="default" placeholder="password"></textarea></label>
		

<div class="frsb">
<div class="checkbox">
    <input type='checkbox' name='thing1' value='valuable' id="thing1" checked="checked"/>
    <label for="thing1" class="checkbox-text">Checkbox</label>
</div>
<div class="checkbox">
    <input type='checkbox' name='thing2' value='valuable' id="thing2"/>
    <label for="thing2" class="checkbox-text">Checkbox</label>
</div>
<div class="checkbox">
    <input type='checkbox' name='thing3' value='valuable' id="thing3"/>
    <label for="thing3" class="checkbox-text">Checkbox</label>
</div>
</div>
		
		
<div class="frsb">
<div class="radio">
    <input type='radio' name='thing' value='valuable' id="radio1" checked="checked"/>
    <label for="radio1" class="radio-text">Radio</label>
</div>
<div class="radio">
    <input type='radio' name='thing' value='valuable' id="radio2"/>
	<label for="radio2" class="radio-text">Radio</label>
</div>
<div class="radio">
    <input type='radio' name='thing' value='valuable' id="radio3"/>
    <label for="radio3" class="radio-text">Radio</label>
</div>		
</div>		
		
		<label><input type="submit"></label>
		
	</form>
	
</div>




<div class="col-100-max p20">
	
<p class="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="row notification primary">
  <div class="col-100-300 p10 bcg">
	  <div class=" bsb bgg p10">100% - 300px</div>
  </div>
  <div class="col-300 p10 bcg">
    <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>


<div class="frsb">
	<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>


<div class="frsb">
	<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>


<div class="frsb">
	<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>

<div class="frsb">
	<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>
	



<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