PHP Classes

Use CSS calc()

Recommend this page to a friend!

      PHP CSS Variables and Math  >  All threads  >  Use CSS calc()  >  (Un) Subscribe thread alerts  
Subject:Use CSS calc()
Summary:CSS3's built-in calc() should be explored
Author:Gerry Danen
Date:2016-02-16 15:11:54

  1. Use CSS calc()   Reply   Report abuse  
Picture of Gerry Danen Gerry Danen - 2016-02-16 15:11:54 (premium) has a video on how to use it, but the sample code can be downloaded from GitHub:

"Easily calculating when your pre-processor won't

CSS preprocessors are commonplace today in front-end development. However, CSS also has some tricks up its sleeve, like the calc() function.

Why would you need a calculation function if any preprocessor can do that with both hands tied behind its back? In this screencast, I will show you the two main advantages of using the calc() function, something that even the alternatives canít do. Learn how to build quick grids and experiment with layout using this CSS gem.

You can see the code samples here:

  2. Re: Use CSS calc()   Reply   Report abuse  
Picture of Chris Sprucefield Chris Sprucefield - 2016-02-16 17:20:28 - In reply to message 1 from Gerry Danen
I know about that one, but this covers the case when you have variables supplied, and getting them into the style sheet, allowing for dynamic calculation rather than static.

If you wish to combine this with the css calc, then you can just use the [{my_var}] to insert the dynamic value from the system.
It is not intended as a replacement of the css calc, but an addition to it, allowing access to your variables.

This is about marrying the php wit cos at runtime, allowing predefined css files to be used, either making them up on the fly for inline use, or to have them as templates that can be generated and saved for normal inclusion, should the settings change, which would be the more likely case for performance.

  3. Re: Use CSS calc()   Reply   Report abuse  
Picture of Chris Sprucefield Chris Sprucefield - 2016-02-16 17:46:21 - In reply to message 1 from Gerry Danen
Just for talking sake: say you have an element that is configurable in the user interface, controlling layout.
This is how it could be combined very well with the css calc() function, extending the css calc's knowledge about the object with our values...

$conf['margin_px'] = 200 ;


.objectWidth {
Position: absolute ;
Left: [{margin_px}]px ;
Right: calc(100% - [{margin_px}]px) ;


Rendering the section as "Right: calc(100% - 200px) ;"

Then, if the user changes the margin to 300, you can either generate this on the fly, or use the css template and store the output for faster loading, still reaping the benefits of it, without complicating the writing of the css files in any way.

I hope this helps as an understanding on how this can help in certain cases, rather than encoding it as a php template.

If you were to combine this with the advanced ini file package, and using the leaf function in that kit, you can access multi - dimensional variable such as $conf ['my']['multi']['array'] as [{my.multi.array}] to resolve the 3-level array element.

For more information send a message to info at phpclasses dot org.