A mixin for writing @font-face rules in SASS.
Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.
@include font-face(Samplino, fonts/Samplino);
Vedran Jaic vedranjaic
This file contains hidden or 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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Flexbox Grid System</title> | |
| <link rel="stylesheet" href="css/fb-grid.css"> | |
| </head> | |
| <body> | |
| <div class="row"> |
This file contains hidden or 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
| /* Break Page on print */ | |
| @media print { | |
| #div { | |
| page-break-before: always; | |
| } | |
| } |
vedranjaic
/ iphone_disable_default_form_style.css
Created
May 26, 2013 17:52
css: iPhone - Disabling default appearance of form elements on iOS
This file contains hidden or 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
| input, textarea { | |
| -webkit-appearance: none; | |
| } |
This file contains hidden or 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
| /* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */ | |
| #fb-root { | |
| display: none; | |
| } | |
| /* To fill the container and nothing else */ | |
| .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { | |
| width: 100% !important; | |
| } |
This file contains hidden or 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
| /* wrap <iframe> in a div */ | |
| .responsive-video { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16/9 ratio */ | |
| padding-top: 30px; /* IE6 workaround*/ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .responsive-video iframe, | |
| .responsive-video object, |
vedranjaic
/ iphone_disable_autozoom_input.css
Created
May 26, 2013 17:40
css: iPhone - Disable auto-zoom on input fields
This file contains hidden or 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
| /* | |
| * 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; | |
| } |
This file contains hidden or 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:after { | |
| content:"\0020"; | |
| display:block; | |
| height:0; | |
| clear:both; | |
| visibility:hidden; | |
| overflow:hidden; | |
| } | |
| .clearfix { |
vedranjaic
/ character_limit_ellipsis.css
Created
May 26, 2013 17:17
css: Character limit - Ellipsis
This file contains hidden or 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; | |
| -o-text-overflow: ellipsis; | |
| white-space: nowrap; | |
| width: 100%; | |
| } |
This file contains hidden or 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
| <!-- 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"> |
NewerOlder