Skip to content

Instantly share code, notes, and snippets.

View vedranjaic's full-sized avatar

Vedran Jaic vedranjaic

  • NEOS
  • Zagreb, Croatia
View GitHub Profile
@vedranjaic
vedranjaic / accessibility.txt
Created May 26, 2013 17:13
txt: Accessibility checklist
01. <!DOCTYPE>
02. lang="…"
03. <title="…" />
04. <link rel="…" /* home, next, prev… */
05. skip to #main-content link
06. visual check /* color blindness */
07. NO "javascript:" links
08. <a href="…" title="…">
09. accesskey="…" /* samples below */
10. NO <a href="…" target="_blank">
@vedranjaic
vedranjaic / meta_apple_touch_icon.html
Created May 26, 2013 17:15
html: Apple touch icons
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
@vedranjaic
vedranjaic / character_limit_ellipsis.css
Created May 26, 2013 17:17
css: Character limit - Ellipsis
p {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
@vedranjaic
vedranjaic / clearfix.css
Created May 26, 2013 17:18
css: Clearfix
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix {
@vedranjaic
vedranjaic / clip_image.css
Created May 26, 2013 17:19
css: Clip image property
img {
position:absolute;
clip: rect(0px,60px,200px,0px);
}
@vedranjaic
vedranjaic / css_loader.css
Created May 26, 2013 17:26
css: CSS Loader
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
@vedranjaic
vedranjaic / media_queries.css
Created May 26, 2013 17:33
css: Media Queries
/************************** iPads (portrait and landscape) */
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/************************** iPads (landscape) */
@media
@vedranjaic
vedranjaic / ie_css_hacks.css
Created May 26, 2013 17:35
css: IE CSS Hacks
/*IE10 and above */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
/* IE8 and below */
body {
color: red; /* all browsers, of course */
color: green1; /* IE8 and below */
}
@vedranjaic
vedranjaic / if_ie_conditional_statements.html
Created May 26, 2013 17:37
html: If IE & IE Mobile Conditional Statement
<!--
Operator Description
IE represents Internet Explorer; if a number value is also specified, it represents a version vector
lt less than operator
lte less than or equal to
gt greater than
gte greater than or equal to
! the NOT operator
() subexpression operator
& the AND operator
@vedranjaic
vedranjaic / iphone_disable_autozoom_input.css
Created May 26, 2013 17:40
css: iPhone - Disable auto-zoom on input fields
/*
* disable auto-zoom on iphone input field focus
* http://www.456bereastreet.com/archive/201212/ios_webkit_browsers_and_auto-zooming_form_controls/
*/
input[type='text']:focus,
input[type='number']:focus,
textarea:focus {
font-size: 16px;
}