oobleck

Style Guides

Table of Contents

• Javascript
• HTML/CSS
• SASS/SCSS/LESS
• References

JavaScript

1. airbnb JS guide + SublimeLinter settings. If using SublimeText(2) and the SublimeLinter plugin, you can download the settings file to enforce this style guide.

oobleck

// DEMO http://cdpn.io/qwDxL
// Set $tbd-widget to false to globally hide the widget and restore the parent
// element without having to go find every @include

@mixin tbd-widget($width: 1em, $height: 1em, $bgColor: #ccc) {
  $tbd-widget: true !default;
  @if $tbd-widget {
    $fgColor: invert($bgColor);
    height: 0;
    font-size: 0;

oobleck

We couldn’t find that file to show.

oobleck

/* Sass Mixin that generates a Baseline Grid */
/* by: Mike Morrison, Soholaunch.com */
/* You don't have to leave this credit comment in, but it would be nice of you. */

// Set your grid dimensions here
$body-width: 960px;
$baseline: 22px;
@mixin baseline-grid {
	$columns: 16;
	$column-color: rgba(200,0,0,.2);

oobleck

$sg-base-font-size: $baseFontSize;
$sg-base-line-height: $baselineHeight;
$sg-column-width: $gridColumnWidth;
$sg-gutter-width: $gridGutterWidth;
$sg-grid-columns: $gridColumns;
$sg-grid-width: $gridRowWidth;
$sg-major-stripe: blue;
$sg-minor-stripe: green;
$sg-overlay-opacity: 0.1;
$sg-subdivs: 4;

oobleck

// IE10
Modernizr.addTest('ie10', function() {
  // http://stackoverflow.com/questions/9900311/how-do-i-target-only-internet-explorer-10-for-certain-situations-like-internet-e
  'use strict';
  var match = (/*@cc_on!@*/false && document.documentMode === 10);
  return match;
});


// IE11

oobleck

// Inspired by http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
;(function() {
  'use strict';

  // On-demand retreival of query params
  window.getParam = function getParam(name) {
    var rxName = new RegExp('[\\?&]'+name+'[=]([^&#]*)');
    var check = rxName.exec(window.location.search);
    return (check === null) ? check : decodeURIComponent(check[1].replace(/\+/g, ' '));
  };

oobleck

<div class="box">
  <p>The <kbd>.stash</kbd> element creates the bounding box that aligns in the corner and crops the contents at an angle. The <kbd>.sash > span</kbd> gets sized and rotated.</p>
  <span class="sash">
    <span>New!</span>
  </span>
</div>

oobleck

@mixin rem($property: font-size, $args: 1rem, $important: false) {
  $em-base: 16px !default;
  $accepted-units: ("px" "rem" "auto" "");
  $rems: ();
  $px: $rems;
  @if $important != false {
    $important: !important;
  } @else {
    $important: '';
  }

oobleck

;(function(win, doc, undefined) {
  'use strict';

  var pluginName = 'tmpl';
  // http://mir.aculo.us/2011/03/09/little-helpers-a-tweet-sized-javascript-templating-engine/
  // Exposing this for global use, just in case.
  window.tmpl = function tmpl(s, d) {
    for (var p in d) {
      s = s.replace(new RegExp('{'+p+'}','g'), d[p]);
    }