JavaScript CSS Generator: Generate CSS styles dynamically

Recommend this page to a friend!
  Info   Example   Demos   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 188 All time: 269 This week: 4Up
Version License JavaScript version Categories
js-css-generator 1BSD License1.0HTML, jQuery
Description 

Author

This package can create or change CSS style attributes dynamically.

It provides several objects can create CSS styles or manipulate the attributes of given styles or page elements.

There are classes for manipulating background attributes, border attributes, box shadow attributes and apply font effects.

Innovation Award
JavaScript Programming Innovation award winner
November 2014
Winner


Prize: One book of choice by Packt
CSS styles are usually defined in separate style sheet files or even embedded in HTML pages, but this is only useful for passing styles that are pre-defined and constant.

This package provides an alternative solution that allows dynamically creating or altering the definition of styles.

This way in can implement several types of effects on page elements with backgrounds, borders, shadows and fonts.

Manuel Lemos
Picture of JImmy Bo
Name: JImmy Bo <contact>
Classes: 4 packages by
Country: Canada Canada
Age: ???
All time rank: 541 in Canada Canada
Week rank: 6 Up1 in Canada Canada Equal
Innovation award
Innovation award
Nominee: 4x

Winner: 1x

Example

// begin -> load class into variable var myBorder = new class_css_border(myBorder); myBorder.set.parent_class('.tool-border-generator'); // read input fields from this div myBorder.set.display_b('.super-display'); // set css of a target secondary div myBorder.process.all(); // applies css changes to targetted divs myBorder.do.jquery(); // activate jquery input triggers (actions on keypresses) // end <- load class into variable // begin -> load class into variable var myBoxShadow = new class_css_boxshadow(myBoxShadow); myBoxShadow.set.parent_class('.tool-box-shadow-generator'); // read input fields from this div myBoxShadow.set.display_b('.super-display'); // set css of a target secondary div myBoxShadow.process.all(); // applies css changes to targetted divs myBoxShadow.do.jquery(); // activate jquery input triggers // end <- load class into variable // begin -> load class into variable var myBackground = new class_css_background(myBackground); myBackground.set.parent_class('.tool-background-generator'); myBackground.set.display_b('.super-display'); // add a second affected div myBackground.process.all(); // force object to update myBackground.do.jquery(); // activate jquery input triggers // end <- load class into variable // begin -> load class into variable var myFont = new class_css_font(myFont); myFont.set.parent_class('.tool-font-generator'); myFont.set.display_b('.super-display'); // add a secondary trigger myFont.process.all(); // force object to update myFont.do.jquery(); // activate jquery input triggers // end <- load class into variable // begin -> load class into variable var mFontEffect = new class_css_fonteffect(mFontEffect); mFontEffect.set.parent_class('.tool-font-effect-generator'); mFontEffect.set.display_b('.super-display'); // add a secondary trigger mFontEffect.process.all(); // force object to update mFontEffect.do.jquery(); // activate jquery input triggers // end <- load class into variable

  JSFiddle DemoExternal page  
Screenshots (1)  
  • screenshot.png
  Files folder image Files (15)  
File Role Description
Accessible without login Plain text file class.css-generator.global.css Data DEMO CSS File
Accessible without login Plain text file class.css-generator.global.demo.php Data DEMO of the css-generator class
Accessible without login Plain text file class.css-generator.global.init.js Example DEMO initialize the child classes
Accessible without login Plain text file class.css-generator.global.js Aux. DEMO load up the child modules
Accessible without login Plain text file class.background.htm Example Basic Template for Background CSS Editor
Plain text file class.background.js Class CSS Background Handling
Accessible without login Plain text file class.border.htm Example Basic Template for Border CSS Editor
Plain text file class.border.js Class Border CSS Handling
Accessible without login Plain text file class.font.effect.htm Example Basic Template for Font FX CSS Editor
Plain text file class.font.effect.js Class Font Effects CSS Handling
Accessible without login Plain text file class.font.htm Example Basic Template for Font CSS Editor
Plain text file class.font.js Class Font CSS Handling
Accessible without login Plain text file class.shadows.htm Example Basic Template for Box Shadow CSS Editor
Plain text file class.shadows.js Class Box Shadow CSS Handling

 Version Control Unique User Downloads Download Rankings  
 0%
Total:188
This week:0
All time:269
This week:4Up
User Comments (1)
Thats a amazing class ;-)
9 years ago (José Filipe Lopes Santos)
70%StarStarStarStar