JSFiddle

  • color swatches

    No-Library (pure JS), HTML, SCSS, JavaScript

    <h1>Color Swatches</h1>
    
    <div class="swatch round float-l" style="background-color: #ff0000" data-content="Primary: rgb(255,0,0)">
    </div>
    
    <div class="swatch round float-l" style="background-color: #991120" data-content="Secondary: #991120">
    </div>
    
    <div class="swatch round float-l" style="background-color: #661100" data-content="Background: #993300">
    </div>
    
  • on and off toggle button

    jQuery Slim 3.1.1 Slim, HTML, SCSS, JavaScript

    let icon = $(".icon-switch");
    icon.on("click", function(e) {
      let t = e.currentTarget;
      if(t.classList.contains("off")) {
        $(t).removeClass("off ...
  • find closest coords by long/lat

    No-Library (pure JS), HTML, CSS, JavaScript

    var lst = [[39.909736,-94.746094],
      [40.713956,-92.373047],
      [39.232253,-90.439453],
      [36.456636,-89.912109],
      [33.431441 ...
  • stretch elements with ratio to viewport height and float them

    No-Library (pure JS), HTML, SCSS, JavaScript

    <div class="outer">
        <div class="ratio-el">ratio always fitting the viewport height</div>
        <div class="ratio-el">ratio always fitting the viewport height</div>
        <div class="ratio-el">ratio always fitting the viewport height</div>
    </div>
  • line-clamp auf links verhalten sich anders als auf anderen elementen

    warum das so ist,... gute frage,... ;-)

    line clamp auf links, rendert die ... vor dem letzten Wort.
    <a href="#note" class="typo def-box line-clamp">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...</a>
  • fluid teaser example #3 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript

    <article>
        <div class="img">
            <img src="http://dummyimage.com/305x200/000/fff.png" />   
            <div class="meta">
                2014-02-21, 10:33 - Kategorie-X
            </div>
            <div class="flag">(=)</div>
        </div>
        <div class="body">
            <p>Company</p>
            <h1>Headline Lorem Ipsum In Here</h1>
        </div>   
    </article>
  • test layout

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="block">
        <h1>Was ist zu Tun?</h1>
        <p>Im folgenden werden Ihnen Abbildungen gezeigt, die jeweils mit einer Aufgabe verknüpft sind. Je nach Typ ...</p></div>
  • span tile over one or two columns

    this is the super long and complex way. musch easier is: if height/width < factor then 2 ;)

    # get the greatest common divisor
    euklid = (a, b) ->
        if b is 0
            return a
        else
            return euklid(b, a%b ...
  • flat a nested object and add an id and a parent id #7 is the latest revision

    jQuery Compat (edge), HTML, CSS, CoffeeScript

    window.flat = []
    
    flattenObject = (data, level, parent) =>
        out = null
        pos = 0 # the index
        
        for item in data
            
            if item.children is ...
  • find something in nested objects

    No-Library (pure JS), HTML, CSS, CoffeeScript

    findKey = (data, key) =>
        out = null
        for item in data
            if key is item.key
                return item.key
                
            if item.children ...