Skip to content

Instantly share code, notes, and snippets.

View cimmanon's full-sized avatar

cimmanon

View GitHub Profile
@cimmanon
cimmanon / flexbox.scss
Last active September 17, 2020 15:05 — forked from anonymous/Flexbox mixins
This collection of Sass mixins to cover all 3 flexbox specifications that have been implemented. More information can be found here: https://gist.github.com/cimmanon/727c9d558b374d27c5b6
@import "compass/css3/shared";
// NOTE:
// All mixins for the 2009 spec have been written assuming they'll be fed property values that
// correspond to the standard spec. Some mixins can be fed values from the 2009 spec, but don't
// rely on it. The `legacy-order` mixin will increment the value fed to it because the 2009
// `box-ordinal-group` property begins indexing at 1, while the modern `order` property begins
// indexing at 0.
// if `true`, the 2009 properties will be emitted as part of the normal mixin call

CSS Flexbox: Specification Unification

The flexbox module has been kicking around for quite some time. There are 3 different specifications that have been implemented in the major browsers. This is an overview of how to cover all of them. If you're interested in how to use flexbox, there are many fine articles out there (some have been linked below).

Browsers

  • Chrome 21 (prefixed)
  • Opera 12.1 (unprefixed)
@cimmanon
cimmanon / animationPlay
Last active December 18, 2015 08:09 — forked from SimplGy/animationPlay
@function foo-shadow($color, $size, $layers: 1) {
$transparency: (10 - $layers) * .1;
$opts: ();
@for $i from 1 to $layers {
$opts: append($opts, 0 0 0 ($size * $i) transparentize($color, $transparency + (.1 * $i)), comma);
}
@return $opts;
}
$colorGood: lawngreen;
@cimmanon
cimmanon / df-list.js
Created August 5, 2013 19:31
A jQuery free function for subforms generated via listOf from DigestiveFunctors
function dfList(el) {
var listTemplate = el.querySelector('.inputListTemplate');
var indices = el.querySelector('[name="' + el.id + '.indices"]');
var counter = el.querySelectorAll(listTemplate.tagName.toLowerCase() + '.inputListItem').length;
var matchMinusOne = new RegExp("\-1");
var matchListTemplate = new RegExp("inputListTemplate");
var matchNumber = new RegExp("[0-9]", "g");
el.addEventListener("click", manageCodes, false);
@cimmanon
cimmanon / checkboxes.hs
Last active December 26, 2015 21:19
Quick and dirty list of checkboxes for Digestive Functors
-- new splice
dfPlainText :: Monad m => View Text -> Splice m
dfPlainText view = do
(ref, attrs) <- getRefAttributes Nothing
let
ref' = absoluteRef ref view
value = fieldInputText ref view
--value = fieldInputBool ref view
return [X.TextNode value]
@cimmanon
cimmanon / SassMeister-input.scss
Created December 4, 2013 18:19
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
%colors {
&.error {
color: red;
}
@cimmanon
cimmanon / _flexbox.scss
Last active February 11, 2016 02:51
New Flexbox mixins (in progress)
// $flexbox-support values:
// standard: Draft #3
// modern: Draft #2 or newer
// legacy: Draft #1 only
// wrap: versions that support wrapping (includes feature query on the display property on the unprefixed standard value)
// all: all versions
$flexbox-support-threshold: $critical-usage-threshold !default;
$flexbox-support: modern !default;
$flexbox-warnings: true !default;
@cimmanon
cimmanon / SassMeister-input.scss
Created March 10, 2014 16:58
Generated by SassMeister.com.
// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// ----
@mixin placeholder {
::-webkit-input-placeholder {@content}
:-moz-placeholder {@content}
::-moz-placeholder {@content}
:-ms-input-placeholder {@content}
@cimmanon
cimmanon / SassMeister-input.scss
Created March 12, 2014 12:53
Generated by SassMeister.com.
// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----
$sel: '';
@for $i from 1 through 10 {
$sel: if($i == 1, "ul", nest($sel, "ul")) !global;
#{$sel} {
@cimmanon
cimmanon / SassMeister-input.scss
Created March 13, 2014 21:31
Generated by SassMeister.com.
// ----
// libsass (v0.7.0)
// ----
$ie: false;
$large-up: "(min-width: 500px)";
$margin: 10;
$columns: 10;
$class-slug: 'foo';