paceaux

/**
 * Flexboxing lists
 */

ul{
	display:flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	height: 100vh;

paceaux

var uiFrame = function (viewName) {
    var frameIndex = 0, tridionView;
    while (windowFrame = window.top.frames[frameIndex++])
    {
        if ( (tridionView = windowFrame.$display && windowFrame.$display.getView() ) && tridionView.getId() === viewName)
        {
            return tridionView;
        }
    }
    console.log(tridionView);

paceaux

[class*="flex"]
    display:flex
    &[class*="col"]
      flex-direction: column;

    &[class*="row"] 
      flex-direction: row;

    for prop in space-between space-around center flex-start flex-end        
        &[class*=\"justify--{prop}\"]

paceaux

                        <select class="fieldset__field__select " id="js-state" name="state" title="Select your state"  >
                    <option>State</option>
                    <option value="AL">AL</option>
                    <option value="AK">AK</option>
                    <option value="AZ">AZ</option>
                    <option value="AR">AR</option>
                    <option value="CA">CA</option>
                    <option value="CO">CO</option>
                    <option value="CT">CT</option>
                    <option value="DE">DE</option>

paceaux

      supportsVh = function () {
        var detector = document.createElement('div'),
            winHeight = parseInt(window.innerHeight / 10, 10),
            testHeight;

        detector.style.height = '10vh'; // set an arbitrarily chosen height
        document.getElementsByTagName('body')[0].appendChild(detector); // add the element
        testHeight = parseInt(window.getComputedStyle(detector, null).height, 10); //get the computed style of the element

        document.getElementsByTagName('body')[0].removeChild(detector); // now remove the element

paceaux

/**
 * property order
 */
html{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
p {
background: rgba(100,100,100,.2);

paceaux

var CvsApp = function (selector) {
   this.el = document.querySelector(selector);
   this.ctx = this.el.getContext('2d');
   this.shapes = [];
   this.Shape = function (x,y) {
      this.path = new Path2D();
      this.coords = { x:x, y:y};
      this.size = {h:'', w:''};
   };
   this.addShape = function (shape) {

paceaux

var TridionWindow = function () {
  if ($messages) {return window;} else {
    for (var i = 0; i<frames.length; i++) {
      if (frames[i].$messages) return frames[i];
    }
  }
}
tridionWindow = tridionWindow();

paceaux

<section>
    <figure class="static">
        <img src="img/img1.jpg" data-imgDetect="parentClass" class="static__img"/>
    </figure>
    <figure class="static">
        <img src="img/img2.jpg" data-imgDetect="selfClass" class="static__img"/>
    </figure>
    <figure class="static">
        <img src="img/img3.jpg" data-imgDetect="parentClass" class="static__img"/>
    </figure>

paceaux

@-webkit-keyframes blink {
 from {
   opacity: 0.1;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}