4/29/15

Taking Advantage Of Bootstrap Mixins

Recently i took care of some css bug. Some transformation effect didnt looked good at IE.




 After examination of  less file i saw following code:

.parnetDetailsButton {
  float: left;  
  margin-top: 50px;  
  margin-left: -14px;  
  font-size: 15px;
  -webkit-transform-origin-x: 23px; 
  -webkit-transform-origin-y: 13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}



Quick look on this code shows that the reason the effect not acting correctly in IE is - missing microsoft prefix on transform and transform-origin  rules. It should be prefixed with "ms"

-ms-transform-origin: 23px 13px;

That can be quickly fixed by adding proper prefix.
But since we already using bootstrap i decided to take advantage of some of bootstrap less mixins:
.rotate and .transform-origin
mixins are like functions in the less language - they can get parameters and give output.
for using mixins we need the utils of bootstrap to be imported in our less file.

@import "../bower_components/bootstrap/less/mixins/vendor-prefixes";


now this code can be written in more accurate way:


.parnetDetailsButton {
  float: left;
  margin-top: 50px;
  margin-left: -14px;
  font-size: 15px;  
  .rotate(90deg);
  .transform-origin(23px 13px);
}



after less compiled it converted to following css:

.parnetDetailsButton {
  float: left;   
  margin-top: 50px; 
 margin-left: -14px;    
  font-size: 15px;  
 -webkit-transform: rotate(90deg);    
  -ms-transform: rotate(90deg);      
   -o-transform: rotate(90deg);        
     transform: rotate(90deg);  
-webkit-transform-origin: 23px 13px;   
  -moz-transform-origin: 23px 13px;    
   -ms-transform-origin: 23px 13px;     
    transform-origin: 23px 13px;
}


No comments:

Post a Comment

Getting started with docker

It is very simple to get started usig docker. All you need to do-is download the docker desktop for your system Once you get docker syste...