Skip to content

Instantly share code, notes, and snippets.

View JawsomeJason's full-sized avatar
💅
Bein' sassy

Jason Featheringham ⊙ω⊙ JawsomeJason

💅
Bein' sassy
View GitHub Profile
@JawsomeJason
JawsomeJason / _hybrid-mixin.scss
Last active September 28, 2016 09:47
Sass Hybrid Mixin Pattern
////
/// A DRY but flexible pattern for defining and reusing Sass patterns.
/// Documentation in [SassDoc](http://sassdoc.com/) format
///
/// Instructions:
/// 1) Replace all instances of `hybrid-mixin` with a pattern name.
/// 2) Add rules for pattern in `__hybrid-mixin-rules` mixin.
/// 3) Remove or change @group below.
/// 4) Remove @author or change to you.
/// 5) The `@ignore` below should remain as a reference to this pattern.
@JawsomeJason
JawsomeJason / _ember-common-addons.json
Last active September 26, 2016 21:48
Ember common addons
"autoprefixer": "^6.4.1",
"ember-browserify": "^1.1.13",
"ember-cli-fastboot": "1.0.0-beta.9",
"ember-cli-postcss": "3.0.4",
"ember-cli-sass-pods": "1.3.0",
"ember-link-action": "0.0.35",
"ember-remarkable": "3.1.2",
"ember-router-scroll": "git+ssh://git@github.com/thejase/ember-router-scroll.git#master",
"eqcss": "^1.2.2",
@JawsomeJason
JawsomeJason / name.sublime-project
Last active September 26, 2016 21:11 — forked from sanderhouttekier/name.sublime-project
Sublime Project File #snippet #sublimetext
{
"folders":
[
// add paths per directory you want to show
{
// relative paths to the root
"path": ".",
// optionally give it a different name
// "name": "My Project",
// possible folders to exclude
@JawsomeJason
JawsomeJason / _theme.scss
Created September 25, 2016 10:03
Create scoped themes using Sass and CSS Custom Properties
// options
// identifier for theme CSS custom properties (e.g. --theme__prop--theme-name)
$__theme-custom-property-prefix: theme !default;
// enable/disable CSS4 var(--custom-property) declarations
$__theme-enable-css-variables: true !default;
// enable/disable compatibility for legacy browsers.
// Warning: If enabled, cascade will not function, so you must inherit down
// the chain or re-declare themes where needed
$__theme-enable-decorator-fallbacks: true !default;
@JawsomeJason
JawsomeJason / _element.scss
Last active August 29, 2019 07:12
Sass Mixin to generate `@element` EQCSS Element Queries
/// Helper for EQCSS Element Queries `@element`
///
/// @author Jason Featheringham
/// @link https://gist.github.com/thejase/d2107285b6e10315dd6bc055115647fe Code source
/// @link http://elementqueries.com/ Plugin to parse EQCSS
/// @link https://gist.github.com/tomhodgins/6237039fa07c2e4b7acd1c8b0f9549a9 EQCSS syntax
///
/// @param {String} $scope (&) - Optional scope. Defaults to current context
/// @param {List} $conditions (()) - 1+ of Maps of EQCSS conditions
/// @content rules to enclose in element query
@JawsomeJason
JawsomeJason / _handoff.scss
Created September 15, 2016 00:48
Handoff sets of Sass variables to mixin's content block
// handoff mixin variables for use inside content
$batons: () !default;
/// get the last set of variables handed-off
/// @param $baton=() map of variables
/// @example calling from inside a handoff-enabled mixin with content block
/// @mixin foo($foo, $free) {
///
/// // send handoff right before `@content`
/// @include handoff((
@JawsomeJason
JawsomeJason / _colors.scss
Last active September 8, 2016 11:13
Sass color variables from [Name That Color](http://chir.ag/projects/name-that-color/#6195ED)
$colors: (
abbey: #4c4f56,
acadia: #1b1404,
acapulco: #7cb0a1,
aero-blue: #c9ffe5,
affair: #714693,
akaroa: #d4c4a8,
alabaster: #fafafa,
albescent-white: #f5e9d3,
algae-green: #93dfb8,
@JawsomeJason
JawsomeJason / Combine Box-Model Reset.scss
Last active March 9, 2016 09:19
Code for thejase.com/lets-get-sassy-keeping-your-sass-dry
/* resets box-model reset */
.pd-foo {
margin: 0;
padding: 0;
border-width: 0;
background-color: #ddd;
margin-left: 1em;
}
.pd-bar {
@JawsomeJason
JawsomeJason / jf-menu.js
Created June 22, 2014 02:24
Angular Menu Directive
/* Angular directive for enabling a expandable/collapsible hover dropdown menu
* May seem like a lot of code just for a dropdown, but normally, dropdowns
* don't play nice on touch devices, because onmouseleave is not fired unless
* the user touches another element that is clickable or focusable, such as
* a link. This ensures that any touch outside the menu will be considered
* the same as a mouseleave
*
* example menu:
* <nav>
* <ul class="menu" x-jf-menu x-ng-onmouseenter="open()" x-ng-onmouseleave="close()">
@JawsomeJason
JawsomeJason / pdp-layout-example.scss
Created May 13, 2014 20:36
PDP Susy Layout Example
// grid layout
@include with-grid-settings( $columns: 12, $width: 58px, $gutter: 24px, $padding: 24px ) {
.pdp {
@include susy-grid-background;
@include container;
> .breadcrumbs {
@include span-columns( 12 );
}
}