Skip to content

Instantly share code, notes, and snippets.

@besimhu
besimhu / REM Mixin.sass
Last active August 29, 2015 14:07
This is a modified version of http://davidensinger.com/2013/03/using-rems-with-sass/ Base font size in pixels, if not already defined. Should be the same as the font-size of the html element.
@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
// Create a couple of empty lists as output buffers.
$font-size: $base-font-size;
$px-values: ();
$rem-values: ();
// Loop through the $values list
@each $value in $values {
// For each property value, if it's in rem or px, derive both rem and px values for it and add those to the end of the appropriate buffer.
// Ensure all pixel values are rounded to the nearest pixel.
/* ================================
WordPress WYSIWYG Editor Styles
================================ */
.entry-content img {
margin: 0 0 1.5em 0;
max-width: 100%;
height: auto;
}
.alignleft, img.alignleft {
@besimhu
besimhu / ACF Flex Content Loop for Modules.php
Last active August 29, 2015 14:17
Loop sample for pulling in ACF Flex-Content modules.
<?php
/**
* Flex Content Loop for Modules
*/
if (have_rows('layout_modules')):
while (have_rows('layout_modules')):
the_row();
switch (get_row_layout()) {
@besimhu
besimhu / WP Image - Image ID.html
Last active March 13, 2022 04:35
Different ways of pulling in images through Wordpress and ACF
/**
* Based off of image ID.
*
* You can use this method to pull in several different crops for responsive.
* The crop can be custom, or one of WP default ones, or leave empty.
*
* wp_get_attachment_image_src( $attachment_id, $size, $icon )
* http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
*/
@besimhu
besimhu / Hamburger Menu.js
Last active August 29, 2015 14:17
A sample hamburger menu for mobile that animates into an "X" for when active.
module.exports = function() {
var $menu_trigger = $header.find('.menu-trigger');
// Trigger mobile navigation
$menu_trigger.on('click touch', function(e) {
$('body').toggleClass('nav-open');
e.preventDefault();
});
@besimhu
besimhu / Sass @each loop through Sass maps.css
Last active August 29, 2015 14:17
A simple @each function to loop through a Sass map and generate styles. This is especially handy for when you have and element that reiterates with different settings.
$brand_colors: (
purple $color-purple,
maroon $color-maroon,
orange $color-orange,
yellow $color-yellow,
);
.brand-color-bg {
@each $color in $brand_colors {
&.#{nth($color, 1)} {
@besimhu
besimhu / Enable or disable mobile touch scrolling.
Created March 15, 2015 06:59
Enable or disable touch scrolling on phones. This is only best for when you have a fixed menu that takes the view port view and does not scroll at all. See wiki for menu in action.
module.exports = function() {
var $nav = $('.nav-global'),
$toggle = $('.menu-trigger'),
$active_class = 'nav-active',
prevent_default = function(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
@besimhu
besimhu / Mobile navigation overflow scrolling.scss
Last active June 14, 2016 22:16
Enable overflow scrolling on menus when they are fixed. This works best when you have a container that holds menu items. An unordered list will do just fine.
.mobile-navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@besimhu
besimhu / Select Box Menu.php
Last active August 29, 2015 14:17
Sometimes a standard navigation just will not do, in that case we can use a select dropdown to rely on native phone UI.
<?php
/**
* Select Menu Menu Walker
* Add to functions.php file
*/
class SelectBox_Menu_Walker extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
@besimhu
besimhu / Wordpress child pages of parent.php
Last active August 29, 2015 14:17
Show child pages of parent, or if viewing child page, it will get all pages associated with parent.
<aside>
<nav class="page-sub-navigation">
<?php
// get child pages from post parent, otherwise
// get child pages from the current page being viewed, in most cases the parent
if ($post->post_parent) {
$page_list = wp_list_pages( 'title_li=&display=0&child_of='.$post->post_parent.'&echo=0' );
} else {