Skip to content

Instantly share code, notes, and snippets.

View besimhu's full-sized avatar

Besim Huskic besimhu

7 followers · 1 following
View GitHub Profile
@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 / 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 / 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 / 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 / WordPress WYSIWYG Editor Styles
Last active August 29, 2015 14:17
/* ================================
WordPress WYSIWYG Editor Styles
================================ */
.entry-content img {
margin: 0 0 1.5em 0;
max-width: 100%;
height: auto;
}
.alignleft, img.alignleft {
@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.