Skip to content

Instantly share code, notes, and snippets.

View kareemkibue's full-sized avatar

kareemkibue

17 followers · 30 following
View GitHub Profile
@kareemkibue
kareemkibue / _media-apple.scss
Last active May 12, 2016 14:39
Ultimate SASS Media Query Mixins
@mixin respond($media) {
// iPad (General)
@if $media == ipad {
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { @content; }
}
@else if $media == ipad-portrait {
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { @content; }
}
@else if $media == ipad-landscape {
@kareemkibue
kareemkibue / svg-render.php
Last active May 11, 2016 15:18
Rendering SVG icons in PHP/WordPress
<?php
function render_icon($icon_id, $class=null){
?>
<svg class="ico <?php echo $class; ?>">
<use xlink:href="<?php echo get_template_directory_uri() .'/images/icons.svg#'. $icon_id; ?>">
</svg>
<?php
}
@kareemkibue
kareemkibue / post.php
Last active May 10, 2016 15:06
WordPress YT Shortcode Embed (Page Load Considered)
<?php
echo do_shortcode('[youtube id="yXEfNoIZIP4"]');
?>
@kareemkibue
kareemkibue / Compass px to em
Last active August 29, 2015 14:12 — forked from ijy/Compass px to em
@function em($target, $context: $base-font-size) {
@if $target == 0 { @return 0 }
@return $target / $context + 0em;
}
$base-font-size: 15px;
h1 {
font-size: em(21px, 15px); // Outputs 1.4em
}
@kareemkibue
kareemkibue / .htaccess
Last active July 26, 2016 01:14 — forked from jxnblk/.htaccess
.htaccess required for Angular JS HTML5 Mode, Routing (Pretty URLs)
#REQUIREMENTS
# 1. <base href="/" > inside <head> before importing external (local) stylesheets and javascript files
# the above is required if deep linking
#
# 2. in the module configuration, set html5mode to TRUE i.e. $locationProvider.html5Mode(true).hashPrefix('!');
#BEGIN
Options +FollowSymLinks
@kareemkibue
kareemkibue / CSS Selection SASS Mixin
Created July 25, 2014 22:25
Selection CSS Styling SASS Mixin
@mixin selection {
::-moz-selection { @content; }
::selection { @content; }
}
/*use this mixin*/
@include selection {
/* STYLES e.g */
color: #fff; /*better to store colors as variables such as $base-color:#fff */
@kareemkibue
kareemkibue / Placeholder SASS Mixin
Created July 25, 2014 22:21
HTML5 Placeholder Styling SASS Mixin
@mixin placeholder{
::-webkit-input-placeholder{ @content; }
:-moz-placeholder{ @content; }
::-moz-placeholder{ @content; }
:-ms-input-placeholder{ @content; }
}
/*use this mixin*/
@include placeholder{