Skip to content

Instantly share code, notes, and snippets.

View ogbaoghene's full-sized avatar

Ogbaoghene ogbaoghene

View GitHub Profile
@ogbaoghene
ogbaoghene / rem Fallback
Last active August 29, 2015 14:02
Convert px values for multiple property-values pairs to rem values with px fallbacks.
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
$baseFontSize: 16;
@function stripUnit ($num) {
@return $num / ($num * 0 + 1);
}
@ogbaoghene
ogbaoghene / Monotone Palette
Last active August 29, 2015 14:03
Returns a tint or shade of a color in increments - 8%, 20%, 50%, or 75%.
@function shade($color, $percent) {
@return mix(black, $color, $percent);
}
@function tint($color, $percent) {
@return mix(white, $color, $percent);
}
@function mono-palette($color, $mix: null) {
@if $mix == tint1 {
@ogbaoghene
ogbaoghene / List Map
Last active August 29, 2015 14:04
Simulate Sass 3.3 Maps data type when compiling with libsass (v2.0.0), still compiles successfully with Sass 3.3.
// Parameters:
// ```scss
// $map : Map converted to List
// $property : CSS property
// $loop : Loop through list. Predefined as true
// $map-key: Key for desired value in key/value pair. Predefined as null
// $namespace : Prefix for placeholders. Predefined as null
// ```
//
// Usage:
@ogbaoghene
ogbaoghene / Fixed Ratio
Last active August 29, 2015 14:05
Container with fixed aspect ratios
// Parameters:
// ```scss
// $ratio : aspect ratio
// $type : wrap or crop. Defaults to default
// ```
//
// Usage:
// ```scss
// .img-cover {
// @include fixed-ratio($ratio: 16/9);
@ogbaoghene
ogbaoghene / Liferay Template Tweaks
Created November 5, 2014 08:19
Useful tweaks to the portal_normal.vm file for custom Liferay themes.
<!-- Hide Dockbar -->
#if ($permissionChecker.isOmniadmin())
<!--#if ($permissionChecker.isCompanyAdmin($company_id))
#if ($permissionChecker.isCommunityAdmin($portletGroupId))
#if ($permissionChecker.isCommunityOwner($portletGroupId))-->
#dockbar()
#end
#if (!$is_signed_in)
<a href="$sign_in_url" rel="nofollow">$sign_in_text</a>
@ogbaoghene
ogbaoghene / Material Design Shadows
Created January 24, 2015 07:41
Shadows consist of two layers: a top shadow for depth and a bottom shadow for definition.
z-depth = 1
Top Shadow
12% black
x-offset=0
y-offset=1dp
blur: 1.5dp
Bottom Shadow
24% black
@ogbaoghene
ogbaoghene / custom_functions.php
Last active August 29, 2015 14:17
WordPress Custom Functions Bible
/* Controlling excerpt length using filters */
function custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
/* Limit content length */
function word_limit($string, $max_words){
@ogbaoghene
ogbaoghene / RGBa Fallback
Created April 14, 2015 15:21
Provide hexadecimal fallback for semi-transparent colors.
// Parameters:
// ```scss
// $color : semi-transparent color
// $bg-color : background color. Defaults to white.
// $property : CSS property for $color. Defaults to background-color.
// $attr : additional CSS attr for $property. Optional
// ```
//
// Usage:
// ```scss
@ogbaoghene
ogbaoghene / Flexbox
Created April 15, 2015 15:51
Define behavior for flexbox containers and items.
// Parameters:
// ```scss
// $layout : establish main-axis, either horizontal or vertical.
// $nowrap : flex items will try to fit onto one line. Optional
// $alignment : define alignment along the main and cross axis. Defaults to default
// $align-content : align lines in flex container when there is extra space. Optional
//
// $flex : shorthand for flex-grow, flex-shrink and flex-basis. Defaults to auto
// $order : order flex-items. Optional
// $align-self : override default alignment of individual flex items. Optional
@ogbaoghene
ogbaoghene / List Map
Created April 17, 2015 13:04
Simulate Sass 3.3 Maps data type when compiling with libsass (v2.0.0), still compiles successfully with Sass 3.3.
@function list-map($map, $map-key) {
@each $val in $map {
$key: nth($val, 1);
$value: nth($val, 2);
@if $map-key == $key {
@return $value;
}
}
}