Владислав Поляков

Отдельный стиль для страницы, для элементов. Один общий файл для gui элементов и UI интерфейса. Файл normalize.css . И файл где подключены шрифты. Самый лучший вариант !

Вот пример codepen

Используя :before и :after

.content-inner {
    width: 300px;
    height:300px;
    background: #FFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    position:relative;
}
.content-inner::before {
    content: "";
    display: block;
    border: 11px solid transparent;
    border-right-color: #DDD;
    position: absolute;
    top: 47px;
    left: -22px;
}
.content-inner::after {
    content: "";
    display: block;
    border: 10px solid transparent;
    border-right-color: #FFF;
    position: absolute;
    top: 48px;
    left: -20px;
}

Меняя значения top, left ? указываешь положения засечки.
Более подробно

Не реклама Пример начального макета, писал сам, полностью на Jade и less. Просто постарайтесь сперва скомпилировать less файлы в css и в jade подключать сами css уже скомпилированные
Главный файл

var express = require('express')
  , routes = require('./routes')
  , lessMiddleware = require('less-middleware')
  , http = require('http')
  , path = require('path');
var app = express();
app.configure(function () {
  app.set('port', process.env.PORT || 80);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(lessMiddleware(__dirname + '/public'));
  app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function () {
  app.use(express.errorHandler());
});
app.get('/', routes.index);

Файлы .Jade

doctype 5
html
  head
    block meta
    title= title
    link(rel='stylesheet', href='stylesheets/layout.css')
    link(rel='stylesheet', href='stylesheets/css.css')
    script(src='javascripts/jquery.js')
    script(src='javascripts/ajax.js')
    script(src='javascripts/progress.js')
    script(src='javascripts/moment.js')
    script(src='javascripts/livestamp.js')
  body
    section
      block header
      block content
      block footer

link(rel='stylesheet', href='stylesheets/layout.css')
link(rel='stylesheet', href='stylesheets/css.css')

Я подключаю css файлы, а в папке со стилями лежат только less файлы, при запуске сайта сперва они компилируются , а потом запускается сам сайт.
Если не через node
то так

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Далее, скачать less.js и подключить его, как script в тег head вашей страницы:

<script src="less.js" type="text/javascript"></script>

Вся проблема в ваших стилях , перепишите их правильно .
И почему при создании гибкого макета ,

.span12

использует фиксированную ширину ? Так же настройте сайт под разные размеры экрана и избавьтесь от фиксированных значений.
Используйте

@media screen and (max-width: 980px) {
   #pagewrap {
      width: 95%;
   }
   #content {
      width: 60%;
      padding: 3% 4%;
   }
   #sidebar {
      width: 30%;
   }
   #sidebar .widget {
      padding: 8% 7%;
      margin-bottom: 10px;
   }
}

Подробнее

Возможно все дело в кодировке , попробуйте передавать данные в формате utf-8 и принимать их в том же формате, ну или перекодировать .
https://habrahabr.ru/post/17640/
https://learn.javascript.ru/xhr-forms

xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8')

var e = $('#number').text(); 
e > 1 ? fun1() : fun2(); // тернерная операция , аналогична if-else
fun1(){
  var mydiv = $('<div/>', {
    id:     'mydiv',
    class:  'mydiv',
    text: 	'Содержимое блока уведомления' 
  });
  $('.content').append(mydiv);
} // выполняется функция если e > 1

fun2(){

} // выполняется функция если e < 1 или e = 1

setInterval(myF(), 300);
function myF(){
// return $('#demo2').text();
// var a = $('#demo2').text();
// return $('#demo2').html();
// var a = $('#demo2').html();
}

Можно использовать

jQuery("ELEMENT").bind( 'DOMSubtreeModified',function(){ // отслеживаем изменение содержимого 
//Some function	
});