nadavspi

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

.screen {
  width: 100%;
  
  &__laptop {
    color: black;

nadavspi

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

// Applies the Open Sans font stack
// 
// $weight - font weight
//         - Options: light, normal, semibold, bold
%opensans-stack {

nadavspi

<a href="#" class="button-primary">Primary button</a>
<a href="#" class="button-secondary">Secondary button</a>

nadavspi

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque harum, illo adipisci nulla accusamus quaerat, quas voluptatum voluptate ipsa. Deleniti dicta recusandae est a, expedita nostrum ducimus doloremque vero.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque harum, illo adipisci nulla accusamus quaerat, quas voluptatum voluptate ipsa. Deleniti dicta recusandae est a, expedita nostrum ducimus doloremque vero.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque harum, illo adipisci nulla accusamus quaerat, quas voluptatum voluptate ipsa. Deleniti dicta recusandae est a, expedita nostrum ducimus doloremque vero.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque harum, illo adipisci nulla accusamus quaerat, quas voluptatum voluptate ipsa. Deleniti dicta recusandae est a, expedita nostrum ducimus doloremque vero.</p>

nadavspi

<h1 class="em">Hi there <span>Dmitry</span></h1>
<h1 class="rem">Hi there <span>Dmitry</span></h1>

nadavspi

<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);

nadavspi

(function() {

   var files = ['assets/site/css/non-critical.css', 'assets/site/img/icons.svg'];
   
   function getExtension(src) {
      return src.split('.').pop();
   }

   function injectContent(content, type) {
      if (type === 'css') {

nadavspi

// ==============================================
// UI Pattern - ToggleSingle
// ==============================================

// Use this plugin to toggle the visibility of content based on a toggle link/element.
// This pattern differs from the accordion functionality in the Toggle pattern in that each toggle group acts
// independently of the others. It is named so as not to be confused with the Toggle pattern below
//
// This plugin requires a specific markup structure. The plugin expects a set of elements that it
// will use as the toggle link. It then hides all immediately-following siblings and toggles the sibling's

nadavspi

$j(this).on('click', function () {
    $j(this)
        .toggleClass('active')
        .next()
        .toggleClass('no-display');
});
// Hide the content
$j(this).next().addClass('no-display');

nadavspi

var $this = $j(this);
var $next = $this.next();

$this.on('click', function () {
    $this.toggleClass('active')
        .attr('aria-expanded', !$this.attr('aria-expanded') === 'true');

    $next().toggleClass('no-display')
        .attr('aria-hidden', !$next.attr('aria-hidden') === 'true');
});