long-lazuli

CSS Tabs with keyboard accessibility

My goal here is to keep accessibility with keyboard. It is a very simple tabs component in css.

I use SASS for the generation of the code. It works in Firefox, Chrome/Chromium and Opera. I can't test this on IE for the moment.

A Pen by Long Lazuli on CodePen.

long-lazuli

gfmTodo for Sublime Text

gfmTodo add a shortcut to mark your task done, in a Github Flavoured Markdown way.

Installation

To install this plugin :

long-lazuli

Self Responsive Correcting Grid. With MediaQuery No classes!

Heydon did the big work. I added here a responsive solution. I don't want to have the same number of columns for each resolution.

Forked from Heydon's Pen Self Correcting Grid. No classes!.

A Pen by Long Lazuli on CodePen.

long-lazuli

* { &, &:before, &:after { box-sizing: border-box; } }
a { &, &:focus, &:active { color: inherit; text-decoration: inherit; } }

long-lazuli

{
    // Full list of supported options and acceptable values can be found here:
    // https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
    "config": {

        // Whether to add a semicolon after the last value/mixin.
        "always-semicolon": true,

        // Set indent for code inside blocks, including media queries and nested rules.
        "block-indent": "  ",

long-lazuli

var browserSync = 	require('browser-sync').create();
var gulp = 			require('gulp');
var del = 			require('del');

var	concat = 		require('gulp-concat'),
	filesize = 		require('gulp-filesize'),
	gutil = 		require('gulp-util'),
	order = 		require('gulp-order');
    rename	= 		require('gulp-rename'),
    sass = 			require('gulp-sass'),

long-lazuli

// Production steps of ECMA-262, Edition 6, 22.1.2.1
// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
if (!Array.from) {
  Array.from = (function () {
    var toStr = Object.prototype.toString;
    var isCallable = function (fn) {
      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
    };
    var toInteger = function (value) {
      var number = Number(value);

long-lazuli

/*
 * INPUT[type='range'] Shadow Elements Selectors
 * ============================================= *
     http://codepen.io/long-lazuli/pen/WbyqKg    *
                                                 */
$defaultBrowserList : webkit, moz, ms !default;

// this function will be used in all this script.
@function _contains(/* List */ $haystack, /* Any */ $needle) {
  @if index($haystack, $needle){

long-lazuli

/**
 * Test d'une soundwave.
 */
background: radial-gradient(50% 100%, black 33%, transparent 35%, transparent 35%, black 37%),
			radial-gradient(50% 0%, black 33%, transparent 35%, transparent 35%, black 37%),
			linear-gradient(45deg, #f06, yellow),
			#000;
background-size: 10% 24.8%, 10% 24.8%, 100% 50%;
background-position: left 33.334%, center 66.667%, center center;
background-repeat: repeat-x;

long-lazuli

/**
 * CSS Tooltip - within one element.
 */
html { height: 100% }
body{ background-image: linear-gradient(to bottom left, grey, black);
text-align: center;
font-family: sans-serif;}
 
.tooltip hr {
	margin: 0.1em 0 0.2em;