Skip to content

Instantly share code, notes, and snippets.

View coreybruyere's full-sized avatar

Corey Bruyere coreybruyere

16 followers · 39 following
View GitHub Profile
@coreybruyere
coreybruyere / sage-bem-walker
Created July 1, 2015 04:06
Roots/Sage BEM nav walker
<?php
namespace Roots\Soil\Nav;
use Roots\Soil\Utils;
/**
* Cleaner walker for wp_nav_menu()
*
* Walker_Nav_Menu (WordPress default) example output:
@coreybruyere
coreybruyere / roots-bem-walker
Created August 18, 2015 05:08
Old Roots WP nav walker
<?php
/**
* @author Spencer Baynton and Corey Bruyere
* @uses Walker_Nav_Menu
* @version 1.0.0
*/
class Roots_Nav_Walker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array() ) {
@coreybruyere
coreybruyere / ajax-inline-svg-with-fallback.html
Last active June 3, 2016 19:41
A copy of Chris Coyier's example https://github.com/chriscoyier/inline-svg-with-grunticon-fallback/blob/master/index.html but with a DOMContentLoaded listener so SVG's don't append before document.body is created.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline SVG with Grunticon Fallback</title>
<meta name="viewport" content="width=device-width">
@coreybruyere
coreybruyere / language-font.scss
Created January 19, 2016 00:02
// Karla Regular variable
$font-primary: 'Karla', 'Arial', sans-serif;
// Karla Regular placeholder
%font-primary {
font-family: $font-primary;
font-weight: normal;
}
@coreybruyere
coreybruyere / sass-ios-vh-pollyfill-mixin
Created March 31, 2016 00:06
iOS media query pollyfill for iOS vh unit quirks - accepts an additional px value to be appended and calculated to the vh value
@mixin vh-polyfill($property, $vh, $add: null) {
// all iOS viewports that don't support vh
$portrait: "all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"; // iPad with portrait orientation.
$landscape: "all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"; // iPad with landscape orientation.
$iphone5: "screen and (device-aspect-ratio: 40/71)"; // iPhone 5 You can also target devices with aspect ratio.
$iphone4: "screen and (device-width: 320px) and (device-aspect-ratio: 2/3) and (orientation:portrait)"; // iPhone 4
// base vh value with no additional px values calculated
@if $add == null {
@coreybruyere
coreybruyere / smashing-conf-sf-notes.md
Last active August 29, 2019 17:27
@coreybruyere
coreybruyere / atom-sync.md
Created May 11, 2016 02:38

@coreybruyere
coreybruyere / atom-sync
Created May 11, 2016 02:40
#
@coreybruyere
coreybruyere / atom-sync
Created May 11, 2016 02:47
#
@coreybruyere
coreybruyere / css-architecture.md
Last active November 28, 2016 23:52
A SMACSS-like CSS achitecture that uses the hyphenated BEM methodology and namespacing to ensure fewer styling rules, long-term maintainability, faster team onboarding, and hopefully performance gains. Inspired by: https://robots.thoughtbot.com/architecting-front-end-styles. Difference between components and modules: http://programmers.stackexch… 

scss/ 
|
|– base/ ** All HTML-only styles.
|   |– _html.scss           
|   |– _body.scss   
|   |– _input.scss   
|   |– _button.scss   
| ...