james-jlo-long

OSCAR

OSCAR stands for "Only Style Classes, AlRight?". It's a CSS methodology that is designed to be very simple and lead into other mentalities such as OOCSS, SMACSS or ITCSS. The idea is to take the most basic parts of the other methodologies and create some simple rules that can be quickly taught to a new-comer without weighing them down with complexities. This is the starting point for better CSS.

Two Simple Rules

1. Only add styles to class selectors

No IDs, no elements. Only classes. You can have up to 1 class, 1 pseudo-element and 1 state or pseudo-class.

james-jlo-long

james-jlo-long

/**
 * @file    A version of console that can be used on mobile devices.
 * @author  James "JLo" Long <[email protected]>
 * @version 1.0.0
 * @license MIT
 */
var con = (function () {

    "use strict";

james-jlo-long

// This demo shows how to simply add some translations.
__.add({
    "Hello": "Bonjour"
});

james-jlo-long

/**
 * Validates the form. The validation relies on HTML5 Form Validation.
 *
 * @see https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
 * @alias validate
 * @param {Element} form
 *        Form to validate.
 * @param {Object}  settings
 *        Settings for the form.
 * @param {String}  settings.highlightClass

james-jlo-long

/**
 * A helper function for looping over all elements that match the given
 * selector. This function returns the results of the function being called on
 * all elements.
 * 
 * @param  {String} selector
 *         CSS selector to identify elements.
 * @param  {Function} handler
 *         Function to execute on all elements.
 * @param  {?} [context]

james-jlo-long

# Git bash completion
# https://gist.github.com/JuggoPop/10706934
if [ -f ~/.git-completion.bash ]; then
  . ~/.git-completion.bash
  __git_complete gch _git_checkout
  __git_complete gf _git_fetch
  __git_complete gp _git_push
  __git_complete gm _git_merge
  __git_complete gr _git_rebase
fi

james-jlo-long

// Interface

ARIA.normalise = function (attribute) {}; // memoise
ARIA.getById = document.getElementById.bind(document);
ARIA.identify = function (element, prefix = "", getById = ARIA.getById) {};

ARIA.set(element, {
    hidden: true,
    controls: document.querySelector(".element"),
    labelledby: document.querySelectorAll(".reference"), // can have multiple references

james-jlo-long

function SemVer(version) {

    var parsed = String(version).match(/^(\d+)\.(\d+)\.(\d+)$/) || [];

    this.string = version;
    this.version = [
        Number(parsed[1]) || 0,
        Number(parsed[2]) || 0,
        Number(parsed[3]) || 0
    ];

james-jlo-long

// Creating a module
// 
// Here's a simple module that is created. The function isn't executed until
// another module tries to use it and it's only executed once.

myNamespace.define("one", function () {
    return 1;
});

// Here's a module that requires another module. This doesn't execute the