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

{
    // 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

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

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

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

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

CSS3 Circular Menu - optimised

Optimisation CSS with PGCD algo

A Pen by Long Lazuli on CodePen.

License.

long-lazuli

%menu.circular{:'data-title' => 'Go!'}
  %label{:for => 'Home'}
    %a{:href => '#Home'} Home
  %label{:for => 'Doc'}
    %a{:href => '#Doc'} Doc
  %label{:for => 'Demo'}
    %a{:href => '#Demo'} Demooooooo
  %label{:for => 'Doc'}
    %a{:href => '#Doc'} Doc
  %label{:for => 'Demo'}

long-lazuli

/**
 * Test with data:image/png;base64 embedded image
 */

background: #CCC;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4nHxdeUBN2/f/vOM4juPYbtd13a4k4zM+8zwWIiVKUigikQYkmkUDMhTJWFQqpZkSZS6RMbMkPNMzPcP7GvN4fn/c9nFv8Vt/3TPtYe21117zxenTp1lowfnz56XrsLAwxtLS0ujTp088ACxbtqxNSEgICwA7duyQaX/Xtm3bNubm5nx4eDjftm1bcvDgQQIALi4uLACMHDmSAYBTp04JdnZ2LAAMHTqUAMDBgwdJaWkpIwiC6OzszKAWnDlzRg4AJiYmytDQUD44OJgtKCjga78HALdu3eLob0dHR2VOTo5c+3loaGhH7Ws/Pz+R/n7//r2wePFiftKkScoHDx5IeBg+fLj0zsWLF1kAyMjI4AHAwcFBnD59OgMABQUFqsePH7MAcO7cOR28AkBxcbFi2bJl4rBhwyg++aysLGkePXr0IPjzzz9ZAKhfvz5JSkoia9euJRs3bmQVCgUPAHZ2djoTysjIUPr5+UmN7NmzhwBAWload/fuXWbdunX82bNnCQBMmzZNBgAbNmxQAcDMmTPFvLw8gX7bqlUr7uLFi/z69euJp6cnSU5OFoKCgpSurq7KoKAgdurUqQwArF27VqFQKFgA6N27Nzd37lxx+/bt8vfv37OWlpbcrFmzFMeOHZMW8uTJkyQkJITULBABgI0bN8oAYMaMGQr63tatW5X0d3Z2drszZ85IYwOA0aNHkz179rAA0L59e6Wfnx+n/fzhw4divXr1hN27dwsA0LVrV0KfBQcHM3fu3BEBQK1WE3Nzc6ntjIwMLjc3l+nUqROjVCqFffv28QDw/PnzH0Q2YsQIiQoAYOzYsaKLiws/bdo0Li0tjVRVVck

long-lazuli

**
 * The first commented line is your dabblet’s title
 */
html, body {	min-height: 100%;}
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
}

.bottomleft-banner {