Rolando-Barbella

.navbar
.caret
.label
.table
.img-responsive
.img-rounded
.img-thumbnail
.img-circle
.sr-only
.lead

Rolando-Barbella

// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all 
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break

Rolando-Barbella

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Rolando-Barbella

/* HOC fundamentally is just a function that accepts a Component and returns a Component:
  (component) => {return componentOnSteroids; } or just component => componentOnSteroids;
  Let's assume we want to wrap our components in another component that is used for debugging purposes, 
  it just wraps them in a DIV with "debug class on it".
  Below ComponentToDebug is a React component.
*/

//HOC using Class
  //it's a function that accepts ComponentToDebug and implicitly returns a Class
let DebugComponent = ComponentToDebug => class extends Component {

Rolando-Barbella

// Examples at https://gist.github.com/bendc/9b05735dfa6966859025#gistcomment-1370485


// array utils
// =================================================================================================

const combine = (...arrays) => [].concat(...arrays);

const compact = arr => arr.filter(Boolean);

Rolando-Barbella

// array utils
// =================================================================================================

const combine = (...arrays) => [].concat(...arrays);

const compact = arr => arr.filter(Boolean);

const contains = (() => Array.prototype.includes
  ? (arr, value) => arr.includes(value)
  : (arr, value) => arr.some(el => el === value)

Rolando-Barbella

var isSquare = function (n) {
  return n >= 0 && Math.sqrt(n) % 1 === 0 ? true : false;
}

// Sum of a sequence
const sequenceSum = (begin, end, step) => {
  if (begin > end) {
    return 0;
  }
  return begin + sequenceSum(begin + step, end, step);

Rolando-Barbella

watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache

Rolando-Barbella

watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache

Rolando-Barbella

import Color from "color";
import brandStore from "./brand-store";

const defaultColours = [
  { name: "primary", value: "#333" },
  { name: "secondary", value: "#222" },
  { name: "tertiary", value: "#555" },
];

const defaultBodyFont = "Lato";