graste

<?php

$pattern = <<<EOT
/
    (?(DEFINE)
        (?<T_NUM> [0-9] )
    )
    ^(?&T_NUM)$
/x
EOT;

graste

var tabbableElements = 'a[href], area[href], input:not([disabled]),' +
	'select:not([disabled]), textarea:not([disabled]),' +
	'button:not([disabled]), iframe, object, embed, *[tabindex],' +
	'*[contenteditable]';

var keepFocus = function (context) {
	var allTabbableElements = context.querySelectorAll(tabbableElements);
	var firstTabbableElement = allTabbableElements[0];
	var lastTabbableElement = allTabbableElements[allTabbableElements.length - 1];

graste

require_once './lib/Twig/Autoloader.php';
Twig_Autoloader::register();

$loader = new Twig_Loader_Filesystem('./');
$twig = new Twig_Environment($loader, array(
    'cache' => false,
));
$data = array(
        'name' => 'trololo',

graste

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

• Create new instance of ImageEnhancer
• Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
  • We set the width & height HTML attributes of the image to the required size
  • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
  • We then set a class of image-replace onto each newly created transparent image
• We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe

graste

@mixin respond-to($primary, $secondary:min-width) {
  @if $secondary == max-width {
    @media screen and (max-width: $primary - .001) { @content; }
  }
  @else if $secondary == min-width {
    @media screen and (min-width: $primary) { @content; }
    @if $primary == $large {
      .ie8 &{
        @content;

graste

// ---
// Sass (v3.2.9)
// ---


@mixin respond-to($queries...) {
    $length: length($queries);
    @for $i from 1 through $length{
        @if $i % 2 == 1 {
            @media screen and (min-width: nth($queries, $i)) { 

graste

// We're going to use Breakpoint to handle our media queries
// http://github.com/team-sass/breakpoint
@import "breakpoint";

@mixin element-query($sizes...) {
  @each $size in $sizes {
    @include breakpoint(nth($size, 2)) {
      #{nth($size, 1)} & {
        @content;
      }

graste

@mixin elementquery() {

    @media (min-width: 32.5em) { .content & { @content; } }
    @media (min-width: 90em) { .aside & { @content; } }

}


.schedule-component {

graste

/*
  Scoped Media Query Mixins - an element query workaround.

  @mixin respond-to-all : generates @media () {}
  @mixin respond-to-screen : generates @media screen and () {}
  @mixin respond-to-screen-only : generates @media screen only and () {}


  Accepts the following input :

graste

by Dale Sande

CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer inline.

For many of us getting started with Sass, at one time or another have created a junk-drawer of files. For most, this was a rookie mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.

Large CSS files and increased complexity

CSS started out with very simple intentions, but as [tableless web design][1.1] began to really take a foothold, o