CSS - CALC v.1

============================
======== CSS - CALC  v.1 - POSTé
============================

http://css-tricks.com/a-couple-of-use-cases-for-calc/
============================

============================
======== CALC ()The Fab Four technique to create Responsive Emails without Media Queries
== https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.y32dtpwl8
The solution involves the CSS calc() function and the three width, min-width and max-width properties.
Or as I like to call them all together: the Fab Four (in CSS).
On top of the calc() function, the solution I found involves these three CSS properties.
In order to fully understand how it works, here’s a reminder of how width, min-width and max-width behave when used together
(as clearly summarized by fellow french front-end developer Raphaël Goetter).

    If the width value is greater than the max-width value, max-width wins.
    If the min-width value is greater than the width or max-width values, min-width wins.

Can guess what the width of a box with the following styles would be ?

.box {
    width:320px;
    min-width:480px;
    max-width:160px;
}

(Answer : the box would be 480px wide.)
Introducing calc() and the magic formula

Without further ado, here is an example of the Fab Four to create two columns that will stack and grow below 480px.

.block {
    display:inline-block;
    min-width:50%;
    max-width:100%;
    width:calc((480px — 100%) * 480);
}

Let’s break it down for each width property.

min-width:50%;

The min-width property defines our column widths on what we could call our desktop version.
We can change this value to add more columns (for example, 25% for a four columns layout),
or set columns with fixed pixel widths.

max-width:100%;

The max-width property defines our column widths on what we could call our mobile version.
At 100%, each column will grow and adapt to the full width of their parent container.
We can change this value to keep columns on mobile (for example, 50% for a two columns layout).

width:calc((480px — 100%) * 480);

Thanks to the calc() function, the width property is where the magic happens.
The 480 value matches our desired breakpoint value.
The 100% corresponds to the width of the parent container of our columns.
The goal of this calculation is to create a value bigger than our max-width or smaller than our min-width,
so that either one of those property is applied instead.


============================
======== CALC()  comes to the rescue!
== http://www.dreamdealer.nl/articles/css3_calc_min_and_max_functions.html
<div class="left">left column</div>
<div class="right">right column</div>

- You want two containers floating next to each other with a gap of 50 pixels between them.
But the columns need to have a variable width...
Setting both columns to 50% and a right-margin of 50px to the left column
is going to break your layout because the sum of all widths is more than 100%...

.left, .right {
    float: left;
    width: 50%;
}
.left {
    margin-right: 50px;
}
- But what if you could set the widths of the two columns to 50% minus 25px (half of the gap)
on both columns?.
That's what calc() enables you to do! That looks like this:

.left, .right {
    float: left;
    width: calc(50% - 25px);
}
.left {
    margin-right: 50px;
}

No hacks needed!

And those darn borders? Also easy!

.left, .right {
    float: left;
    border: 10px solid red;
    width: calc(50% - 25px - 20px); /* subtract 20px for a 10px border on both sides */
}
.left {
    margin-right: 50px;
}

============================
======== CALC() VOIR Stylsheet ( using them in combination with the new vh and vw units)
== http://advent2012.digitpaint.nl/17/
Calc()ulating layouts & backgrounds with CSS
Stop! Demo-time!
- This is a percentage width block, it should scale!
The image next to it has a fixed width of 100px.
The height is calculated automatically.
We use calc(100% - 100px /* image width */ - 10px * 2 /* padding */ - 10px /* margin */)

- Two adjecent floats: one percentage width block next to fixed width image.

- Centering a fixed-width block with left and right spanning background
and a gradient that automatically adjusts to the width.

 - Center content with retaining backgrounds by using:
padding: 0 calc(50% - WIDTHpx / 2);

- Put a fixed width float next to a percentage width float:
width: calc(100% - FIXED_FLOAT_WIDTHpx)


============================
======== CALC()
== http://www.zonecss.fr/style_css/feuille_css_calc.html
- Définition de calc :
La fonction de feuille de style css calc permet d’exécuter un calcul dans votre feuille css.
.identifiant{
  width:calc(50% + 12px);
}

La fonction de feuille de style calc css retourne comme valeur une longueur.
La fonction de feuille de style css expression peut prendre accepte comme opérateur :
- "+" pour l'addition.
- "-" pour la soustraction.
- "/" pour la division, la division par 0 génère une erreur donc une valeur invalide.
- "*" pour la multiplication.

- L'opérateur doit être suivit et précédé d'un espace :
left:calc(50% +10px); // Pas bon
left:calc(50% + 10px); // Bon

- Il est possible de mettre plusieurs fonctions de feuille de style css calc à la suite :
margin:calc(1px + 1px) calc(1px + 10px) ;

- La fonction de feuille de style calc css accepte accepte de faire un calcul
avec des unités différentes, à condition que ces dernières soient de même types.
Par exemple :
calc(50% + 10px - 20s)
// Pas possible car il y a un mélange entre des longueurs et des seconde


- Exemple de code calc :
La fonction de feuille de style css calc est applicable
sur toutes propriétés de feuille de style acceptent une longueur ou position.

- Problèmes des calc :
La fonction de feuille de style calc css pose des problèmes
car elle n'est interprétée que par Internet Explorer 9+ et par Firefox 16+

============================
======== CALC()
==  http://davidwalsh.name/css-calc
The calc routine is especially useful when calculating relative widths.
Calculations can be additions, subtractions, multiplications, and divisions. Have a look:

/* basic calc */
.simpleBlock {
	width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
	width: calc(100% - 50% / 3);
	padding: 5px calc(3% - 2px);
	margin-left: calc(10% + 10px);
}

============================
======== CALC() Calculated values
== http://alistapart.com/article/love-the-boring-bits-of-css
When you’re working fluidly and/or responsively,
you’ll doubtless come across the problem of mixing units—wanting
to have a grid that’s sized in percentages but with fixed margins.

For example:
div {
  margin: 0 20px;
  width: 33%;
}
If your layout only uses padding and border,
then you can use box-sizing to help you get around that,
but it won’t help you with margins.
A better, more flexible approach is to use the calc() value function,
which lets you perform mathematical operations with different units, such as:
div {
  margin: 0 20px;
  width: calc(33% - 40px);
}
You’re not limited to using it only on width;
you can use it anywhere length values are permitted—and if you want
to go really deep down the rabbit hole, you can also use calc() inside calc().

IE9+ has this unprefixed (!),
Firefox has it with the -moz- prefix (which should be unprefixed in release 16 or 17),
and Chrome and Safari have implemented it with the -webkit- prefix.
It doesn't seem to be in mobile WebKit yet, however.


============================
======== CALC()
==http://www.sitepoint.com/css3-calc-function/
==http://css3clickchart.com/?prop=calc
==http://www.sitepoint.com/css3-calc-function/
==http://hacks.mozilla.org/2010/06/css3-calc/
Allows you to use a function in place of a length value
 to calculate the size or shape of an element instead of defining it explicitly:
  .element {
	width: -moz-calc(100% + 20px);
	width: calc(100% + 20px);
}

============================
======== CALC() - I have a dynamic width - To: CSS3 - Information and samples
==http://www.sitepoint.com/css3-calc-function/
==http://robertnyman.com/css3/calc/calc.html
==https://developer.mozilla.org/en/CSS/-moz-calc
==http://hacks.mozilla.org/2010/06/css3-calc/
Using CSS3 calc() to calculate a value dynamically.
calc {
width: 100px;
height: 100px;
border: 1px solid #f00;
padding: 10px;

/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);
}
Support the min() and max() functions, which could be used like this:
div {
  height: -moz-min(36pt, 2em);
  width: -moz-max(50%, 18px);
}


============================
======== CALC() - CSS3 calc() -  - I have a dynamic width
==http://www.sitepoint.com/css3-calc-function/
==https://developer.mozilla.org/en/CSS/-moz-calc
==http://hacks.mozilla.org/2010/06/css3-calc/
The calc() CSS function can be used anywhere a <length> is required.
With calc(), you can perform calculations to determine the size and shape of objects.
Syntax:
 <a_css_property>: -vendor-calc(expression)
Values :
The expression can be any simple expression combining the following operators:

+    Addition
-    Subtraction
*    Multiplication
/    Division

You can't divide by a length; instead, this is used to, for example,
say that you want your resulting length to be a given fraction of an existing length.
mod Unimplemented
    Modulo; this returns the remainder left over after dividing two values.
The operands in the expression may be any length syntax value.
You can use different units for each value in your expression, if you wish.
You may also use parentheses to establish computation order when needed.
Note: Division by zero results in an error being generated by the HTML parser.
Note: The + and - operators must always be surrounded by whitespace.
The operand of calc(50 -8px) for instance will be parsed as a percentage
followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is
a percentage followed by a minus sign and a length.
(The * and / operators do not require whitespace, but adding it for consistency is a good idea.)

== CALC Examples : Positioning an object on screen with a margin
calc() makes it easy to position an object with a set margin.
In this example, the CSS creates a banner that stretches across the window,
with a 40-pixel gap between both sides of the banner and the edges of the window:
    .banner {
      position:absolute;
      left: 40px;
      width: -moz-calc(100% - 80px);
      width: -webkit-calc(100% - 80px);
      width: calc(100% - 80px);
      border: solid black 1px;
      box-shadow: 1px 2px;
      background-color: yellow;
      padding: 6px;
      text-align: center;
    }
== CALC Examples : Automatically sizing form fields to fit their container
Another use case for calc() is to help ensure that form fields fit in the available space,
without extruding past the edge of their container, while maintaining an appropriate margin.
Let's look at some CSS:
input {
      padding: 2px;
      display: block;
      width: -moz-calc(100% - 1em);
      width: -webkit-calc(100% - 1em);
      width: calc(100% - 1em);
    }
#formbox {
      width: -moz-calc(100%/6);
      width: -webkit-calc(100%/6);
      width: calc(100%/6);
      border: 1px solid black;
      padding: 4px;
    }
Here, the form itself is established to use 1/6 of the available window width.
Then, to ensure that input fields retain an appropriate size,
we use calc() again to establish that they should be the width of their container minus 1em.
Then, the following HTML makes use of this CSS:
   <form>
      <div id="formbox">
      <label>Type something:</label>
      <input type="text">
      </div>
    </form>

============================
======== CALC : Cross Browser CSS Calc()
==http://kempwire.com/css/cross-browser-css-calc.html
#foo {
width: 200px;
width: -webkit-calc(50% - 100px);
width: -moz-calc(50% - 100px);
width: calc(50% - 100px);
}




============================
========  CALC : LIMIT TO HOW MANY OPERANDS you can have within a CSS calc() function?
== http://stackoverflow.com/questions/14967421/css-calc-not-working
This works:
div {
    left:calc((100%/54)*26);
    left:-webkit-calc((100%/54)*26);
}
This does NOT work:
div {
    left:calc(((100%/54)*14)-140px);
    left:-webkit-calc(((100%/54)*14)-140px);
}

But maybe that yes (espaces between - + ):

div {
    left:calc(((100%/54)*14) - 140px);
    left:-webkit-calc(((100%/54)*14) - 140px);
}


============================
========  CALC : A simple use case
== http://webdesignernotebook.com/css/the-wonderful-calc-function/
To show calc’s usefulness further, I’ve created a basic layout where I’ve applied it generously.

The layout consists of a main content container on the left, a sidebar on the right,
and a footer, below the previous two.
Here is the basic markup with only part of the text being shown, for brevity:

<div class="wrapper">

	<div id="main">
		<h1>Far far away…</h1>
		<p>Far far away, behind the word mountains…</p>
	</div>

	<div id="accessory">
		<ul>
			<li><a href="#">Far far away…</a></li>
			<li><a href="#">Separated they live…</a></li>
			<li><a href="#">A small river named…</a></li>
		</ul>
	</div>

	<div id="footer">
		Visit the article…
	</div>

</div>

After the (hopefully) self-explanatory simple reset
(please check the full CSS in the example document),
font properties and defining the links, I will define the look of my body element:

body {
	background: #E8EADD;
	color: #3C323A;
	padding: 20px; }

After that, I will say that the main container div should be
full width (100%) minus 40px and aligned horizontally in the middle of the viewport:

.wrapper {
	width: 1024px; /* Fallback for browsers that don't support the calc() function */
	width: -moz-calc(100% - 40px);
	width: calc(100% - 40px);
	margin: auto; }

In the CSS above, I have also added a fallback width
for browsers that don’t support the calc() function, and the vendor prefix for Firefox 4.

Following this, I will set the borders,
width and margins of the main container div, and I will float it left:

#main {
	border: 8px solid #B8C172;
	float: left;
	margin-bottom: 20px;
	margin-right: 20px;
	padding: 20px;
	width: 704px; /* Fallback for browsers that don't support the calc() function */
	width: -moz-calc(75% - 20px*2 - 8px*2);
	width: calc(75% - 20px*2 - 8px*2); }

So what is happening in this calc() function?
I am stating that I want my container div to be 75% wide (75% of its parent container, remember),
but from these 75% I need to subtract “20px*2” to account
for the padding on each side, and “8px*2” to account for the border on each side.

Moving onto the sidebar, I want it to occupy the remaining 25% inside the parent container,
but this value will have to allow for padding, borders and the margin of the sidebar div (20px).

#accessory {
	border: 8px solid #B8C172;
	float: right;
	padding: 10px;
	width: 208px; /* Fallback for browsers that don't support the calc() function */
	width: -moz-calc(25% - 10px*2 - 8px*2 - 20px);
	width: calc(25% - 10px*2 - 8px*2 - 20px); }

Deconstructing “calc(25% - 10px*2 - 8px*2 - 20px)”, we have the original 25%, minus “10px*2” to account
for the padding on each side, minus “8px*2” to account for the border on each side, minus “20px” to account
for the main container’s right margin.

The footer is simply a full width div, I shan’t bore everyone by explaining that.

Because the sidebar becomes too small after a certain point,
I’ve also included a simple media query that unfloats the main and sidebar containers,
and recalculates their widths so they are 100% wide minus their respective padding and border values.

@media screen and (max-width: 768px) {
	#main, #accessory {
		float: none; }
	#main {
		margin-right: 0;
		width: -moz-calc(100% - 20px*2 - 8px*2);
		width: calc(100% - 20px*2 - 8px*2); }
	#accessory {
		width: -moz-calc(100% - 10px*2 - 8px*2);
		width: calc(100% - 10px*2 - 8px*2); }
}

This is a very simplistic use case, but hopefully it’s enough to spike your interest
and prompt you to find out more about wonderful calc().


============================
========  CALC :