JSFiddle - React, Tailwind, and code Playground

by iamtimmo

HTML

<div class="row-fluid">
   <div class="branding-container">
       <!-- site navigation -->
<section id="site-main-nav">
  <nav class="navbar navbar-default" aria-label="site-level navigation">
    <div class="container-fluid">
      <!-- navbar header -->
      <div class="navbar-header">
        <span class="navbar-brand" data-toggle="collapse" data-target="#site-navbar">
          RETURN TO YOUR LIBRARY:
        </span>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#site-navbar"
                aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- collapsible content -->
      <div class="collapse navbar-collapse" id="site-navbar">
        <div class="container top">
          <ul class="nav navbar-nav">
                <li><a href="http://library.jhu.edu/">Sheridan Libraries</a></li>
                <li><a href="http://welch.jhmi.edu/">Welch Medical Library</a></li>
                <li><a href="http://www.sais-jhu.edu/library/">SAIS Library</a></li>
                <li><a href="http://musiclibrary.peabody.jhu.edu/">Friedheim Library</a></li>
                <li><a href="https://aplweb/departments/itsd/iks/Pages/IKS.aspx">APL Library</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</section>
</div>
</div>

SCSS

// Application settings
// use default theme for defaults
// @import "../default/default";
//@import (inline) "jhu_fonts.css";
@black: #000;
@jhuBlue: #002D72;
@grayLight: #555;
@paginationActiveBackground: #f5f5f5;
.pagination ul>.active>a,
.pagination ul>.active>span {
  color: @grayLight;
  cursor: default;
}

@textColor: @black;
@headingsColor: @jhuBlue;
@linkColor: @jhuBlue;
@linkColorHover: @grayLight;
@navbarCollapseWidth: 979px;
@navbarUncollapseWidth: @navbarCollapseWidth +1px;
@navbarLinkColor: @jhuBlue;
@navbarLinkColorHover: @grayLight;
@siteHeadingsFontFamily: 'Titling-Gothic';
@siteBodyFontFamily: 'Gentona';
@siteNavLinkColor: #BBB;
@siteNavHoverColor: #EEE;
@siteNavBackgroundColor: @jhuBlue;
@siteResultsStandardFontSize: 14px;
@siteResultsMobileFontSize: 15px;
@appBrandingColor: #555;
@appMenuColor: @jhuBlue;
@jhuHeadingsFontFamily: 'Titling-Gothic';
@jhuBodyFontFamily: 'Gentona';
@baseFontFamily: @siteBodyFontFamily;
// Application styles
.span3 {
  //float:right !important;
  padding: 10px 20px 20px 20px;
  #search-facets-heading {
    font-family: @jhuBodyFontFamily, sans-serif;
    color: @jhuBlue;
  }
  .navbar {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }
  @media (max-width: 767px) {
    li {
      padding: 5px 5px;
    }
  }
  @media (min-width: 768px) {
    //.navbar { all: inherit; }
    padding: inherit;
    .navbar-inner {
      all: inherit;
    }
    .btn-navbar {
      display: none;
    }
    .nav-heading {
      display: none;
    }
    .nav-collapse,
    .collapse {
      all: inherit;
      height: auto !important;
    }
  }
}

.span9 {
  //float: left !important;
  //margin-left: 0 !important;
  @media (max-width: 767px) {
    .table-search-results {}
    .table-condensed th, .table-condensed td {
      padding: 10px 5px;
      font-size: @siteResultsMobileFontSize;
    }
  }
}

// control screen reader stuff
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
 ...

JavaScript

/*
    jsFiddle does not directly support Less so we need these bits of code to bring it here. 
    
    Twitter: @aaronlayton
    Modified by meri
    Updated by max
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();