Get ultimate css format converter

format css converter

Today I share with you a css converter which format css in one by one lines. Many of the times, you write a css in your format which is not good readable or editable easily and getting more execution time. So, I create a converter using css3 and jQuery which help you to convert css format in one by one lines.

It contain one textarea where you paste your code and click to “submit” button and get good looking css code. For creating your own css generator use following code.

HTML code –

<div class="row css-input-area">
  <textarea placeholder="Paste your css here"></textarea>
  <button class="btn-blue" onClick="getsinglelineCode();">Get in Lines</button>
</div>

Than, add CSS –

.css-input-area{
  margin-bottom: 40px;
}
.css-input-area textarea{
  width: 100%; 
  height: 450px; 
  resize: none; 
  margin-bottom: 20px; 
  border: 1px solid #60c7ef; 
  padding: 10px; 
  font-family: "Open Sans"; 
  color: #2087af; 
  font-size: 13px;
}
.css-input-area .btn-blue{
  width: 100%; 
  color: #fff; 
  padding: 10px 0; 
  cursor: pointer; 
  border: 0; 
  background-color: #3395D0;  
  transition: .35s; 
  font-size: 18px; 
  letter-spacing: 1px;
}
.css-input-area .btn-blue:hover{
  background-color: #1375b0;
}

Lastly, add jQuery  –

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function getsinglelineCode(){
   var str = $(".css-input-area1 textarea").val();
   var output = str.replace(/\;\s+/g, "; ").replace(/\{\s+/g, "{").replace(/\s\}+/g, "}").replace(/\}\s+/g, "}\n").replace(/\;\*\/\s+/g, ";*/").replace(/\,\s+/g, ", ");
   $(".css-input-area1 textarea").val(output);
}
</script>

Add Comment

Required fields are marked *. Your email address will not be published.