maddesigns

#adaptive images lib for TYPO3
lib.adaptive-images = COA
lib.adaptive-images {
  1 = TEXT
  1.value = <figure class="csc-textpic-imagecolumn###CLASSES###"><noscript
  10 = IMG_RESOURCE
  10 {
    file.import.current = 1
    file.maxW = 480
    file.override.data = {$styles.content.imgtext.maxW}

maddesigns

// @mixin x-rem()
//
// mixin for easy use of rem with px as fallback
// usage: @include x-rem(14px);
// usage: @include x-rem(14px, font-size);
// usage: @include x-rem(0 12px 2 1.2, margin);
// usage: @include x-rem(1.5 24px, padding);
//
// thanks to Eric Meyer for https://github.com/ericam/susy
// and Hans Christian Reinl for http://drublic.de/blog/rem-fallback-sass-less/

maddesigns

Hallo Stefan,

eine interessante Typoscript-Lösung hast du da, die kommt mir etwas bekannt vor. ;)

Allerdings denke ich, dass du inhaltlich ein paar Fehler hast. Erstens: 72dpi Bildschirme gibt es nicht, das war mal der allererste Macintosh oder so, alle alten CRT-Monitore haben 96dpi (http://praegnanz.de/weblog/72dpi). 96dpi ist auch die Basisgröße in CSS für die Berechnung von Pixelgrößen sowie anderen Längeneinheiten. iOS-Geräte haben nicht alle 144dpi, die Auflösung wird durch die Größe des Bildschirms und tatsächlichen Pixelanzahl berechnet. Hier eine Liste verschiedener Geräte mit hochauflösenden Displays: http://dpi.lv/ Die Pixeldichte wird bei Android berechnet, bzw. vom Browser festgelegt, bei iOS und WindowsPhone festgelegt und nicht berechnet.

Zweitens: meiner Meinung nach ist deine JavaScript nicht ganz richtig. $(window).innerWidth(); gibt dir die Browserfensterbreite wieder, im Gegensatz zu window.screen.width. Im iPhone bekommst du also mit deiner Abfrage immer 320px heraus, würdest also das 

maddesigns

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "singularitygs";

$grids: 12;
$gutters: 12px;
$gutter-styles: 'split' 'fixed';

maddesigns

<div class="grid12">
    <div class="grid6">
        <div>col1</div>
    </div>
    <div class="grid6">
        <div>col2</div>
    </div>
</div>

<div class="grid6">col6</div>

maddesigns

env = (function() {
  var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i
  function flag(names) {
    names = names.split(' ')
    for (i = 0; i < names.length; i++)
      flags[names[i]] = true
  }
  function classnames() {
    var names = [], name
    for(name in flags) if (flags.hasOwnProperty(name))

maddesigns

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: 10px) {
    @if type-of($value) == list {
        $result: ();

maddesigns

#page
  #foo.container
    .subcontainer
      .column Foo
      .column Foo
      .column Foo
      .column Foo
    .subcontainer
      .column Bar
      .column Bar

maddesigns

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";
@import "singularitygs";
@import "singularity-extras";

$break-small:   450px;

maddesigns

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// RGBA IE8 fallback
// based on http://thesassway.com/intermediate/mixins-for-semi-transparent-colors
//
// usage: 
// @include rgba-fallback(rgba(red, 0.6), white);