Blast.js, The cest jQuery plugin for changing website colors
it makes colors flexable and you can customize all colors in the website by one click
demo = http://men3m.com/blastjs
How it works
Here is a simple Blast.js setup:
1- Markup
add this tags to the html page inside "body" tag
<div class="blast-box"> <div class="blast-icon">≡</div> <div class="blast-frame"> <p>change colors</p> <div class="blast-colors"> <div class="blast-color">#3D261A</div> <div class="blast-color">#B6B254</div> <div class="blast-color">#6B2E56</div> <div class="blast-color">#48A871</div> <div class="blast-color">#2D1D44</div> <div class="blast-color">#3F4E92</div> <div class="blast-color">#DCC218</div> <div class="blast-color">#F5005E</div> <div class="blast-color">#916E30</div> <div class="blast-color">#D0A571</div> <div class="blast-color">#379AA4</div> <div class="blast-color">#216348</div> <div class="blast-color">#3B3B3B</div> <div class="blast-color">#CF2626</div> </div> <p class="blast-custom-colors">Custom colors</p> <input type="color" name="blastCustomColor" value="#cf2626" placeholder="color code..."> </div> </div>2- css file
add the stylesheet file inside the "head" tag
<link href="blast.min.css" rel="stylesheet" />3- js files
add the blast.js file after the jQuery file
<script src="jquery-1.11.3.js"></script> <script src="blast.min.js"></script>4- change colors
there are 3 types of change colors in the page
• text color
to change the text color add this attribute to the element
data-blast="color"• background color
to change the background color add this attribute to the element
data-blast="bgColor"• border color
to change the border color add this attribute to the element
data-blast="borderColor"####Example
<p data-blast="color"> this code change the text color </p> <div data-blast="bgColor"> this code change the background color </div> <p data-blast="borderColor"> this code change the border color </p>##Blast types ###Fixed blast colors you can change these colors by edit the color name or code
<div class="blast-colors"> <div class="blast-color">#3D261A</div> <div class="blast-color">#B6B254</div> <div class="blast-color">#6B2E56</div> <div class="blast-color">#48A871</div> <div class="blast-color">#2D1D44</div> <div class="blast-color">#3F4E92</div> <div class="blast-color">#DCC218</div> <div class="blast-color">#F5005E</div> <div class="blast-color">#916E30</div> <div class="blast-color">#D0A571</div> <div class="blast-color">#379AA4</div> <div class="blast-color">#216348</div> <div class="blast-color">#3B3B3B</div> <div class="blast-color">#CF2626 <!-- you can change the color by type it's name or code here --> </div> </div>###custom blast colors you can change the colors for unlimited times and choose any color
#Changelog
v 1.0- Initial Releasev 1.1- If you change the website colors and refresh the page all changes will be saved
Download, Fork and Commit.
If you think you can make this better, please Download, Fork, & Commit. We'd love to see your ideas.
