PHP Classes

PHP CSS Variables and Math: Replace variables and math expressions in CSS

Recommend this page to a friend!
  Info   Documentation   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 207 All time: 8,406 This week: 206Up
Version License PHP version Categories
css-math 1.0Custom (specified...5.0HTML, PHP 5, Templates, Math
Description 

Author

This class can replace variables and math expressions in CSS.

It can load a given CSS file and replace expressions that are defined with square brackets.

The expressions may include variables to be evaluates to given values, as well math expressions that may include sum, subtraction, multiplication and division of values.

The class returns the processed CSS stylesheet as a string with HTML style tag.

While you can do maths with CSS, sometimes, you just need to go that little further than what normal CSS allows?

Ever thought it would be nice to have the option to say:
I have this variable, defining a base width of an object, and make others multiples of that?

What if you have a variable called "$conf['base_width']?
and you could do:

.classname1 {width: [base_width]px ; }
.classname2 {width: [base_width * 2]px }

or use any other variable, together with + - * /, and even floor float values coming out of the calc
by prepending the variable name with ~, still allowing any regular CSS math?

This may be for you.

It's short, it's simple, and opens up dynamic css generation for those special cases where you just need to adjust the class definition to your needs.

Just call CSS::setConf($conf), and $css = CSS::load("myfile") ;

Picture of Chris Sprucefield
  Performance   Level  
Innovation award
Innovation award
Nominee: 1x

 

Documentation

Assume you have the following: $conf['base_width'] = 10 ; CSS::setConf($conf) ; $css = CSS::load("myfile") ; // Assumes .css, you provide full path. myfile.css ---------------------------- .classname1 {width: [base_width]px ; } .classname2 {width: [base_width * 2]px } would be translated to: .classname1 {width: 10px ; } .classname2 {width: 20px } If you do fractional maths, and want the result to be integer, you can prepend the variable name by ~, performing a floor, such as: .classname1 {width: [base_width]px ; } .classname2 {width: [~base_width * 1.55 + 2]px } (10*1.55 + 2 = 17.5) translating into: .classname1 {width: 10px ; } .classname2 {width: 17px }

Details

While you can do maths with CSS, sometimes, you just need to go that little further than what normal CSS allows? Ever thought it would be nice to have the option to say: I have this variable, defining a base width of an object, and make others multiples of that? What if you have a variable called "$conf['base_width']? and you could do: .classname1 {width: [base_width]px ; } .classname2 {width: [base_width * 2]px } or use any other variable, together with + - * /, and even floor float values coming out of the calc by prepending the variable name with ~, still allowing any regular CSS math? This may be for you. It's short, it's simple, and opens up dynamic css generation for those special cases where you just need to adjust the class definition to your needs. Just call CSS::setConf($conf), to set the variables to use, and then and $css = CSS::load("myfile") ;

  Files folder image Files (4)  
File Role Description
Plain text file CSS.php Class CSS Math / Load
Accessible without login Plain text file css.txt Doc. CSS Math / Load Description
Accessible without login Plain text file Example.txt Doc. Examples
Accessible without login Plain text file License.txt Lic. License CC 4.0 BY-SA

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
 Version Control Unique User Downloads Download Rankings  
 0%
Total:207
This week:0
All time:8,406
This week:206Up
User Comments (1)
This is a very good class ;-)
9 years ago (José Filipe Lopes Santos)
70%StarStarStarStar