Janic Beauchemin djanix
djanix
/ css -> clearfix
Last active
October 2, 2015 00:28
css -> Clear after a float element for all browser and without adding aditionnal markup in the html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .clearfix:before, .clearfix:after { | |
| content: ""; | |
| display: table; | |
| } | |
| .clearfix:after { | |
| clear: both; | |
| } | |
| .clearfix { |
djanix
/ css -> inline-block fix
Last active
October 2, 2015 00:28
css -> Inline-block fix for ie6/ie7
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .yourClass { | |
| display: inline-block; | |
| *display: inline; | |
| zoom: 1; | |
| } |
djanix
/ Label + input vertical align display fix for all browsers
Created
March 21, 2012 14:38
css -> label and input vertical align
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*--------------------------------------------------------------------------- | |
| * Label + input display fix | |
| * Put the input + text inside the label to make it works correctly | |
| *--------------------------------------------------------------------------*/ | |
| label { | |
| display: block; | |
| padding-left: 15px; | |
| text-indent: -15px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| verticalAlign(yourElement); | |
| function verticalAlign(el) { | |
| var height = el.height(); | |
| var parentHeight = el.parent().height(); | |
| var padding = (parentHeight - height) / 2; | |
| el.css('padding-top', padding); | |
| } |
djanix
/ js -> convert percent to number
Created
April 13, 2012 17:17
js -> convert percent to number
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function convertPercentToNumber(el) { | |
| if (el.charAt(el.length-1) == '%') { | |
| return el.slice(0, -1)/100*duration; | |
| } else { | |
| return el; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ///////////////////////////////////////////////////// | |
| XML DOCUMENT EXAMPLE | |
| ///////////////////////////////////////////////////// | |
| <?xml version="1.0"?> | |
| <items> | |
| <item> | |
| <headline>title</headline> | |
| <description>text</description> | |
| <image>content_logo.png</image> | |
| </item> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| p { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-size: 62.5%; /* resets the page font size */ | |
| } | |
| p { | |
| font-size: 0.8em; /* equals 8px */ | |
| font-size: 1.0em; /* equals 10px */ | |
| font-size: 1.6em; /* equals 16px */ | |
| font-size: 2.0em; /* equals 20px */ | |
| } |
djanix
/ responsive -> img swap
Last active
December 13, 2015 21:58
mobile -> swap img mobile vs tablet vs desktop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img src="" data-src-desktop="pathTo/imgName.jpg" data-src-tablet="pathTo/imgName_tablet.jpg" data-src-mobile="pathTo/imgName_tablet.jpg" alt="" /> |
djanix
/ less -> var in bg-image path
Created
March 19, 2013 18:33
Hot to add a var in a background-image css rule in less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @image-path: "../path/to/img"; | |
| .item { | |
| background: url("@{image-path}/image.png") center center no-repeat; | |
| } |
OlderNewer